效果演示
http://demo.qpdiy.com/hxw/CSS3/rotate+light.html
物体旋转：
卡牌同一位置放2张图片，通过设置3D动画旋转实现
animation: cardfront 2s infinite;
-webkit-animation: cardfront 2s infinite;
@keyframes cardfront{
0%{transform: rotateY(0deg);}
50%{transform: rotateY(180deg);}
100%{transform: rotateY(0deg);}
}
@keyframes cardback{
0%{transform: rotateY(180deg);}
50%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}
光的效果：
@-webkit-keyframes cardlight{
0%{box-shadow: 0 0 0px 0px yellow;}
100%{box-shadow: 0 0 60px 0px yellow;}
}
以下是完整代码
1 <style type="text/css">
2 .wrap{
3 width: 640px;
4 margin: 0 auto;
5 }
6 .cardbg{
7 position: relative;
8 width: 157px;
9 height: 220px;
10 transform: rotate(30deg);
11 -webkit-transform: rotate(30deg);
12 }
13 .card-back,.card-front{
14 position: absolute;
15 left: 0;
16 top: 0;
17 width: 157px;
18 height: 220px;
19 backface-visibility: hidden;
20 box-shadow: 2px 2px 20px rgba(0,0,0,.5);
21 }
22 .card-front{
23 z-index: 2;
24 animation: cardfront 2s infinite;
25 -webkit-animation: cardfront 2s infinite;
26 }
27 .card-back{
28 z-index: 1;
29 background:url(images/cardbg.jpg) no-repeat;
30 background-size: 100% 100%;
31 animation: cardback 2s infinite;
32 -webkit-animation: cardback 2s infinite;
33 }
34 @keyframes cardfront{
35 0%{transform: rotateY(0deg);}
36 50%{transform: rotateY(180deg);}
37 100%{transform: rotateY(0deg);}
38 }
39 @-webkit-keyframes cardfront{
40 0%{-webkit-transform: rotateY(0deg);}
41 50%{-webkit-transform: rotateY(180deg);}
42 100%{-webkit-transform: rotateY(0deg);}
43 }
44 @keyframes cardback{
45 0%{transform: rotateY(180deg);}
46 50%{transform: rotateY(0deg);}
47 100%{transform: rotateY(180deg);}
48 }
49 @-webkit-keyframes cardback{
50 0%{-webkit-transform: rotateY(180deg);}
51 50%{-webkit-transform: rotateY(0deg);}
52 100%{-webkit-transform: rotateY(180deg);}
53 }
54 .card-light{
55 width: 50px;
56 margin: 50px;
57 box-shadow: 0 0 10px 3px yellow;
58 animation: cardlight 0.5s linear infinite;
59 -webkit-animation: cardlight 0.5s linear infinite;
60 }
61 @-webkit-keyframes cardlight{
62 0%{box-shadow: 0 0 0px 0px yellow;}
63 100%{box-shadow: 0 0 60px 0px yellow;}
64 }
65 </style>
66 </head>
67
68 <body>
69 <div class="wrap">
70 <div class="cardbg">
71 <div class="card-back"></div>
72 <img src="images/card1.jpg" alt="卡牌" class="card-front">
73 </div>
74 <img src="images/card1.jpg" alt="卡牌" class="card-light">
75 </div>
76 </body>
时间： 2024-10-11 00:41:06