首页 > Web开发 > 详细

css动画

时间:2019-06-13 21:06:59      阅读:44      评论:0      收藏:0      [点我收藏+]

标签:alt   spa   ini   pause   分享   stat   origin   yellow   top   

html:

1 <div class="container">
2     <img src="./1.png" class="img">
3 </div>        

css:

.container{
            width: 500px;
            height: 200px;
            background-color: yellow;
            text-align: center;
        }

        .img{
            animation: transform 2.5s linear infinite forwards;
        }

        .img:hover{
            animation-play-state: paused;
        }

        /*4个时间段,0%到25%,从最低点到左上;25%到50%,从左上到最低点;50%到70%,从最低点到右上;70%到100%,从右上到最低点*/
        @-webkit-keyframes transform { 
            0% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            25% {transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
            50% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            75% {transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
            100% {transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
        }
        @keyframes transform { 
            0% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            25% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(20deg);transform:rotate(20deg);}
            50% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
            75% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(-20deg);transform:rotate(-20deg);}
            100% {-webkit-transform-origin:top center;transform-origin:top center;-webkit-transform:rotate(0deg);transform:rotate(0deg);}
        }

效果:

技术分享图片

css动画

标签:alt   spa   ini   pause   分享   stat   origin   yellow   top   

原文:https://www.cnblogs.com/wlxian/p/11019406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号