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

转x33g5p2x  于2022-03-02 转载在 HTML5  
字(11.2k)|赞(0)|评价(0)|浏览(541)

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

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

正片

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

结构就两行

  1. <main>
  2. 		<div class="grid">
  3. 			<div class="grid__item theme-1">
  4. 				<button class="action"><svg class="icon icon--rewind">
  5. 						<use xlink:href="#icon-rewind"></use>
  6. 					</svg></button>
  7. 				<button class="particles-button">Send</button>
  8. 			</div>
  9. 			<div class="grid__item theme-2">
  10. 				<button class="action"><svg class="icon icon--rewind">
  11. 						<use xlink:href="#icon-rewind"></use>
  12. 					</svg></button>
  13. 				<button class="particles-button">Upload</button>
  14. 			</div>
  15. 			<div class="grid__item theme-3">
  16. 				<button class="action"><svg class="icon icon--rewind">
  17. 						<use xlink:href="#icon-rewind"></use>
  18. 					</svg></button>
  19. 				<button class="particles-button">Delete</button>
  20. 			</div>
  21. 			<div class="grid__item theme-4">
  22. 				<button class="action"><svg class="icon icon--rewind">
  23. 						<use xlink:href="#icon-rewind"></use>
  24. 					</svg></button>
  25. 				<button class="particles-button">Submit</button>
  26. 			</div>
  27. 			<div class="grid__item theme-5">
  28. 				<button class="action"><svg class="icon icon--rewind">
  29. 						<use xlink:href="#icon-rewind"></use>
  30. 					</svg></button>
  31. 				<button class="particles-button">refresh</button>
  32. 			</div>
  33. 			<div class="grid__item theme-6">
  34. 				<button class="action"><svg class="icon icon--rewind">
  35. 						<use xlink:href="#icon-rewind"></use>
  36. 					</svg></button>
  37. 				<button class="particles-button">Bookmark</button>
  38. 			</div>
  39. 			<div class="grid__item theme-7">
  40. 				<button class="action"><svg class="icon icon--rewind">
  41. 						<use xlink:href="#icon-rewind"></use>
  42. 					</svg></button>
  43. 				<button class="particles-button">Subscribe</button>
  44. 			</div>
  45. 			<div class="grid__item theme-8">
  46. 				<button class="action"><svg class="icon icon--rewind">
  47. 						<use xlink:href="#icon-rewind"></use>
  48. 					</svg></button>
  49. 				<button class="particles-button">Logout</button>
  50. 			</div>
  51. 			<div class="grid__item theme-9">
  52. 				<button class="action"><svg class="icon icon--rewind">
  53. 						<use xlink:href="#icon-rewind"></use>
  54. 					</svg></button>
  55. 				<button class="particles-button">Add to cart</button>
  56. 			</div>
  57. 			<div class="grid__item theme-10">
  58. 				<button class="action"><svg class="icon icon--rewind">
  59. 						<use xlink:href="#icon-rewind"></use>
  60. 					</svg></button>
  61. 				<button class="particles-button">Pause</button>
  62. 			</div>
  63. 			<div class="grid__item theme-11">
  64. 				<button class="action"><svg class="icon icon--rewind">
  65. 						<use xlink:href="#icon-rewind"></use>
  66. 					</svg></button>
  67. 				<button class="particles-button">Register</button>
  68. 			</div>
  69. 			<div class="grid__item theme-12">
  70. 				<button class="action"><svg class="icon icon--rewind">
  71. 						<use xlink:href="#icon-rewind"></use>
  72. 					</svg></button>
  73. 				<button class="particles-button">Export</button>
  74. 			</div>
  75. 		</div>
  76. 	</main>
  77. 	<script src='js/anime.min.js'></script>
  78. 	<script src='js/particles.js'></script>
  79. 	<script src='js/demo.js'></script>

样式

样式代码太长了，影响阅读，有需要源码可以关注公z号：前端老实人获取

表现

关键代码，总共没几行，让它动起来，你们直接复制拿去用就行，不懂的话再私下问我吧。

  1. /* eslint-disable */
  2. (function(global, factory) {
  3.     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('animejs')) :
  4.         typeof define === 'function' && define.amd ? define(['animejs'], factory) :
  5.             (global.Particles = factory(global.anime));
  6. }(this, (function(anime) {
  7.     'use strict';
  8.     /* eslint-enable */
  10.     function Particles(element, options) {
  11.         this.el = getElement(element);
  12.         this.options = extend({color: getCSSValue(this.el, 'background-color')}, this.defaults, options);
  13.         this.init();
  14.     }
  16.     Particles.prototype = {
  17.         defaults: {
  18.             type: 'circle',
  19.             style: 'fill',
  20.             canvasPadding: 150,
  21.             duration: 1000,
  22.             easing: 'easeInOutCubic',
  23.             direction: 'left',
  24.             size: function() { return Math.floor((Math.random() * 3) + 1); },
  25.             speed: function() { return rand(4); },
  26.             particlesAmountCoefficient: 3,
  27.             oscillationCoefficient: 20
  28.         },
  29.         init: function () {
  30.             this.particles = [];
  31.             this.frame = null;
  32.             this.canvas = document.createElement('canvas');
  33.             this.ctx = this.canvas.getContext('2d');
  34.             this.canvas.className = 'particles-canvas';
  35.             this.canvas.style = 'display:none;';
  36.             this.wrapper = document.createElement('div');
  37.             this.wrapper.className = 'particles-wrapper';
  38.             this.el.parentNode.insertBefore(this.wrapper, this.el);
  39.             this.wrapper.appendChild(this.el);
  40.             this.parentWrapper = document.createElement('div');
  41.             this.parentWrapper.className = 'particles';
  42.             this.wrapper.parentNode.insertBefore(this.parentWrapper, this.wrapper);
  43.             this.parentWrapper.appendChild(this.wrapper);
  44.             this.parentWrapper.appendChild(this.canvas);
  45.         },
  46.         loop: function () {
  47.             this.updateParticles();
  48.             this.renderParticles();
  49.             if (this.isAnimating()) {
  50.                 this.frame = requestAnimationFrame(this.loop.bind(this));
  51.             }
  52.         },
  53.         updateParticles: function () {
  54.             var p;
  55.             for (var i = 0; i < this.particles.length; i++) {
  56.                 p = this.particles[i];
  57.                 if (p.life > p.death) {
  58.                     this.particles.splice(i, 1);
  59.                 } else {
  60.                     p.x += p.speed;
  61.                     p.y = this.o.oscillationCoefficient * Math.sin(p.counter * p.increase);
  62.                     p.life++;
  63.                     p.counter += this.disintegrating ? 1 : -1;
  64.                 }
  65.             }
  66.             if (!this.particles.length) {
  67.                 this.pause();
  68.                 this.canvas.style.display = 'none';
  69.                 if (is.fnc(this.o.complete)) {
  70.                     this.o.complete();
  71.                 }
  72.             }
  73.         },
  74.         renderParticles: function () {
  75.             this.ctx.clearRect(0, 0, this.width, this.height);
  76.             var p;
  77.             for (var i = 0; i < this.particles.length; i++) {
  78.                 p = this.particles[i];
  79.                 if (p.life < p.death) {
  80.                     this.ctx.translate(p.startX, p.startY);
  81.                     this.ctx.rotate(p.angle * Math.PI / 180);
  82.                     this.ctx.globalAlpha = this.disintegrating ? 1 - p.life / p.death : p.life / p.death;
  83.                     this.ctx.fillStyle = this.ctx.strokeStyle = this.o.color;
  84.                     this.ctx.beginPath();
  85.                     
  86.                     if ( this.o.type === 'circle' ) {
  87.                         this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
  88.                     }
  89.                     else if ( this.o.type === 'triangle' ) {
  90.                         this.ctx.moveTo(p.x, p.y);
  91.                         this.ctx.lineTo(p.x+p.size, p.y+p.size);
  92.                         this.ctx.lineTo(p.x+p.size, p.y-p.size);
  93.                     }
  94.                     else if ( this.o.type === 'rectangle' ){
  95.                         this.ctx.rect(p.x, p.y, p.size, p.size);
  96.                     }
  97.                     
  98.                     if ( this.o.style === 'fill' ) {
  99.                         this.ctx.fill();
  100.                     }
  101.                     else if ( this.o.style === 'stroke' ) {
  102.                         this.ctx.closePath();
  103.                         this.ctx.stroke();
  104.                     }
  105.                     
  106.                     this.ctx.globalAlpha = 1;
  107.                     this.ctx.rotate(-p.angle * Math.PI / 180);
  108.                     this.ctx.translate(-p.startX, -p.startY);
  109.                 }
  110.             }
  111.         },
  112.         play: function () {
  113.             this.frame = requestAnimationFrame(this.loop.bind(this));
  114.         },
  115.         pause: function () {
  116.             cancelAnimationFrame(this.frame);
  117.             this.frame = null;
  118.         },
  119.         addParticle: function (options) {
  120.             var frames = this.o.duration * 60 / 1000;
  121.             var speed = is.fnc(this.o.speed) ? this.o.speed() : this.o.speed;
  122.             this.particles.push({
  123.                 startX: options.x,
  124.                 startY: options.y,
  125.                 x: this.disintegrating ? 0 : speed * -frames,
  126.                 y: 0,
  127.                 angle: rand(360),
  128.                 counter: this.disintegrating ? 0 : frames,
  129.                 increase: Math.PI * 2 / 100,
  130.                 life: 0,
  131.                 death: this.disintegrating ? (frames - 20) + Math.random() * 40 : frames,
  132.                 speed: speed,
  133.                 size: is.fnc(this.o.size) ? this.o.size() : this.o.size
  134.             });
  135.         },
  136.         addParticles: function (rect, progress) {
  137.             var progressDiff = this.disintegrating ? progress - this.lastProgress : this.lastProgress - progress;
  138.             this.lastProgress = progress;
  139.             var x = this.options.canvasPadding;
  140.             var y = this.options.canvasPadding;
  141.             var progressValue = (this.isHorizontal() ? rect.width : rect.height) * progress + progressDiff * (this.disintegrating ? 100 : 220);
  142.             if (this.isHorizontal()) {
  143.                 x += this.o.direction === 'left' ? progressValue : rect.width - progressValue;
  144.             } else {
  145.                 y += this.o.direction === 'top' ? progressValue : rect.height - progressValue;
  146.             }
  147.             var i = Math.floor(this.o.particlesAmountCoefficient * (progressDiff * 100 + 1));
  148.             if (i > 0) {
  149.                 while (i--) {
  150.                     this.addParticle({
  151.                         x: x + (this.isHorizontal() ? 0 : rect.width * Math.random()),
  152.                         y: y + (this.isHorizontal() ? rect.height * Math.random() : 0)
  153.                     });
  154.                 }
  155.             }
  156.             if (!this.isAnimating()) {
  157.                 this.canvas.style.display = 'block';
  158.                 this.play();
  159.             }
  160.         },
  161.         addTransforms: function (value) {
  162.             var translateProperty = this.isHorizontal() ? 'translateX' : 'translateY';
  163.             var translateValue = this.o.direction === 'left' || this.o.direction === 'top' ? value : -value;
  164.             this.wrapper.style[transformString] = translateProperty + '('+ translateValue +'%)';
  165.             this.el.style[transformString] = translateProperty + '('+ -translateValue +'%)';
  166.         },
  167.         disintegrate: function (options) {
  168.             if (!this.isAnimating()) {
  169.                 this.disintegrating = true;
  170.                 this.lastProgress = 0;
  171.                 this.setup(options);
  172.                 var _ = this;
  173.                 this.animate(function(anim) {
  174.                     var value = anim.animatables[0].target.value;
  175.                     _.addTransforms(value);
  176.                     if (_.o.duration) {
  177.                         _.addParticles(_.rect, value / 100, true);
  178.                     }
  179.                 });
  180.             }
  181.         },
  182.         integrate: function (options) {
  183.             if (!this.isAnimating()) {
  184.                 this.disintegrating = false;
  185.                 this.lastProgress = 1;
  186.                 this.setup(options);
  187.                 var _ = this;
  188.                 this.animate(function(anim) {
  189.                     var value = anim.animatables[0].target.value;
  190.                     setTimeout(function() {
  191.                         _.addTransforms(value);
  192.                     }, _.o.duration);
  193.                     if (_.o.duration) {
  194.                         _.addParticles(_.rect, value / 100, true);
  195.                     }
  196.                 });
  197.             }
  198.         },
  199.         setup: function (options) {
  200.             this.o = extend({}, this.options, options);
  201.             this.wrapper.style.visibility = 'visible';
  202.             if (this.o.duration) {
  203.                 this.rect = this.el.getBoundingClientRect();
  204.                 this.width = this.canvas.width = this.o.width || this.rect.width + this.o.canvasPadding * 2;
  205.                 this.height = this.canvas.height = this.o.height || this.rect.height + this.o.canvasPadding * 2;
  206.             }
  207.         },
  208.         animate: function (update) {
  209.             var _ = this;
  210.             anime({
  211.                 targets: {value: _.disintegrating ? 0 : 100},
  212.                 value: _.disintegrating ? 100 : 0,
  213.                 duration: _.o.duration,
  214.                 easing: _.o.easing,
  215.                 begin: _.o.begin,
  216.                 update: update,
  217.                 complete: function() {
  218.                     if (_.disintegrating) {
  219.                         _.wrapper.style.visibility = 'hidden';
  220.                     }
  221.                 }
  222.             });
  223.         },
  224.         isAnimating: function () {
  225.             return !!this.frame;
  226.         },
  227.         isHorizontal: function () {
  228.             return this.o.direction === 'left' || this.o.direction === 'right';
  229.         }
  230.     };
  232.     // Utils
  234.     var is = {
  235.         arr: function (a) { return Array.isArray(a); },
  236.         str: function (a) { return typeof a === 'string'; },
  237.         fnc: function (a) { return typeof a === 'function'; }
  238.     };
  240.     function stringToHyphens(str) {
  241.         return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  242.     }
  244.     function getCSSValue(el, prop) {
  245.         if (prop in el.style) {
  246.             return getComputedStyle(el).getPropertyValue(stringToHyphens(prop)) || '0';
  247.         }
  248.     }
  250.     var t = 'transform';
  251.     var transformString = (getCSSValue(document.body, t) ? t : '-webkit-' + t);
  253.     function extendSingle(target, source) {
  254.         for (var key in source)
  255.             target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key];
  256.         return target;
  257.     }
  259.     function extend(target) {
  260.         if (!target) target = {};
  261.         for (var i = 1; i < arguments.length; i++)
  262.             extendSingle(target, arguments[i]);
  263.         return target;
  264.     }
  266.     function rand(value) {
  267.         return Math.random() * value - value / 2;
  268.     }
  270.     function getElement(element) {
  271.         return is.str(element) ? document.querySelector(element) : element;
  272.     }
  274.     return Particles;
  276. })));

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

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

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

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

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

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

最后

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

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

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

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

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_52691965/article/details/123234923

内容来源于网络，如有侵权，请联系作者删除！

JavaScriptHtmlcssweb网页模板

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com