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

时间：2022-10-28 16:54:58

效果演示

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;}
}

以下是完整代码

 <style type="text/css">

   .wrap{

     width: 640px;

     margin: 0 auto;

   }

   .cardbg{

     position: relative;

     width: 157px;

     height: 220px;

     transform: rotate(30deg);

     -webkit-transform: rotate(30deg);

   }

   .card-back,.card-front{

     position: absolute;

     left: 0;

     top: 0;

     width: 157px;

     height: 220px;

     backface-visibility: hidden;

     box-shadow: 2px 2px 20px rgba(0,0,0,.5);

   }

   .card-front{

     z-index: 2;

     animation: cardfront 2s infinite;

     -webkit-animation: cardfront 2s infinite;

   }

   .card-back{

     z-index: 1;

     background:url(images/cardbg.jpg) no-repeat;

     background-size:  100% 100%;

     animation: cardback 2s infinite;

     -webkit-animation: cardback 2s infinite;

   }

   @keyframes cardfront{

     0%{transform: rotateY(0deg);}

     50%{transform: rotateY(180deg);}

     100%{transform: rotateY(0deg);}

   }

   @-webkit-keyframes cardfront{

     0%{-webkit-transform: rotateY(0deg);}

     50%{-webkit-transform: rotateY(180deg);}

     100%{-webkit-transform: rotateY(0deg);}

   }

   @keyframes cardback{

     0%{transform: rotateY(180deg);}

     50%{transform: rotateY(0deg);}

     100%{transform: rotateY(180deg);}

   }

   @-webkit-keyframes cardback{

     0%{-webkit-transform: rotateY(180deg);}

     50%{-webkit-transform: rotateY(0deg);}

     100%{-webkit-transform: rotateY(180deg);}

   }

   .card-light{

     width: 50px;

     margin: 50px;

     box-shadow: 0 0 10px 3px yellow;

     animation: cardlight 0.5s linear infinite;

     -webkit-animation: cardlight 0.5s linear infinite;

   }

   @-webkit-keyframes cardlight{

     0%{box-shadow: 0 0 0px 0px yellow;}

     100%{box-shadow: 0 0 60px 0px yellow;}

   }

   </style>

 </head>

 <body>

   <div class="wrap">

     <div class="cardbg">

       <div class="card-back"></div>

       <img src="data:images/card1.jpg" alt="卡牌" class="card-front">

     </div>

     <img src="data:images/card1.jpg" alt="卡牌" class="card-light">

   </div>

 </body>

相关文章