动画实现div左右摆动

最新推荐文章于 2023-10-19 11:36:57 发布

戒不掉的伤怀

最新推荐文章于 2023-10-19 11:36:57 发布

阅读量757

点赞数 2

分类专栏：工作类文章标签：前端

本文链接：https://blog.csdn.net/u013141712/article/details/123864438

版权

工作类专栏收录该内容

42 篇文章 2 订阅

订阅专栏

1，使用特点：

animation 作为延迟时间，和触发css的操作

transform ：百分百操作，上面的延迟动作

2，呈现效果

3，代码实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>主页面</title>
    </head>
<body>
     <ul class="card-list clearfix">
         <li class="card-li" id="abc1" onmouseover="a(1)"><i class=""></i><img src="https://pic.51ifonts.com/images/client-index/card1.jpg" alt="" class=""></li>
         <li class="card-li" id="abc2" onmouseover="a(2)"><i class=""></i><img src="https://pic.51ifonts.com/images/client-index/card2.jpg" alt="" class=""></li>
         <li class="card-li" id="abc3" onmouseover="a(3)"><i class=""></i><img src="https://pic.51ifonts.com/images/client-index/card3.jpg" alt="" class=""></li>
       
         <script>
             function a(i){
                var obj = document.getElementById("abc"+i)
                obj.className="card-li baidong"
             }
         </script>
     <style>
        .card-li {
            float: left;
            margin-right: 42px;
            width: 84px;
            height: 228px;
            background: #fff;
            border: 1px solid #d9ddea;
            box-shadow: 0 1px 5px 0 rgb(217 221 234 / 56%);
            border-radius: 42px;
            padding-top: 36px;
            text-align: center;
            transform-origin: 42px 36px;
        }
        
        .card-li.baidong{
            animation: rotate5 5s ease-in-out;
        }

        @-webkit-keyframes rotate5{
            0%{
                -webkit-transform:rotate(0deg);
            }
            20%{
                -webkit-transform:rotate(9deg);
            }
            40%{
                -webkit-transform:rotate(-9deg);
            }
            60%{
                -webkit-transform:rotate(-3deg);
            }
            80%{
                -webkit-transform:rotate(3deg);
            }
            100%{
                -webkit-transform:rotate(0deg);
            }
        }
        
    </style>

</body>
</html>