js 爱心随鼠标移动产生并消散 (源码)

效果图

当鼠标移动就会产生爱心并且会在1s内相四周散开并消散

css

* {margin: 0;padding: 0;
}
body {background-color: #333;min-height: 100vh;overflow: hidden;
}
span {position: absolute;pointer-events: none;-webkit-animation: op 1s linear infinite;animation: op 1s linear infinite;
}
@-webkit-keyframes op {0%,100% {opacity: 0;}20%,80% {opacity: 1;}
}
@keyframes op {0%,100% {opacity: 0;}20%,80% {opacity: 1;}
}
span::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url(./1.jpg);background-size: cover;background-position: center;-webkit-animation: rota 1s linear infinite;animation: rota 1s linear infinite;
}
@-webkit-keyframes rota {0% {transform: translateX(0) rotate(0);}100% {transform: translateX(300px) rotate(360deg);}
}
@keyframes rota {0% {transform: translateX(0) rotate(0);}100% {transform: translateX(300px) rotate(360deg);}
}

html+js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css">
</head>
<body><script>let Obody= document.querySelector('body')Obody.addEventListener('mousemove',createEle)function createEle(e){//鼠标位置let X=e.offsetXlet Y=e.offsetYlet Ospan= document.createElement("span")//span 放到鼠标哪里Ospan.style.top=`${Y}px`Ospan.style.left=`${X}px`let wid=Math.random()*50+20//元素的随机大小Ospan.style.width=`${wid}px`Ospan.style.height=`${wid}px`//元素的随机方向let rotateVal=Math.random()*360Ospan.style.transform=`rotate(${rotateVal}deg)`Obody.appendChild(Ospan)//清除元素setTimeout(function(){Obody.removeChild(Ospan)},1000)}</script>
</body>
</html>

js 爱心随鼠标移动产生并消散 (源码)相关推荐

java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw
java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw java毕业生设计爱心公益网站设计与制作计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
vue canvas插件_基于vue.js 制作在线桌椅定制选择交互特效源码
码农那点事儿关注我们,一起学习进步基于vue.js写的在线桌子椅子垫子选择拼成的自己理想的书桌椅图像,这是一款交互式的课桌椅在线定制选择功能.非常不错,感兴趣的朋友前来下载使用. 下载源码(提取码 ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
Cesium 键盘鼠标控制相机漫游（源码+原理讲解）
Cesium 键盘鼠标控制相机漫游(源码+原理讲解) 在各大博客平台上,Cesium使用键盘控制相机漫游的源码已经有不少人贴出源码,本人在浏览这些源码的过程中发现大家采用的方式基本一致,大部分代码都是 ...
原生js实现经典扫雷游戏（含完整源码）
项目结构实现效果思路流程写出基本的布局利用js生成扫雷的table表格利用随机数来做地雷在表格中的索引初始化table表格根据地雷的坐标生成地雷周围的数字点击事件分成鼠标左键点击和右键 ...
js array 删除指定元素_Array 原型方法源码实现解密
作者:木易杨引言今天这篇文章主要看看 ECMA-262 规范中是如何定义这些方法的,并且在看完规范后我们用 JS 模拟实现下,透过源码探索一些底层的知识,希望本文对你有所帮助. Array.pro ...
Unity+SenseAR教程 | 用手势发射爱心2：加入发射方向【源码】
摘要:Unity+SenseAR2.3开发的AR应用,基于手势识别同时计算手势方向,发射你的爱心~ 洪流学堂,让你快人几步.你好,我是你的技术探路者郑洪智,你可以叫我大智. 这篇教程是为了填上一篇教程 ...
计算机毕业设计Node.js+uniapp安卓在线民宿预定app(源码+程序+lw+远程调试)
项目运行环境配置: Node.js最新版+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue. 项目技术: Express框架 + Node.js+ Vue 等 ...

js 爱心随鼠标移动产生并消散 (源码)

效果图

当鼠标移动就会产生爱心并且会在1s内相四周散开并消散

css

html+js

js 爱心随鼠标移动产生并消散 (源码)相关推荐

最新文章

热门文章

js 爱心随鼠标移动 产生 并 消散 (源码)

效果图

当鼠标移动 就会产生爱心 并且会在1s内 相四周散开 并消散

css

html+js

js 爱心随鼠标移动 产生 并 消散 (源码)相关推荐

最新文章

热门文章

js 爱心随鼠标移动产生并消散 (源码)

当鼠标移动就会产生爱心并且会在1s内相四周散开并消散

js 爱心随鼠标移动产生并消散 (源码)相关推荐