css实现开红包的效果

最新推荐文章于 2023-12-15 14:48:50 发布

清音啊

最新推荐文章于 2023-12-15 14:48:50 发布

阅读量2.3k

点赞数 1

分类专栏： js css

本文链接：https://blog.csdn.net/qq_38839887/article/details/107911845

版权

js 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

<div id="hongbao" class="hongbao" style="display:block;" onclick="">
    <div class="" style="width:60%;margin:0 auto;margin-top:4rem;">
      <img style="width:100%" src="../../image/public/red_packet/text.png" alt="">
    </div>
    <div id="" class="open_div" style="">
      <div id="open_back" class="open_back"  style="">
        <img id="red_packet" style="width:2.25rem;" src="../../image/public/red_packet/open.png" alt="">
      </div>
    </div>
 </div>

.hongbao{
          background:url('../../image/public/red_packet/back.png');
          /*background:#FFF;*/
          background-size: 100% 100%;
          /*filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
          /* For IE 8*/
          /*-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
          width: 75%;
          height: 17.5rem;
          /*line-height: 15rem;*/
          margin-left: 12.5%;
          margin-top: 8rem;
          border-radius:0.5rem;
          /*text-align: center;*/
        }
        .open_div{
          display:flex;justify-content:center;
        }
        .open_back{
          background-image:url('../../image/public/red_packet/open_back.png');
          background-size: 100% 100%;
          width:5.6rem;
          height:5.6rem;
          margin-top: 3rem;
          display:flex;
          justify-content:center;
          align-items:center;
          /*transform: rotateY(180deg);
          -webkit-transform: rotateY(180deg);*/
        }
        @keyframes move {
            0% {
            　　transform: rotateY(0deg);
             　 -webkit-transform: rotateY(0deg);
            }
            100% {
               transform: rotateY(360deg);
               -webkit-transform: rotateY(360deg);
            }
        }

document.getElementbyId('open_back').onclick = function(e){
    //屏蔽父层点击事件
    e.stopPropagation();
    //红包开字图片旋转
    document.getElementbyId('open_back').style.cssText = 'animation: move 3s ease-in-out infinite;'
    setTimeout(function(){
      //结束凯开字图片旋转
      document.getElementbyId('open_back').style.cssText= 'animation-play-state:paused;'
     
    },3000)

  }