xdm社区活动开启了,快来我们的前端社区领奖品
Echarts开发者社区:https://bbs.csdn.net/forums/echarts
Element开发者社区:https://bbs.csdn.net/forums/element
一共52个奖品,不信还抽不中你?
小轮播图滑动滚播,好不好看你说了算。
视频演示:https://www.bilibili.com/video/BV1w341157rq/
<main> <div class="grid">
<div class="grid__item theme-1"> <button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Send</button> </div> <div class="grid__item theme-2">
<button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Upload</button>
</div> <div class="grid__item theme-3"> <button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind">
</use> </svg></button> <button class="particles-button">Delete</button> </div> <div class="grid__item theme-4"> <button class="action">
<svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Submit</button>
</div> <div class="grid__item theme-5"> <button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use>
</svg></button> <button class="particles-button">refresh</button> </div> <div class="grid__item theme-6"> <button class="action">
<svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Bookmark</button> </div> <div class="grid__item theme-7">
<button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Subscribe</button>
</div> <div class="grid__item theme-8"> <button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind">
</use> </svg></button> <button class="particles-button">Logout</button> </div> <div class="grid__item theme-9"> <button class="action">
<svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Add to cart</button>
</div> <div class="grid__item theme-10"> <button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg>
</button> <button class="particles-button">Pause</button> </div> <div class="grid__item theme-11"> <button class="action"><svg class="icon icon--rewind">
<use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Register</button> </div> <div class="grid__item theme-12">
<button class="action"><svg class="icon icon--rewind"> <use xlink:href="#icon-rewind"></use> </svg></button> <button class="particles-button">Export</button>
</div> </div> </main> <script src='js/anime.min.js'></script> <script src='js/particles.js'></script> <script src='js/demo.js'></script>
样式代码太长了,影响阅读,有需要源码可以关注公z号:前端老实人获取
关键代码,总共没几行,让它动起来,你们直接复制拿去用就行,不懂的话再私下问我吧。
/* eslint-disable */ (function(global, factory)
{ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('animejs')) :
typeof define === 'function' && define.amd ? define(['animejs'], factory) : (global.Particles = factory(global.anime)); }
(this, (function(anime) { 'use strict'; /* eslint-enable */ function Particles(element, options) { this.el = getElement(element);
this.options = extend({color: getCSSValue(this.el, 'background-color')}, this.defaults, options); this.init(); } Particles.prototype = {
defaults: { type: 'circle', style: 'fill', canvasPadding: 150, duration: 1000, easing: 'easeInOutCubic', direction: 'left', size: function() { return Math.floor((Math.random() * 3) + 1);
}, speed: function() { return rand(4); }, particlesAmountCoefficient: 3, oscillationCoefficient: 20 }, init: function () { this.particles = [];
this.frame = null; this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); this.canvas.className = 'particles-canvas';
this.canvas.style = 'display:none;'; this.wrapper = document.createElement('div'); this.wrapper.className = 'particles-wrapper'; this.el.parentNode.insertBefore(this.wrapper, this.el);
this.wrapper.appendChild(this.el); this.parentWrapper = document.createElement('div'); this.parentWrapper.className = 'particles'; this.wrapper.parentNode.insertBefore(this.parentWrapper, this.wrapper);
this.parentWrapper.appendChild(this.wrapper); this.parentWrapper.appendChild(this.canvas); }, loop: function () { this.updateParticles(); this.renderParticles();
if (this.isAnimating()) { this.frame = requestAnimationFrame(this.loop.bind(this)); } }, updateParticles: function ()
{ var p; for (var i = 0; i < this.particles.length; i++) { p = this.particles[i]; if (p.life > p.death) { this.particles.splice(i, 1); }
else { p.x += p.speed; p.y = this.o.oscillationCoefficient * Math.sin(p.counter * p.increase); p.life++; p.counter += this.disintegrating ? 1 : -1; } }
if (!this.particles.length) { this.pause(); this.canvas.style.display = 'none'; if (is.fnc(this.o.complete)) { this.o.complete(); } } }, renderParticles: function () {
this.ctx.clearRect(0, 0, this.width, this.height); var p; for (var i = 0; i < this.particles.length; i++) { p = this.particles[i]; if (p.life < p.death) {
this.ctx.translate(p.startX, p.startY); this.ctx.rotate(p.angle * Math.PI / 180);
this.ctx.globalAlpha = this.disintegrating ? 1 - p.life / p.death : p.life / p.death; this.ctx.fillStyle = this.ctx.strokeStyle = this.o.color; this.ctx.beginPath(); if ( this.o.type === 'circle' ) {
this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI); } else if ( this.o.type === 'triangle' ) { this.ctx.moveTo(p.x, p.y); this.ctx.lineTo(p.x+p.size, p.y+p.size); this.ctx.lineTo(p.x+p.size, p.y-p.size); }
else if ( this.o.type === 'rectangle' ){ this.ctx.rect(p.x, p.y, p.size, p.size); } if ( this.o.style === 'fill' ) { this.ctx.fill(); }
else if ( this.o.style === 'stroke' ) { this.ctx.closePath(); this.ctx.stroke();
} this.ctx.globalAlpha = 1; this.ctx.rotate(-p.angle * Math.PI / 180); this.ctx.translate(-p.startX, -p.startY); } } }, play: function () {
this.frame = requestAnimationFrame(this.loop.bind(this));
}, pause: function () { cancelAnimationFrame(this.frame); this.frame = null; }, addParticle: function (options) { var frames = this.o.duration * 60 / 1000;
var speed = is.fnc(this.o.speed) ? this.o.speed() : this.o.speed; this.particles.push({ startX: options.x, startY: options.y, x: this.disintegrating ? 0 : speed * -frames, y: 0, angle: rand(360), counter:
this.disintegrating ? 0 : frames, increase: Math.PI * 2 / 100, life: 0, death: this.disintegrating ? (frames - 20) + Math.random() * 40 :
frames, speed: speed, size: is.fnc(this.o.size) ? this.o.size() : this.o.size });
}, addParticles: function (rect, progress) { var progressDiff = this.disintegrating ? progress - this.lastProgress : this.lastProgress - progress;
this.lastProgress = progress; var x = this.options.canvasPadding;
var y = this.options.canvasPadding; var progressValue = (this.isHorizontal() ? rect.width : rect.height) * progress + progressDiff * (this.disintegrating ? 100 : 220);
if (this.isHorizontal()) { x += this.o.direction === 'left' ? progressValue : rect.width - progressValue; }
else { y += this.o.direction === 'top' ? progressValue : rect.height - progressValue; }
var i = Math.floor(this.o.particlesAmountCoefficient * (progressDiff * 100 + 1)); if (i > 0) {
while (i--) { this.addParticle({ x: x + (this.isHorizontal() ? 0 : rect.width * Math.random()), y: y + (this.isHorizontal() ? rect.height * Math.random() : 0) });
} } if (!this.isAnimating())
{ this.canvas.style.display = 'block'; this.play(); } }, addTransforms: function (value)
{ var translateProperty = this.isHorizontal() ? 'translateX' : 'translateY'; var translateValue = this.o.direction === 'left' || this.o.direction === 'top' ? value : -value;
this.wrapper.style[transformString] = translateProperty + '('+ translateValue +'%)';
this.el.style[transformString] = translateProperty + '('+ -translateValue +'%)'; }, disintegrate: function (options)
{ if (!this.isAnimating()) { this.disintegrating = true; this.lastProgress = 0; this.setup(options); var _ = this; this.animate(function(anim)
{ var value = anim.animatables[0].target.value; _.addTransforms(value);
if (_.o.duration) { _.addParticles(_.rect, value / 100, true); } }); } }, integrate: function (options) { if (!this.isAnimating())
{ this.disintegrating = false; this.lastProgress = 1; this.setup(options);
var _ = this; this.animate(function(anim) { var value = anim.animatables[0].target.value; setTimeout(function()
{ _.addTransforms(value); }, _.o.duration); if (_.o.duration) { _.addParticles(_.rect, value / 100, true); } }); } }, setup: function (options)
{ this.o = extend({}, this.options, options); this.wrapper.style.visibility = 'visible'; if (this.o.duration)
{ this.rect = this.el.getBoundingClientRect(); this.width = this.canvas.width = this.o.width || this.rect.width + this.o.canvasPadding * 2;
this.height = this.canvas.height = this.o.height || this.rect.height + this.o.canvasPadding * 2; }
}, animate: function (update) { var _ = this; anime({ targets: {value: _.disintegrating ? 0 : 100},
value: _.disintegrating ? 100 : 0, duration: _.o.duration, easing: _.o.easing, begin: _.o.begin, update: update, complete:
function() { if (_.disintegrating) { _.wrapper.style.visibility = 'hidden'; } } }); }, isAnimating: function () { return !!this.frame; }, isHorizontal: function ()
{ return this.o.direction === 'left' || this.o.direction === 'right'; } };
// Utils var is = { arr: function (a) { return Array.isArray(a); }, str: function (a) { return typeof a === 'string'; }, fnc: function (a) { return typeof a === 'function'; } };
function stringToHyphens(str) { return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); } function getCSSValue(el, prop) {
if (prop in el.style) { return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0'; } }
var t = 'transform'; var transformString = (getCSSValue(document.body, t) ? t : '-webkit-' + t);
function extendSingle(target, source) { for (var key in source) target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key]; return target; }
function extend(target) { if (!target) target = {}; for (var i = 1; i < arguments.length; i++) extendSingle(target, arguments[i]); return target; }
function rand(value) { return Math.random() * value - value / 2; } function getElement(element)
{ return is.str(element) ? document.querySelector(element) : element; } return Particles; })));
这里同学们重点学习下JavaScript编程思想。
1.1解决部署上线~> 部署上线工具(永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要源码或者部署神器可在公z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)