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

网络 02-07 5222

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

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

正片

小轮播图滑动滚播，好不好看你说了算。视频演示：https://·/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编程思想。

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

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

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

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

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

最后

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

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

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

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