Transiciones CSS, animaciones y otros

Transiciones CSS, animaciones y otros

目录
Transición de
deformación-transformación 2D

• Desplazamiento
• Tramo
• Girar
• Bisel
• origen
• Exhaustivo

Estilo de interfaz de usuario de
animación de deformación 3D

• Estilo de ratón
• contorno
• Prevenir el arrastre

Tecnología Genie
Puerta corredera
Prefijo del navegador Conversión de
fuente web
Icono ico

过渡

• Animación de transición: es una transición gradual de un estado a otro. La transición está escrita en sí misma.
• Animación de fotogramas: reproduce en un orden fijo y acelera una imagen fotograma a fotograma.

transition:要过渡的属性 花费时间 运动曲线 何时开始
transition:width .5s ease 0		//单个
transition:width .5s,height .5s		//多组
transition:all .5s		//所有

2D变形-Transform

位移-translate(x,y)

//变形
E:hover{
    
    transform:translate(100px,0)}	//向下移动100px
//过渡
E{
    
    transition:all 0.5}

居中写法

div{
    
    
	position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    //以自身转移
    transform:translate(-50%,-50%);
}

Otro: translateY (), translateX ()

伸缩-scale(x,y)

transform:scale(0.6,0.8)		//宽与高缩放
transform:scale(0.6)		//宽与高一起缩放

Otro: scaleX (), scaleY ()

旋转-rotate(deg)

transform:rotate(30deg)

斜切-skew(deg,deg)

transform:skew(30deg,0deg)

Otros: skewX (), skewY ()

原点-transform-origin

transform-origin:right bottom		//设置变形原点为右下

综合-metrix()

matrix(旋转 缩放 移动 倾斜) 
transform:matrix(0.866,0.5,-0.5,0.866,0,0)

3D变形

动画

Compatibilidad con el navegador: Internet Explorer 10, Firefox y Opera admiten las reglas de @keyframes y los atributos de animación. Chrome y Safari necesitan el prefijo -webkit-

语法

animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向

示例

//定义动画 move名称
animation:move 3s ease 0s

//定义关键帧 
@keyframes move{
    
    
    from{
    
    };
    to{
    
    }
}

@keyframes move
{
    
    
0%   {
    
    background: red;}
25%  {
    
    background: yellow;}
50%  {
    
    background: blue;}
100% {
    
    background: green;}
}

属性

用户界面样式

鼠标样式

//将鼠标放在元素上所显示的样式
cursor:pointer|text|move|default		//小手|选择|移动||

outline

//在元素外围，边框外围
outline:0|none	//不设置
outline:1px solid red	
outline-color:red
outline-style:solid
outline-width:2px

防止拖拽

resize:none

精灵技术

Reducir el número de solicitudes del servidor. Tome una foto, coloque el icono en ella y cargue el icono cambiando la posición de la imagen de fondo.

• imagen de fondo
• repetición de fondo
• posición de fondo

滑动门

<a href="#">
	<span>文字</span>
<a/>

• Primero defina una etiqueta a, establezca el fondo de fondo: url (./ bg.png) no-repeat;
• La altura de la imagen de fondo es la misma que a, establezca un bloque en línea para a, y agregue apropiadamente padding-left para ajustar la posición del texto
• Span también es inline-block, configure el fondo de fondo: url (./ bg.png) no-repeat right ;, agregue padding-right de manera apropiada
• hover: agrega una imagen de fondo tanto al texto como al elemento principal

浏览器前缀

Web字体

Formato de fuente
ttf, otf, woff, eot, svg

Fuente de icono

• sitio web

• icoMoon http://www.iconfont.cn/

• Biblioteca de fuentes de fuentes de íconos de Ali http://www.iconfont.cn/

• utilizar

• El archivo de fuentes se coloca en el directorio

• Declare la fuente en el estilo, la familia de fuentes se puede personalizar

• vista de archivo demo.html

• Familia de fuentes de la aplicación: icomoon;

• Diseño solo

• Guardar como formato svg

• Cargar y generar iconos de importación de paquetes de fuentes

• Descargar paquete de fuentes compatibles

• Agregue el nuevo icono al archivo selection.json de los iconos de importación de la biblioteca original

转换ico图标

• formato de imagen png
• Icono de conversión http://www.bitbug.net/
• Introducir