CSS transitions, animations and others

目录
Transition
2D deformation-transform

Displacement
Stretch
Spin
Bevel
origin
Comprehensive

3D deformation
Animation
User interface style

Mouse style
outline
Prevent drag

Genie technology
Sliding door
Browser prefix
Web font
Conversion ico icon

`过渡`

Transition animation: is a gradual transition from one state to another. The transition is written in itself
Frame animation: play in a fixed order and speed through a picture frame by frame

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

Insert picture description here

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

Other: translateY(), translateX()

伸缩-scale(x,y)

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

Other: scaleX(), scaleY()

旋转-rotate(deg)

transform:rotate(30deg)

斜切-skew(deg,deg)

transform:skew(30deg,0deg)

Others: skewX(), skewY()

原点-transform-origin

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

综合-metrix()

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

3D变形
Insert picture description here

`动画`

Browser support: Internet Explorer 10, Firefox and Opera support @keyframes rules and animation attributes. Chrome and Safari need the prefix -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;}
}

属性
Insert picture description here

`用户界面样式`

鼠标样式

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

outline

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

防止拖拽

resize:none

`精灵技术`

Reduce the number of requests from the server. Take a picture, place the icon in it, and load the icon by changing the position of the background picture.

background-image
background-repeat
background-position

`滑动门`

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

First define an a tag, set the background background: url(./bg.png) no-repeat;
The height of the background image is the same as a, set inline-block for a, and appropriately add padding-left to adjust the position of the text
Span is also inline-block, set the background background: url(./bg.png) no-repeat right;, add padding-right appropriately
hover: Add a background image to both the text and the parent element

`浏览器前缀`

Insert picture description here

`Web字体`

Font format
ttf, otf, woff, eot, svg

Icon font

website
icoMoon http://www.iconfont.cn/
Ali icon font font library http://www.iconfont.cn/
use
The fonts file is placed in the directory
Declare the font in the style, font-family can be customized
demo.html file view
Application font-family: icomoon;
Design alone
Save as svg format
Upload and generate font package import icons
Download compatible font pack
Append the new icon to the original library import icons selection.json file

`转换ico图标`

png image format
Conversion icon http://www.bitbug.net/
Introduce