标签：nim class space anim ber rdf val body 前端
@keyframes cardFront { 0%, 40%, 100% { |
02 |
opacity:1; |
03 |
-webkit-transform:rotateY(0deg); |
04 |
-moz-transform:rotateY(0deg); |
05 |
-ms-transform:rotateY(0deg); |
06 |
transform:rotateY(0deg) |
07 |
} |
08 |
50%, 90% { |
09 |
opacity:1; |
10 |
-webkit-transform:rotateY(-180deg); |
11 |
-moz-transform:rotateY(-180deg); |
12 |
-ms-transform:rotateY(-180deg); |
13 |
transform:rotateY(-180deg) |
14 |
} |
15 |
} |
16 |
17 |
@keyframes cardBack { 0%, 40% ,100% { |
18 |
opacity:1; |
19 |
-webkit-transform:rotateY(-180deg); |
20 |
-moz-transform:rotateY(-180deg); |
21 |
-ms-transform:rotateY(-180deg); |
22 |
transform:rotateY(-180deg) |
23 |
} |
24 |
50%, 90% { |
25 |
opacity:1; |
26 |
-webkit-transform:rotateY(0deg); |
27 |
-moz-transform:rotateY(0deg); |
28 |
-ms-transform:rotateY(0deg); |
29 |
transform:rotateY(0deg) |
30 |
} |
31 |
} |
32 |
.fan{ width:300px; height:100px; position:relative;} |
33 |
.fan div{ width:300px;height:100px; color:#fff;text-align:center;line-height:100px;position:absolute;left:0;top:0;backface-visibility:hidden;} |
34 |
.f1{ background:red; animation:7s linear 2s normal both infinite running cardFront;} |
35 |
.f2{ background:green; animation:7s linear 2s normal both infinite running cardBack;} |
01 |
<div class="fan"> |
02 |
<div class="f1">前端老徐图片翻转特效--正面</div> |
03 |
<div class="f2">我是反面</div> |
04 |
</div> |
标签：nim class space anim ber rdf val body 前端
原文地址：http://www.cnblogs.com/xfdmb/p/6004768.html
