Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
jQ
css
* { margin: 0; padding: 0; border: 0; } html, body { height: 100%; } body { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-image: -webkit-linear-gradient(left, #ffc3a0 0%, #ffafbd 100%); background-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%); } canvas { height: 100%; width: 100%; } .copy { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; pointer-events: none; z-index: 100; } .copy h1 { margin: 0; color: #6f86d6; letter-spacing: 1px; font-size: 6em; font-weight: 700; font-family: 'Futura', 'Helvetica Neue', Helvetica; background: -webkit-linear-gradient(bottom, #48c6ef 0%, #6f86d6 100%); background: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); background: -moz-linear-gradient(transparent, transparent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
JavaScript
const el = document.getElementById('canvas'); const ctx = el.getContext('2d'); const dpr = window.devicePixelRatio || 1; const pi = Math.PI; const points = 12; const radius = 200 * dpr; const h = 600 * dpr; const w = 600 * dpr; const center = { x: w / 2 * dpr, y: h / 2 * dpr }; const circles = []; const rangeMin = 1; const rangeMax = 30; const showPoints = true; let mouseY = 0; let tick = 0; const gradient1 = ctx.createLinearGradient(0, 0, w, 0); gradient1.addColorStop(0, '#96fbc4'); gradient1.addColorStop(1, '#f9f586'); const gradient2 = ctx.createLinearGradient(0, 0, w, 0); gradient2.addColorStop(0, '#48c6ef'); gradient2.addColorStop(1, '#6f86d6'); const gradient3 = ctx.createLinearGradient(0, 0, w, 0); gradient3.addColorStop(0, '#9795f0'); gradient3.addColorStop(1, '#9be15d'); const gradient4 = ctx.createLinearGradient(0, 0, w, 0); gradient4.addColorStop(0, '#f6d365'); gradient4.addColorStop(1, '#fda085'); const gradients = [ gradient1, gradient2, gradient3, gradient4 ]; window.addEventListener('mousemove', handleMove, true); function handleMove(event) { mouseY = event.clientY; } ctx.scale(dpr, dpr); el.width = w * dpr; el.height = h * dpr; el.style.width = w + 'px'; el.style.height = h + 'px'; // Setup swing circle points for (var idx = 0; idx <= gradients.length - 1; idx++) { let swingpoints = []; let radian = 0; for (var i = 0; i < points; i++){ radian = pi * 2 / points * i; var ptX = center.x + radius * Math.cos(radian); var ptY = center.y + radius * Math.sin(radian); swingpoints.push({ x: ptX, y: ptY, radian: radian, range: random(rangeMin, rangeMax), phase: 0 }); } circles.push(swingpoints); } // --------------------------------------------------------------------------- // // swingCircle function swingCircle() { ctx.clearRect(0, 0, w * dpr, h * dpr); ctx.globalAlpha = 1; // ctx.globalCompositeOperation = 'source-over'; ctx.globalCompositeOperation = 'screen'; for (let k = 0; k < circles.length; k++) { let swingpoints = circles[k]; for (var i = 0; i < swingpoints.length; i++){ swingpoints[i].phase += random(1, 10) * -0.01; let phase = 4 * Math.sin(tick / 65); if (mouseY !== 0) { phase = mouseY / 200 + 1; } var r = radius + (swingpoints[i].range * phase * Math.sin(swingpoints[i].phase)) - rangeMax; swingpoints[i].radian += pi / 360; var ptX = center.x + r * Math.cos(swingpoints[i].radian); var ptY = center.y + r * Math.sin(swingpoints[i].radian); if (showPoints === true) { ctx.strokeStyle = '#96fbc4'; ctx.beginPath(); ctx.arc(ptX, ptY, 2 * dpr, 0, pi * 2, true); ctx.closePath(); ctx.stroke(); } swingpoints[i] = { x: ptX, y: ptY, radian: swingpoints[i].radian, range: swingpoints[i].range, phase: swingpoints[i].phase, }; } const fill = gradients[k]; drawCurve(swingpoints, fill); } tick++; requestAnimationFrame(swingCircle); } requestAnimationFrame(swingCircle); // --------------------------------------------------------------------------- // // drawCurve function drawCurve(pts, fillStyle) { ctx.fillStyle = fillStyle; ctx.beginPath(); ctx.moveTo( (pts[cycle( - 1, points)].x + pts[0].x) / 2, (pts[cycle( - 1, points)].y + pts[0].y) / 2); for (var i = 0; i < pts.length; i++){ ctx.quadraticCurveTo( pts[i].x, pts[i].y, (pts[i].x + pts[cycle(i + 1, points)].x) / 2, (pts[i].y + pts[cycle(i + 1, points)].y) / 2); } ctx.closePath(); ctx.fill(); } // --------------------------------------------------------------------------- // // cycle function cycle( num1, num2 ) { return ( num1 % num2 + num2 ) % num2; } // --------------------------------------------------------------------------- // // random function random (num1, num2) { var max = Math.max(num1, num2); var min = Math.min(num1, num2); return Math.floor(Math.random() * (max - min + 1)) + min; } // --------------------------------------------------------------------------- // // rotate // function rotate (x, y, angle) { // var radians = (pi / 180) * angle, // cos = Math.cos(radians), // sin = Math.sin(radians), // nx = (cos * (x - center.x)) + (sin * (y - center.y)) + center.x, // ny = (cos * (y - center.y)) - (sin * (x - center.x)) + center.y; // return { x: nx, y: ny }; // }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Css js背景动画-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号