一. 效果图

二. 实现代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标移动出现泡泡拖尾</title><style>* {margin: 0;padding: 0;}html {background-color: #c3ecff;}</style>
</head><body><script>(function bubblesCursor() {var width = window.innerWidth;var height = window.innerHeight;var cursor = { x: width / 2, y: width / 2 };var particles = [];function init() {bindEvents();loop();}// Bind events that are neededfunction bindEvents() {document.addEventListener('mousemove', onMouseMove);window.addEventListener('resize', onWindowResize);}function onWindowResize(e) {width = window.innerWidth;height = window.innerHeight;}function onTouchMove(e) {if (e.touches.length > 0) {for (var i = 0; i < e.touches.length; i++) {addParticle(e.touches[i].clientX, e.touches[i].clientY);}}}function onMouseMove(e) {cursor.x = e.clientX;cursor.y = e.clientY;addParticle(cursor.x, cursor.y);}function addParticle(x, y) {var particle = new Particle();particle.init(x, y);particles.push(particle);}function updateParticles() {// Updatefor (var i = 0; i < particles.length; i++) {particles[i].update();}// Remove dead particlesfor (var i = particles.length - 1; i >= 0; i--) {if (particles[i].lifeSpan < 0) {particles[i].die();particles.splice(i, 1);}}}function loop() {requestAnimationFrame(loop);updateParticles();}/*** Particles*/function Particle() {this.lifeSpan = 250; //msthis.initialStyles = {"position": "absolute","display": "block","pointerEvents": "none","z-index": "10000000","width": "5px","height": "5px","background": "#e6f1f7","box-shadow": "-1px 0px #6badd3, 0px -1px #6badd3, 1px 0px #3a92c5, 0px 1px #3a92c5","border-radius": "1px","will-change": "transform"};// Init, and set propertiesthis.init = function (x, y) {this.velocity = {x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 10),y: (-.4 + (Math.random() * -1))};this.position = { x: x - 10, y: y - 10 };this.element = document.createElement('span');applyProperties(this.element, this.initialStyles);this.update();document.body.appendChild(this.element);};this.update = function () {this.position.x += this.velocity.x;this.position.y += this.velocity.y;// Update velocitiesthis.velocity.x += (Math.random() < 0.5 ? -1 : 1) * 2 / 75;this.velocity.y -= Math.random() / 600;this.lifeSpan--;this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (0.2 + (250 - this.lifeSpan) / 250) + ")";}this.die = function () {this.element.parentNode.removeChild(this.element);}}/*** Utils*/// Applies css `properties` to an element.function applyProperties(target, properties) {for (var key in properties) {target.style[key] = properties[key];}}init();})(); </script>
</body></html>

special effects - 鼠标移动，出现泡泡拖尾相关推荐

special effects - 鼠标移动，出现星星拖尾
鼠标移动,出现星星拖尾一. 效果图二. 实现代码一. 效果图二. 实现代码 <!DOCTYPE html> <html lang="en">< ...
special effects - 鼠标移动，出现自定义的表情拖尾
鼠标移动,出现自定义的表情拖尾一. 效果图二. 实现代码一. 效果图二. 实现代码 <!DOCTYPE html> <html lang="en"> ...
html鼠标拖尾效果,JavaScript鼠标划过背景拖尾效果
JavaScript鼠标划过残影效果 body{ margin:0px; padding:0px; background-color:#000; } .container a{ display:inl ...
shader拖尾_Unity LineRenderer 之鼠标轨迹记录和拖尾实现
"MouseTrack"脚本的具体内容如下; using UnityEngine; public class MouseTrack : MonoBehaviour { /// // ...
Unity 制作鼠标光标拖尾
首先创建个Empty起名Mouse 然后给Empty添加 Trail Renderer (设置好粗细,颜色,时间等设置) 创建脚本挂载到Mouse上拖尾组件以及脚本 using UnityEngin ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
processing制作熊猫头像跟随鼠标拖尾
先上效果图: 我演示时电脑有点卡所以看着有些顺畅,你的电脑应该是没有问题的. processing实现跟随鼠标拖尾其实不难,在这篇文章中我将介绍图案封装.封装图案整体缩放.数组的创建方法以及一些逻辑处 ...
使用css和js实现鼠标拖尾特效
一实现步骤解析: 1.这原本是一个鼠标后面跟随一串英文字母的效果, 2.后来我就想,运用随机数字母的颜色做成彩色的, 3.并且每一个字母的色彩是随机分配而不是我自己手动填写的. 二 css: 1.为 ...
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效
Android Studio Canvas 实现鼠标贝塞尔曲线拖尾特效特效预览图什么是贝塞尔曲线? 百度百科: 贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图 ...

special effects - 鼠标移动，出现泡泡拖尾

鼠标移动，出现泡泡拖尾

一. 效果图

二. 实现代码

special effects - 鼠标移动，出现泡泡拖尾相关推荐

最新文章

热门文章