Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Hover Me
css
html, body { height: 100%; overflow: hidden; background: #f2f2f2; margin: 0; } button { font-family: 'Hind Guntur', sans-serif; font-size: 15px; line-height: 1; color: #fff; letter-spacing: 0.025em; background: #379aff; padding: 18px 0 11px; cursor: pointer; border: 0; border-radius: 2px; min-width: 120px; overflow: hidden; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } button span { display: block; position: relative; z-index: 10; } button:after, button:before { padding: 18px 0 11px; content: ''; position: absolute; top: 0; left: calc(-100% - 30px); height: calc(100% - 29px); width: calc(100% + 20px); color: #fff; border-radius: 2px; -webkit-transform: skew(-25deg); transform: skew(-25deg); } button:after { background: #fff; -webkit-transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0.2s; transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0.2s; z-index: 0; opacity: 0.8; } button:before { background: #13c276; z-index: 5; -webkit-transition: left 1s cubic-bezier(0.86, 0, 0.07, 1); transition: left 1s cubic-bezier(0.86, 0, 0.07, 1); } button:hover:after { left: calc(0% - 10px); -webkit-transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1); transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1); } button:hover:before { left: calc(0% - 10px); -webkit-transition: left 1s cubic-bezier(0.86, 0, 0.07, 1); transition: left 1s cubic-bezier(0.86, 0, 0.07, 1); } canvas { width: 420px; height: 420px; background: transparent; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: none; }
JavaScript
// ----------- // Definitions // ----------- var canvas = document.querySelector('canvas'); canvas.width = 840; canvas.height = 840; var context = canvas.getContext('2d'); var currentFrame = 0; var circles = []; var circleCount = 10; // --------- // LIFECYCLE // --------- function update() { // ------------ // Update state // ------------ currentFrame++; _projection.refZ = 400; _projection.fLength = 102; for(var i = 0; i < circles.length; i++) { _projection.doProjection(circles[i].shape); _projection.rotateY(circles[i].shape, circles[i].rotationX); _projection.rotateX(circles[i].shape, circles[i].rotationY); } // ------ // Render // ------ render(); } // ------ // Render // ------ function render() { // ----- // Clear // ----- context.clearRect(0, 0, canvas.width, canvas.height); // ----------------- // Background circle // ----------------- context.beginPath(); context.fillStyle = 'rgba(255,255,255, 1)'; context.lineWidth = 5; context.arc( canvas.width/2, canvas.height/2, 260, 0, Math.PI * 2, false ); context.fill(); // ---------------- // Particle circles // ---------------- for(var i = 0; i < circles.length; i++) { circles[i].render(); } // ---- // Loop // ---- requestAnimationFrame(update); } // --------------- // Start Animation // --------------- requestAnimationFrame(update); // ------------- // 3D Projection // ------------- var Basic3DProjection = function() { this.projCenterX = 0; this.projCenterY = 0; this.fLength = 400; this.refZ = 400; this.getScaleFromZ = function(z) { if (this.fLength +z == 0) { return 0.001; } else { return this.refZ/(this.fLength+z); } } this.doProjection = function(_object) { var x = _object.posX*this.getScaleFromZ(_object.posZ)+this.projCenterX; var y = _object.posY*this.getScaleFromZ(_object.posZ)+this.projCenterY; var y0z0 = this.getScaleFromZ(0); _object.screenX = x; _object.screenY = y-y0z0; _object.scale = this.getScaleFromZ(_object.posZ); _object.pastViewPoint = _object.posZ > this.refZ; } this.rotateY = function(object, ang) { var _cos = Math.cos(ang); var _sin = Math.sin(ang); var tz = object.posZ * _cos - object.posX * _sin; var tx = object.posZ * _sin + object.posX * _cos; object.posX = tx; object.posZ = tz; this.doProjection(object); } this.rotateX = function(object, ang) { var _cos = Math.cos(ang); var _sin = Math.sin(ang); var ty = object.posY * _cos - object.posZ * _sin; var tz = object.posY * _sin + object.posZ * _cos; object.posY = ty; object.posZ = tz; this.doProjection(object); } this.rotateZ = function(object, ang) { var _cos = Math.cos(ang); var _sin = Math.sin(ang); var object = objects[i]; var tx = object.posX * _cos - object.posY * _sin; var ty = object.posX * _sin + object.posY * _cos; object.posX = tx; object.posY = ty; this.doProjection(object); } } var _projection = new Basic3DProjection(); _projection.projCenterX = canvas.width/2; _projection.projCenterY = canvas.height/2; // -------- // 3D Shape // -------- var Basic3DObject = function (x, y, z, size) { this.posX = x; this.posY = y; this.posZ = z; this.dispSize = size; this.screenX = 0; this.screenY = 0; this.scale = 1; this.pastViewPoint = false; } function createCircle() { this.shape = new Basic3DObject(0, 0, 68, 0); this.rotationX; this.rotationY; this.size; this.render = function() { context.beginPath(); context.strokeStyle = 'rgba(182,182,182, ' + (this.shape.posZ * -1) / 60 + ')'; context.fillStyle = 'rgba(182,182,182, ' + (this.shape.posZ * -1) / 60 + ')'; context.lineWidth = 2 * this.size; context.arc( this.shape.screenX, this.shape.screenY, this.size * this.shape.scale, 0, Math.PI * 2, false ); if(this.fillOrStroke === 'fill') { context.fill(); } else { context.stroke(); } } } for(var i = 0; i < circleCount; i++) { var tempCircle = new createCircle(); if(Math.random() < 0.5) { tempCircle.rotationX = Math.random() / 100; } else { tempCircle.rotationX = (Math.random() / 100) * -1; } if(Math.random() < 0.5) { tempCircle.fillOrStroke = 'fill'; } else { tempCircle.fillOrStroke = 'stroke'; } if(Math.random() < 0.5) { tempCircle.rotationY = Math.random() / 100; } else { tempCircle.rotationY = Math.random() / 100 * -1; } tempCircle.size = Math.random() * 2; circles.push(tempCircle); }
粒子
时间
文字
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号