js实现鼠标点击跟随CSS3动画demo（代码全）

最新推荐文章于 2024-07-04 18:15:00 发布

就像风1样

最新推荐文章于 2024-07-04 18:15:00 发布

阅读量2k

点赞数 1

分类专栏： JavaScript 文章标签：点击跟随动画

本文链接：https://blog.csdn.net/qq_42221334/article/details/96127338

版权

这篇博客展示了如何使用JavaScript结合CSS3实现鼠标点击元素后，其他元素跟随鼠标的动画效果。通过提供的完整代码，读者可以理解并应用到自己的项目中。

摘要由CSDN通过智能技术生成

效果：

完整代码：

<!DOCTYPE html>
<html>
<head>
    <title>鼠标跟随</title>
    <meta charset="utf-8">
    <style type="text/css">
        body{
            height: 5000px;
        }
        div{
            position: absolute;
            border: 1px solid #ccc;
            cursor: pointer;
            width: 100px;
            height: 100px;
            background-color: #03c03c;
            opacity: 0.8;
            animation:mymove 5s infinite;
            /*Safari 和 Chrome:*/
            -webkit-animation:mymove 5s infinite;
        }
        @keyframes mymove
        {
            0% {background-color:red;}
            50% {background-color:yellow;}
            100% {background-color:blue;}
        }

        /*Safari 和 C