jquery+css实现黑洞粒子穿梭动画效果代码
代码语言:html
所属分类:粒子
代码描述:jquery+css实现黑洞粒子穿梭动画效果代码,点击左键试试效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> body, html { height: 100%; } body { height: 100%; background-color: #191919; } #blackhole { height: 100%; width: 100%; position: relative; display: flex; } .centerHover { width: 255px; height: 255px; background-color: transparent; border-radius: 50%; position: absolute; left: 50%; top: 50%; margin-top: -128px; margin-left: -128px; z-index: 2; cursor: pointer; line-height: 255px; text-align: center; transition: all 500ms; } .centerHover.open { opacity: 0; pointer-events: none; } .centerHover:hover span { color: #DDD; } .centerHover:hover span:before { background-color: #DDD; } .centerHover:hover span:after { background-color: #DDD; } .centerHover span { color: #666; font-family: serif; font-size: 18px; position: relative; transition: all 500ms; } .centerHover span:before { content: ""; display: inline-block; height: 1px; width: 16px; margin-right: 12px; margin-bottom: 4px; background-color: #666; transition: all 500ms; } .centerHover span:after { content: ""; display: inline-block; height: 1px; width: 16px; margin-left: 12px; margin-bottom: 4px; background-color: #666; transition: all 500ms; } canvas { position: relative; z-index: 1; width: 100%; height: 100%; margin: auto; } </style> </head> <body> <!-- partial:index.partial.html --> <div id="blackhole"> <div class="centerHover"><span>ENTER</span></div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> blackhole('#blackhole'); function blackhole(element) { var h = $(element).height(), w = $(element).width(), cw = w, ch = h, maxorbit = 255, // distance from center centery = ch/2, centerx = cw/2; var startTime = new Date().getTime(); var currentTime = 0; var stars = [], collapse = false, // if hovered expanse = false; // if clicked var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo(element), context = canvas.get(0).getContext("2d"); context.globalCompositeOperation = "multiply"; function setDPI(canvas, dpi) { // Set up CSS size if it's not set up already if (!canvas.get(0).style.width) canvas.get(0).style.width = canvas.get(0).width + 'px'; if (!canvas.get(0).style.height) canvas.get(0).style.height = canvas.get(0).height + 'px'; var scaleFactor = dpi / 96; canvas.get(0).width = Math.ceil(canvas.get(0).width * scaleFactor); canvas.get(0).height = Math.ceil(canvas.get(0).height * scaleFactor); var ctx = canvas.get(0).getContext('2d'); ctx.scale(scaleFactor, scaleFactor); } function rotate(cx, cy, x, y, angle) { var radians = angle, cos = Math.cos(radians), sin = Math.sin(radians), nx = (cos * (x - cx)) + (sin * (y - cy)) + cx, ny = (cos * (y - cy)) - (sin * (x - cx)) + cy; return [nx, ny]; } setDPI(canvas, 192); var star = function(){ // Get a weighted random number, so that the majority of stars will form in the center of the orbit var rands = []; rands.push(Math.random() * (maxorbit/2) + 1); rands.push(Math.random() * (maxorbit/2) + maxorbit); this.orbital = (rands.reduce(function(p, c) { return p + c; }, 0) / rands.length); // Done getting that random number, it's stored in this.orbital this.x = centerx; // All of these stars are at the center x position at all times this.y = centery + this.orbital; // Set Y position starting at the center y + the position in the orbit this.yOrigin = centery + this.orbital; // this is used to track the particles origin this.speed = (Math.floor(Math.random() * 2.5) + 1.5)*Math.PI/180; // The rate at which this star will orbit th.........完整代码请登录后点击上方下载按钮下载查看
网友评论0