jquery实现不同形状色彩的粒子上升动画背景效果代码
代码语言:html
所属分类:粒子
代码描述:jquery实现不同形状色彩的粒子上升动画背景效果代码
代码标签: jquery 不同 形状 色彩 粒子 上升 动画 背景
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> .more-pens { position: fixed; left: 20px; bottom: 20px; z-index: 10; font-family: "Montserrat"; font-size: 12px; } a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active { font-family: "Montserrat"; font-size: 12px; text-decoration: none; background: #212121; padding: 4px 8px; color: #f7f7f7; } a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover { background: #edf3f8; color: #212121; } body { margin: 0; padding: 0; overflow: hidden; } .background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #edf3f8; background: -moz-radial-gradient(center, ellipse cover, #edf3f8 1%, #dee3e8 100%); background: -webkit-radial-gradient(center, ellipse cover, #edf3f8 1%, #dee3e8 100%); background: radial-gradient(ellipse at center, #edf3f8 1%, #dee3e8 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#edf3f8", endColorstr="#dee3e8",GradientType=1 ); } .title { z-index: 10; position: absolute; left: 50%; top: 40%; transform: translateX(-50%) translateY(-50%); font-family: "Montserrat"; text-align: center; width: 60%; } .title h1 { position: relative; color: #000000; font-weight: 300; font-size: 46px; padding: 0; margin: 0; line-height: 1; } .title h2 { font-weight: 600; font-size: 60px; padding: 0; margin: 0; line-height: 1; } .title h3 { font-weight: 200; font-size: 20px; padding: 0; margin: 0; line-height: 2; color: #5e7283; letter-spacing: 2px; } .title p { font-weight: 200; font-size: 16px; color: #5e7283; } .pentahedron { position: absolute; width: 100%; height: 100%; fill: #3E82F7; } .point { fill: #8491A3; } .rhombus { fill: #2DA94F; stroke: #2DA94F; } .x { fill: #FDBD00; } .circle { fill: #ED412D; } svg { display: block; width: 30px; height: 30px; position: absolute; transform: translateZ(0px); }</style> </head> <body> <div class="background"></div> <div class="title"> <h3>PLASM.it - 2022</h3> <h1>Antigravity</h1> <h2>FLOW</h2> </div> <script> class Particle { constructor(svg, coordinates, friction) { this.svg = svg; this.steps = $(window).height() / 2; this.item = null; this.friction = friction; this.coordinates = coordinates; this.position = this.coordinates.y; this.dimensions = this.render(); this.rotation = Math.random() > 0.5 ? "-" : "+"; this.scale = 0.5 + Math.random(); this.siner = 200 * Math.random(); } destroy() { this.item.remove(); } move() { this.position = this.position - this.friction; let top = this.position; let left = this.coordinates.x + Math.sin(this.position * Math.PI / this.steps) * this.siner; this.item.css({ transform: "translateX(" + left + "px) translate.........完整代码请登录后点击上方下载按钮下载查看
网友评论0