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

效果演示

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

 

你可能感兴趣的:(css3)