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

最新推荐文章于 2024-04-03 16:27:44 发布

原创

最新推荐文章于 2024-04-03 16:27:44 发布 · 2.1k 阅读

标签

#点击跟随 #动画

收录于

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

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

效果：

完整代码：

<!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 和 Chrome:*/
        @-webkit-keyframes mym

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看