CSS鼠标移动抖动 animation + transform

最新推荐文章于 2023-07-11 14:19:53 发布

Float544

最新推荐文章于 2023-07-11 14:19:53 发布

阅读量734

点赞数

分类专栏：学习心得文章标签： css3

本文链接：https://blog.csdn.net/qq_56392992/article/details/123695576

版权

学习心得专栏收录该内容

162 篇文章 0 订阅

订阅专栏

    <style>
        .center {
            margin: 100px auto;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: pink;

        }

        .center:hover {
            animation: doudong 0.1s linear infinite;
        }

        @keyframes doudong {
            0% {
                transform: translateX(5px);
                transform: rotate(10deg);
            }

            100% {
                transform: translateY(-5px);
                transform: rotate(-10deg);
            }
        }
    </style>
</head>

<body>
    <div class="center">
    </div>
</body>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Float544

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS鼠标移动抖动 animation + transform

<style> .center { margin: 100px auto; top: 50%; left: 50%; width: 200px; height: 200px; background-color: pink; } .center:hover { animat...
复制链接

扫一扫