Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
你可以用鼠标控制风的方向
css
html, body, #drops { --mouse-position: 0rem; width: 100%; height: 100%; padding: 0; margin: 0; background: #090413; position: relative; overflow: hidden; } .controls { z-index: 2; color: white; position: absolute; top: 0; left: 0; font-family: "Courier New", Courier, monospace; margin: 1rem; font-size: 0.75rem; animation: fade 2s 4s forwards; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } .drop { width: 0.1rem; height: 2rem; left: var(--left); background: darkgray; opacity: var(--opacity); animation: drop linear var(--time) forwards; position: absolute; transform: rotate(var(--rotation)); } @keyframes drop { from { top: 0; left: var(--left); } to { top: 100%; left: calc(var(--left) - var(--mouse-position)); } } .splash { position: absolute; bottom: 0; } .splash:before { content: ""; position: absolute; left: var(--left); width: 0.25rem; height: 0.25rem; border-radius: 50%; background: white; bottom: 0; opacity: var(--opacity); animation: splash var(--drop-time) cubic-bezier(0.33, 1, 0.68, 1); } @keyframes splash { 0% { bottom: 0; left: var(--left); } 100% { bottom: var(--drop-height); left: calc(var(--left) - calc(var(--mouse-position) / 4)); opacity: 0; } }
JavaScript
console.clear(); const drops = 25; const dropsContainer = document.querySelector("#drops"); dropsContainer.onmousemove = (e) => { mousePositionX = Math.floor( map(e.clientX, 0, dropsContainer.offsetWidth, 10, -10) ); if ( dropsContainer.style.getPropertyValue("--mouse-value") !== mousePositionX ) { dropsContainer.style.setProperty("--mouse-value", mousePositionX); dropsContainer.style.setProperty( "--mouse-position", `${mousePositionX}rem` ); dropsContainer.style.setProperty("--rotation", `${mousePositionX}deg`); } }; const createDrop = () => { const drop = document.createElement("div"); drop.classList.add("drop"); const rand = getRandomInt(3, 5); const randPosition = getRandomInt(-150, dropsContainer.offsetWidth + 150); const dropTime = getRandomInt(2, 4); const dropHeight = getRandomInt(3, 7); drop.style.setProperty("--left", `${randPosition}px`); drop.style.setProperty("--time", `.${rand}s`); drop.style.setProperty("--opacity", `.${rand}`); drop.style.setProperty("--drop-time", `.${dropTime}s`); drop.style.setProperty("--drop-height", `${dropHeight}rem`); drop.onanimationend = (animation) => { if (animation.animationName === "drop") { drop.classList.add("splash"); drop.classList.remove("drop"); createDrop(); } else { drop.remove(); } }; dropsContainer.append(drop); }; Array(drops) .fill(1) .forEach(() => { createDrop(); }); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function map(value, istart, istop, ostart, ostop) { return ostart + (ostop - ostart) * ((value - istart) / (istop - istart)); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>粒子雨-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号