Transições CSS, animações e outros

Transições CSS, animações e outros

目录
Transição
2D deformação-transformada

• Deslocamento
• Esticam
• Girar
• Bisel
• origem
• Compreensivo

Estilo de interface de usuário de
animação de deformação 3D

• Estilo de mouse
• esboço
• Impedir o arrasto

Tecnologia Genie
Porta deslizante
Prefixo do navegador Conversão de
fonte da Web
ícone ico

过渡

• Animação de transição: é uma transição gradual de um estado para outro. A transição é escrita em si mesma
• Animação de quadro: reproduz em uma ordem e velocidade fixas em uma imagem quadro a quadro

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%);
}

Outro: translateY (), translateX ()

伸缩-scale(x,y)

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

Outro: scaleX (), scaleY ()

旋转-rotate(deg)

transform:rotate(30deg)

斜切-skew(deg,deg)

transform:skew(30deg,0deg)

Outros: skewX (), skewY ()

原点-transform-origin

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

综合-metrix()

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

3D变形

动画

Suporte a navegador: Internet Explorer 10, Firefox e Opera oferecem suporte a regras @keyframes e atributos de animação. Chrome e Safari precisam do prefixo -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

精灵技术

Reduza o número de solicitações do servidor. Tire uma foto, coloque o ícone nela e carregue o ícone alterando a posição da imagem de fundo.

• imagem de fundo
• fundo de repetição
• posição de fundo

滑动门

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

• Primeiro defina uma tag, defina o plano de fundo: url (./ bg.png) no-repeat;
• A altura da imagem de fundo é a mesma que a, defina o bloco embutido para a e adicione adequadamente o preenchimento à esquerda para ajustar a posição do texto
• Span também é inline-block, defina o plano de fundo: url (./ bg.png) no-repeat right ;, adicione padding-right apropriadamente
• pairar: adiciona uma imagem de fundo ao texto e ao elemento pai

浏览器前缀

Web字体

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

Fonte do ícone

• local na rede Internet

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

• Biblioteca de fontes de fontes de ícones Ali http://www.iconfont.cn/

• usar

• O arquivo de fontes é colocado no diretório

• Declare a fonte no estilo, a família da fonte pode ser personalizada

• demo.html visualização de arquivo

• Família de fontes do aplicativo: icomoon;

• Design sozinho

• Salvar como formato SVG

• Carregar e gerar ícones de importação de pacote de fontes

• Baixe o pacote de fontes compatível

• Anexe o novo ícone ao arquivo original selection.json de ícones de importação da biblioteca

转换ico图标

• formato de imagem png
• Ícone de conversão http://www.bitbug.net/
• Introduzir