css3实现卡牌旋转与物体发光效果

最新推荐文章于 2026-01-12 00:29:48 发布

转载最新推荐文章于 2026-01-12 00:29:48 发布 · 255 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/huangxiaowen/p/4270034.html

本文介绍如何使用 CSS3 实现一个简单的 3D 卡牌翻转动画，包括两张图片在同一位置通过 3D 动画旋转显示，并加入光影效果提升视觉体验。

效果演示

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>

View Code

转载于:https://www.cnblogs.com/huangxiaowen/p/4270034.html