css3鼠标悬浮图片左右摇晃

2020-05-02 3959 分享

鼠标悬浮,图片左右摇晃

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .public-nav{
            width: 173px;
            height: 183px;
            border: 1px solid red;
        }
        .public-nav:hover{
            animation: l2r 0.4s ease-out 0s;
        }

        @keyframes l2r{
            0%{transform:rotate(0);}
            25%{transform:rotate(-10deg);}
            50%{transform:rotate(0deg);}
            75%{transform:rotate(6deg);}
            100%{transform:rotate(0deg);}
        }


        img {
            display: inline-block;
        }

        .goods {
            width: 50%;
            text-align: center;
            margin: 50px auto;
        }

        .goods img {
            animation: myfirst 0.1s infinite;
        }

        @keyframes myfirst {
            0% {
                transform: translate(0px, 0px);
            }
            50% {
                transform: translate(0px, -20px);
            }
            100% {
                transform: translate(0px, 0px);

            }
        }
    </style>
</head>
<body>
<div class="public-nav now">
    <div>
        <img src="slider-arrow.png" alt="">
    </div>
</div>

<div>
    <img src="20180914224040943.jpg" />
</div>
</body>
</html>

CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程，可以自定义）

相关推荐