小球跟随鼠标移动效果

最新推荐文章于 2021-03-07 09:18:24 发布
最新推荐文章于 2021-03-07 09:18:24 发布
阅读量866 收藏 2
点赞数
分类专栏： javaScript css 文章标签： 鼠标 移动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27610601/article/details/78730398
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #list li {
            /*width: 30px;*/
            /*height: 30px;*/
            list-style: none;
            /*border-radius: 50%;*/
            /*background: deeppink;*/
            position: absolute;
        }
        div{
            width: 50px;
            height: 50px;
            border-radius: 60%;
            text-align: center;
            /*padding-top: 6px;*/


        }
        .xin{
            /*margin-top:200px;*/
            /*margin-left: 300px;*/
            /*background: url("aa.jpg") -200px -300px no-repeat;*/
            /*position: relative;*/
            /*z-index: 200;*/
            transform: scale(0.1);
            border: 1px solid red;
        }


        span{
            display: block;
            padding-top: 15px;
        }
        .hua{
            background: #ff1493;
            height: 80px;
            position: absolute;
            transition: all 2s ease;
            /*opacity: 0;*/
            z-index: -1;
        }
        .hua1{
            /*background: url("bb.jpg") -500px -500px no-repeat;*/
        }
        .hua1 img{
            width: 60px;
            height: 60px;
            display: block;
            border-radius: 50%;


        }
        .hua2{
            top: -70px;
        }
        .hua3{
            top: -50px;
            right: -40px;
            transform: rotate(50deg);
        }
        .hua4{
            top: -50px;
            left: -40px;
            transform: rotate(-50deg);
        }
        .hua5{
            top: 10px;
            left: -40px;
            transform: rotate(50deg);
        }
        .hua6{
            top: 10px;
            right: -40px;
            transform: rotate(-50deg);
        }
        .hua7{


            top: 30px;
        }
        .jing{
            height: 300px;
            width: 20px;
            background: #39f409;
            left: 15px;
            position: relative;
            z-index: -2;
            /*opacity: 0;*/
        }
        .ye1{
            width: 30px;
            height: 150px;
            background: green;
            position: relative;
            top: -280px;
            left: -50px;
            transform: rotate(-50deg);
            z-index: -4;
            /*opacity: 0;*/
        }
        .ye2{
            width: 30px;
            height: 150px;
            background: green;
            position: relative;
            top: -380px;
            right: -70px;
            transform: rotate(50deg);
            z-index: -4;
            /*opacity: 0;*/
        }
    </style>
</head>
<body>
<ul id="list">
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>
    <li>
        <div class="xin">
            <div class="hua1"><img src="bb.jpg" alt=""/></div>
            <div class="hua2 hua"></div>
            <div class="hua3 hua"></div>
            <div class="hua4 hua"></div>
            <div class="hua5 hua"></div>
            <div class="hua6 hua"></div>
            <div class="hua7 hua"></div>
            <div class="jing"></div>
            <div class="ye1"></div>
            <div class="ye2"></div>
        </div>
    </li>


</ul>
<script>
    var list = document.getElementById('list');
    var lis = list.getElementsByTagName('li');
    document.documentElement.onmousemove = function (event) {
        var e = event || window.event;
        var x = e.clientX;
        var y = e.clientY;
        var m = 0;
        var timer = setInterval(function () {
                lis[m].style.left = x + 'px';
                lis[m].style.top = y + 'px';
                m = m+1;
                if(m>=lis.length){
                    clearTimeout(timer);
                    m = 0;
                }
            }, 50);
    }


</script>
</body>
</html>
sense26楠
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 随鼠标移动的小球
wandoumm的博客
07-09 768
import {reactive,ref,watch,onBeforeMount,computed} from 'vue'
鼠标移动跟随效果
爱学习的豪豪的博客
08-28 376
实现鼠标跟随效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
java 小球运动轨迹_Android开发——跟随手指的小球实现
weixin_39669265的博客
03-07 236
今天要实现的是一个跟随手指的小球，说白了就是让小球按着手指滑动的轨迹运动，实现起来还是比较容易的。用到的类是drawView，我们先自定义一个DrawView组件。DrawView.java:package cn.csdn.android.view;import android.content.Context;import android.graphics.Canvas;import androi...
在Vue中如何快速实现小球动画
weixin_30532837的博客
08-19 567
在Vue中如何快速实现小球动画 1. 在自己的页面中有做好相应的测试位置 2. 然后给小球添加属性 v-show并且添加相应的数据（false） 3.点击购物车 让 false = true； 4.然后到重点了； 用 transition的标签 把要运...
原生js代码随机跟随鼠标移动的彩球动画
09-14
原生js代码随机跟随鼠标移动的彩球动画
小球跟随鼠标效果的实现
xin的博客
06-05 610
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小球跟随鼠标效果的实现</title> <style> span { position: absolute; left: -10...
小球随鼠标移动
sunlizhen的专栏
08-15 594
html: css:  div{             width:150px;             height:150px;             background:green;             border-radius:50%;             position:absolute; } js: window.onload = functi
js实现跟随鼠标移动的小球
10-16
本文将深入解析如何使用JavaScript实现一个跟随鼠标移动的小球效果。 首先，让我们分析提供的代码。这段代码包含HTML、CSS和JavaScript三部分，创建了两个小球（红色和绿色），它们分别位于两个具有边框的方框内，...
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
10-18
主要介绍了原生JS实现的多个彩色小球跟随鼠标移动动画效果,涉及javascript事件响应、页面元素属性动态修改及随机数应用等相关操作技巧,需要的朋友可以参考下
ES6与canvas实现鼠标小球跟随效果
09-24
这个效果是这样的：当用户移动鼠标时，屏幕上会生成一个小球，并且这个小球会跟随鼠标的移动而移动，直到消失。以下是实现这一效果的关键知识点： 1. **ES6中的Class（类）**： 在JavaScript ES6中，引入了`class`...
java跟随鼠标十字架
12-16
java跟随鼠标十字架
as3做的一串跟随鼠标飘动的小球
03-26
用flash as3代码编写的一串跟随鼠标运动的代码
js实现手表表盘时钟与圆周运动
01-18
苹果手表表盘时钟与js圆周运动 实现结果 需求分析： 1、时钟时间按照北京时间进行显示; 2、时针、分针、秒针按照时钟运转标准进行运转； 3、小球跟随秒表围绕表盘进行圆周运动。 代码分析 1、html结构：时针、分针、秒针、小球分别用一个div，将他们一起放到一个大的div中； 2、css样式：表盘布局多使用相对定位与绝对定位，将表针与各时刻标刻移动到特定的位置； 3、js行为：为了实现动态获取时间，可以使用var now=new Date()，再利用定时器setInterval，实现每经过1s重新获取当前时间。 核心函数 时钟运动 function getTimeDeg(){ //
基于JavaScript实现 获取鼠标点击位置坐标的方法
10-27
本篇文章，小编将为大家介绍基于JavaScript实现 获取鼠标点击位置坐标的方法。有需要的朋友可以参考一下
js实现跟随鼠标移动且带关闭功能的图片广告实例
10-24
主要介绍了js实现跟随鼠标移动且带关闭功能的图片广告,实例分析了javascript操作鼠标事件及html元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
小球跟随鼠标点击移动
kongjunchao159的博客
08-06 1242
#foo{width:50px; height:50px; border-radius:50px; background-color:#F00; position:absolute; top:0; left:0; -webkit-transition:all 1s;} var f = document.getElementById('foo'); document.add
js小效果之跟随鼠标移动的小球
热门推荐
主要领域：前端开发
08-07 1万+
<!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type="text/css"> *{ margin: 0; padding:0; } #div1{wid...
jQuery实现图片跟着鼠标移动的效果
何明洋的编程技术博客
07-03 5078
例子：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="ut
实现小球跟随鼠标的效果
最新发布
06-09
可以使用 JavaScript 和 CSS 实现小球跟随鼠标的效果。具体实现步骤如下： 1. 在 HTML 中添加一个小球元素： ```html <div id="ball"></div> ``` 2. 在 CSS 中设置小球的样式，包括大小、颜色、圆角等： ```css ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值