css3新特性_CSS3 新特性是一种怎样的体验？

过渡transition

transition: 过渡的属性 过渡的时间 过渡的类型 延迟时间;

如：

transition：all 2s linear 2s;

transition：width 2s ease-in-out 2s,height .2s ease 3s;

变形transform

transform:

平移: translate(X轴,Y轴)

缩放: scale(2,-2) --- 正数：默认是1 负数：先翻转，再缩放相应倍数

倾斜(扭曲): skew(45deg,45deg) 单位deg(度)

旋转: rotate(360deg)

缩放设置基准：transform-origin：left |center| right | % | px top | middle | bottom | % | px;

动画animation

animation: 动画规则的名称 动画执行的时间 动画的类型 延迟时间 动画执行的次数 执行动画结束后是否停止在结束的位置 动画反向执行;

如：

animation: mymove(动画规则的名称) 4s linear 2s 2(执行次数|infinite) forwards(在动画结束位置停止) alternate(反向执行);

自定义规则如下2种方式：

方式1：

@Keyframes mymove{

from{

}

to{

}

}

方式2:

@Keyframes mymove{

10%{

}

40%,60%{

}

100%{

}

}

过渡的练习案例代码：

CSS3的过渡

.box-main{

width: 400px;

height: 400px;

background-color: #CCCCCC;

}

.box{

width: 200px;

height: 200px;

background-color: red;

/*display: none;*/

/*在我们的过渡效果中尽量避免使用display

*/

visibility: hidden;

opacity: 0;

}

.box-main:hover .box{

/*过渡效果:

* 过渡属性 过渡的时间 过渡效果的类型 延迟时间s

*/

transition: opacity 3s ease-in-out 1s,width 3s ease-in-out 1s;

/*display: block;*/

visibility: visible;

opacity: 1;

width: 300px;

height: 300px;

}

变形的练习案例代码：

变形

div{

margin: 5px auto;

width: 300px;

height: 300px;

line-height: 300px;

text-align: center;

font-size: 28px;

color: white;

font-weight: bold;

transition: all 2s linear;

}

.box-one{

background-color: blue;

}

.box-one:hover{

/*变形：transform()

*X轴偏移量

*Y轴偏移量

*/

transform: translate(40px,0px);

}

.box-two{

background-color: yellow;

}

.box-two:hover{

/*缩放

*负数：先翻转，再进行缩放。

*/

transform: scale(-2,1);

/*设置基准*/

transform-origin: left top;

}

.box-three{

background-color: pink;

}

.box-three:hover{

/*倾斜*/

transform: skew(45deg,180deg);

transform-origin: 100px 100px;

}

.box-four{

/*border-radius: 50%;*/

background-color: orangered;

}

.box-four:hover{

/*旋转*/

transform: rotate(720deg);

}

.box-total{

background-color: gold;

}

.box-total:hover{

transform: skew(45deg,180deg) translate(40px,0px) scale(-2,1) rotate(720deg);

}

平移

缩放

倾斜

旋转

整合

动画的练习案例代码(轮播效果)：

轮播

*{

padding: 0px;

margin: 0px;

}

section{

height: 273px;

/*background-color: #efefef;*/

}

.container{

width: 570px;

height: 273px;

margin: 0 auto;

/*超出隐藏*/

overflow: hidden;

/*定位*/

position: relative;

}

.scroll{

width: 2280px;

height: 273px;

font-size: 0;

/*position: relative;*/

/*加动画*/

animation: my-scroll 10s linear infinite;

}

.scroll:hover{

animation-play-state: paused;

cursor: pointer;

}

/*切换轮播图的规则*/

@-webkit-keyframes my-scroll{

0%,20%{

margin-left: 0px;

}

25%,45%{

margin-left: -570px;

}

50%,75%{

margin-left: -1140px;

}

80%,100%{

margin-left: -1710px;

}

}

span:nth-child(1){

width: 30px;

height: 30px;

line-height: 30px;

border: 1px solid yellow;

display: inline-block;

border-radius: 50%;

text-align: center;

color: white;

font-weight: bold;

background-color: gold;

position: absolute;

left: 280px;

top: 230px;

}

span:nth-child(1):hover{

background-color: green;

border: 1px solid green;

cursor: pointer;

animation-play-state: running;

}

span:nth-child(1):hover ~.scroll{

/*定义动画*/

animation: one 2s linear;

}

/*切换第一章的规则*/

@-webkit-keyframes one{

0%,10%{

margin-left: 0px;

}

90%,100%{

margin-left: 0px;

}

}

span:nth-child(2){

width: 30px;

height: 30px;

line-height: 30px;

border: 1px solid yellow;

display: inline-block;

border-radius: 50%;

text-align: center;

color: white;

font-weight: bold;

background-color: gold;

position: absolute;

left: 320px;

top: 230px;

}

span:nth-child(2):hover{

background-color: green;

border: 1px solid green;

cursor: pointer;

animation-play-state: running;

}

span:nth-child(2):hover ~.scroll{

/*定义动画*/

animation: two 2s linear;

}

/*切换第一章的规则*/

@-webkit-keyframes two{

0%,10%{

margin-left: -570px;

}

90%,100%{

margin-left: -570px;

}

}

span:nth-child(3){

width: 30px;

height: 30px;

line-height: 30px;

border: 1px solid yellow;

display: inline-block;

border-radius: 50%;

text-align: center;

color: white;

font-weight: bold;

background-color: gold;

position: absolute;

left: 360px;

top: 230px;

}

span:nth-child(3):hover{

background-color: green;

border: 1px solid green;

cursor: pointer;

animation-play-state: running;

}

span:nth-child(3):hover ~.scroll{

/*定义动画*/

animation: three 2s linear;

}

/*切换第一章的规则*/

@-webkit-keyframes three{

0%,10%{

margin-left: -1140px;

}

90%,100%{

margin-left: -1140px;

}

}

span:nth-child(4){

width: 30px;

height: 30px;

line-height: 30px;

border: 1px solid yellow;

display: inline-block;

border-radius: 50%;

text-align: center;

color: white;

font-weight: bold;

background-color: gold;

position: absolute;

left: 400px;

top: 230px;

}

span:nth-child(4):hover{

background-color: green;

border: 1px solid green;

cursor: pointer;

}

span:nth-child(4):hover ~.scroll{

/*定义动画*/

animation: four 2s linear;

}

/*切换第一章的规则*/

@-webkit-keyframes four{

0%,10%{

margin-left: -1710px;

}

90%,100%{

margin-left: -1710px;

}

}

1

2

3

4