css3新语法,CSS3 新特性

transition - 过渡

通过过渡transition，可以实现简单的动画交互效果。

// 语法

transition: property duration timing-function delay;

复制代码

属性值和描述

实例-过渡

从初始状态过渡到终止状态时速度由快到慢，运动时间2s，1s后开始执行。

div

{

width:80px;

height:80px;

background:rgb(18, 185, 121);

transition:width 2s ease 1s;

-webkit-transition:width 2s ease 1s;

}

div:hover

{

width:200px;

}

复制代码

实例-hover效果

button{

width:100px;

height:70px;

border-radius: 10%;

color: forestgreen;

}

.one{

transition: all 3s;

}

button:hover

{

background:rgb(218, 118, 4);

}

// html

Monday

Tuesday

复制代码

实例-过渡旋转

.box {

height: 200px;

width: 200px;

background: -webkit-radial-gradient(rgb(105, 103, 204),rgb(226, 40, 26),rgb(106, 177, 85));

transition: all 3s;

}

.box:hover {

transform: rotate(180deg) scale(.5, .5);

background: -webkit-radial-gradient(rgb(218, 44, 116),rgb(45, 47, 207),rgb(201, 128, 19));

}

// html

复制代码

animation - 动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

复制代码

shadow - 阴影

transform - 转换

主要包括 translate(水平移动)、rotate(旋转)、scale(伸缩)、skew(倾斜)

translate:

translate(x,y) 沿着x轴正方向移动x距离 y轴正方向移动y距离

translateX(n) 沿着x轴正方向移动n距离

translateY(n) 沿着y轴正方向移动n距离

复制代码

scale:

scale(x,y) 更改元素的宽度和高度，将元素的宽度变为原来的x倍，将高度变为原来的y倍

scaleX(n) 更改元素的宽度

scaleY(n) 更改元素的高度

复制代码

rotate:

rotate(x) 围绕z轴旋转，只接受一个参数，并且这个是2d方面的旋转，但是和后面的3d旋转中的围绕z轴旋转有着本质区别

rotateX(n) 围绕x轴旋转

rotateY(n) 围绕y轴旋转

复制代码

skew:

skew(x-angle,y-angle) 定义2d倾斜旋转 沿着x轴和y轴

skewX(angle) 如果angle是正值，则沿着x轴正方向偏移斜切，负值则相反

skewY(angle) 如果angle是正值，则沿着y轴正方向偏移斜切，负值则相反

复制代码