如何写一个花里胡哨的点击按钮（HTML+CSS+JS）

xdm社区活动开启了，快来我们的前端社区领奖品
Echarts开发者社区：https://bbs.csdn.net/forums/echarts
Element开发者社区：https://bbs.csdn.net/forums/element
一共52个奖品，不信还抽不中你？

雷迪森安的乡亲们，欢迎来到老实人的前端课堂，你是不是常常会因为自己写的代码朴实和无华而感到伤心难过呢，不要悲伤不要难过，这我们就来写点帅气逼人的代码。内容太干，建议收藏起来慢慢看，最后我还会教大家如何免费部署上线哦~

正片

小轮播图滑动滚播，好不好看你说了算。
视频演示：https://www.bilibili.com/video/BV1w341157rq/

结构就两行

<main><divclass="grid"><divclass="grid__item theme-1"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Send</button></div><divclass="grid__item theme-2"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Upload</button></div><divclass="grid__item theme-3"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Delete</button></div><divclass="grid__item theme-4"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Submit</button></div><divclass="grid__item theme-5"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">refresh</button></div><divclass="grid__item theme-6"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Bookmark</button></div><divclass="grid__item theme-7"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Subscribe</button></div><divclass="grid__item theme-8"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Logout</button></div><divclass="grid__item theme-9"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Add to cart</button></div><divclass="grid__item theme-10"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Pause</button></div><divclass="grid__item theme-11"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Register</button></div><divclass="grid__item theme-12"><buttonclass="action"><svgclass="icon icon--rewind"><usexlink:href="#icon-rewind"></use></svg></button><buttonclass="particles-button">Export</button></div></div></main><scriptsrc='js/anime.min.js'></script><scriptsrc='js/particles.js'></script><scriptsrc='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 */functionParticles(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(){returnrand(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);}elseif(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);}elseif(this.o.type ==='rectangle'){this.ctx.rect(p.x, p.y, p.size, p.size);}if(this.o.style ==='fill'){this.ctx.fill();}elseif(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(){returnthis.o.direction ==='left'||this.o.direction ==='right';}};// Utilsvar is ={
        arr:function(a){return Array.isArray(a);},
        str:function(a){returntypeof a ==='string';},
        fnc:function(a){returntypeof a ==='function';}};functionstringToHyphens(str){return str.replace(/([a-z])([A-Z])/g,'$1-$2').toLowerCase();}functiongetCSSValue(el, prop){if(prop in el.style){returngetComputedStyle(el).getPropertyValue(stringToHyphens(prop))||'0';}}var t ='transform';var transformString =(getCSSValue(document.body, t)? t :'-webkit-'+ t);functionextendSingle(target, source){for(var key in source)
            target[key]= is.arr(source[key])? source[key].slice(0): source[key];return target;}functionextend(target){if(!target) target ={};for(var i =1; i < arguments.length; i++)extendSingle(target, arguments[i]);return target;}functionrand(value){return Math.random()* value - value /2;}functiongetElement(element){return is.str(element)? document.querySelector(element): element;}return Particles;})));

这里同学们重点学习下JavaScript编程思想。

更多实用炫酷表白代码可以在搜索公z号：前端老实人获取~

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要源码或者部署神器可在公z号获取

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

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~