美文网首页
css3动画效果 --(旋转)

css3动画效果 --(旋转)

作者: 人生的旅行 | 来源:发表于2020-02-27 17:33 被阅读0次

    需求:

    让下面的图片绿色的箭头框按顺时针做360度旋转,文字保持不动。

    旋转.png
    用css3实现这种需求so easy,当然有人会说用gif图更方便,的确gif图很方便这点不否认
    好了言归正传上代码:
    • html:
    <div class="run_icon">
         <img class="runImg" src="../../assets/image/coolStationImg/run_icon.png" alt="运行">
         <div class="run_text">运行</div>
    </div>
    
    • css:
    .run_icon {
                    margin-top: 50px;
                    margin-left: 50px;
                    position: relative;
                    display: flex;
                    font-size: 14px;
                    color: rgba(51, 198, 124, 1);
                    height: 80px;
                    width: 80px;
                    .runImg {
                      -webkit-animation: rotateImg 2s linear infinite;
                      height: 70px;
                      width: 70px;
                      vertical-align: middle;
                    }
                    .run_text {
                      position: absolute;
                      top: 25px;
                      left: 22px;
                      z-index: 3;
                    }
                  }
                  @keyframes rotateImg {
                    0% {transform : rotate(0deg);}
                    100% {transform : rotate(360deg);}
                  }
    
                  @-webkit-keyframes rotateImg {
                    0%{-webkit-transform : rotate(0deg);}
                    100%{-webkit-transform : rotate(360deg);}
                  }
    

    相关文章

      网友评论

          本文标题:css3动画效果 --(旋转)

          本文链接:https://www.haomeiwen.com/subject/fxxxhhtx.html