backgroundimage用法（网页制作教程）

前言继续前几天的文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗?》，添加按钮、背景粒子动画效果。其实在码代码的时候会发现，很多东西都是殊途同归的，方法千千万，能解决问题的都是好办法，不一定非要把代码写的特别高深，这样反而后来的人看不懂，维护根据头疼。所以用最简单通俗的代码，更能利于后期的维护开发。ok!先来看看背景粒子动画效果预览图：以下代码都是基于前一篇文章《王者荣耀匹配人员加载页面动画用纯CSS撸出来，你信吗?》的，所以没有了解的可以先去看看这篇文章。按钮点击粒子动画  确认  由于按钮是梯形的，之前代码在button选择器上面已经加了伪类来实现梯形了，所以我们只能再套一层元素(button-text)来实现粒子。.button-text {position: relative;width: 100%;border-radius: 4px;border: none;cursor: pointer;}.button-text:before,.button-text:after {position: absolute;content: '';display: block;width: 140%;height: 100%;left: -20%;z-index: -1000;background-repeat: no-repeat;}.button-text:before {display: none;top: -75%;background-image:radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%);background-size:10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%;}.button-text:after {display: none;bottom: -75%;background-image:radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%);background-size:15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%;}.button-text:active {transform: scale(0.9);}在button-text的伪类元素上面，添加background-image,并用径向渐变radial-gradient画出多个圆作为粒子。transform: scale(0.9)，是鼠标点击时，缩放button-text元素。大家应该都看到默认伪类元素是display: none;隐藏的。所有当我们点击时，需要添加一个选择器，让其显示出来，并执行动画。js来监听点击事件，点击后添加animate选择器。var animateButton = function(e) {e.preventDefault;e.target.classList.remove('animate');e.target.classList.add('animate');setTimeout(function(){e.target.classList.remove('animate');},700);};var classname = document.getElementsByClassName("button-text");for (var i = 0; i < classname.length; i++) {classname[i].addEventListener('click', animateButton, false);}然后我们添加CSS，开始动画.button-text.animate:before {display: block;animation: topBubbles ease-in-out 0.75s forwards;}.button-text.animate:after {display: block;animation: bottomBubbles ease-in-out 0.75s forwards;}@keyframes topBubbles {0% {background-position:5% 90%,10% 90%,10% 90%,15% 90%,25% 90%,25% 90%,40% 90%,55% 90%,70% 90%;}50% {background-position:0% 80%,0% 20%,10% 40%,20% 0%,30% 30%,22% 50%,50% 50%,65% 20%,90% 30%;}100% {background-position:0% 70%,0% 10%,10% 30%,20% -10%,30% 20%,22% 40%,50% 40%,65% 10%,90% 20%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;}}@keyframes bottomBubbles {0% {background-position:10% -10%,30% 10%,55% -10%,70% -10%,85% -10%,70% -10%,70% 0%;}50% {background-position:0% 80%,20% 80%,45% 60%,60% 100%,75% 70%,95% 60%,105% 0%;}100% {background-position:0% 90%,20% 90%,45% 70%,60% 110%,75% 80%,95% 70%,110% 10%;background-size:0% 0%,0% 0%,0% 0%,0% 0%,0% 0%,0% 0%;}}我们通过background-position改变背景的位置，用background-size改变大小，来形成动画效果。这样就形成按钮点击粒子动画效果了。同理，我们可以在背景上面添加同样的粒子效果。代码基本可以copy。背景粒子效果.king:before {position: absolute;content: '';display: block;width: 100%;height: 100%;top: 0;z-index: 1;background-repeat: no-repeat;opacity: 0.4;}.king:before {background-image:radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%),radial-gradient(circle, #fff 20%, transparent 20%);background-size:10% 10%,12% 12%,5% 5%,12% 12%,5% 5%,10% 10%,5% 5%,10% 10%,5% 5%;display: block;animation: topBubbles ease-in-out 3s forwards infinite;}这里我们改变一下粒子的大小，和透明度，以及层次(z-index)。让其一开始就执行动画，并且循环执行(infinite)。动画执行效果，我们直接用上面按钮的效果(topBubbles)即可。