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.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)