其他
【每日一练】25—CSS实现按钮悬停发光动画效果
按钮，一直是网站开发项目中不可或缺的内容之一，很多时候，为了做一个好看有趣的动画效果，总是要花很多心思，我们在前面也分享了一些按钮的练习项目。
今天，我们再来练习一个新的关于按钮的效果，下面，我们一起来看一下今天这个项目的最终效果：
<!doctype html><html> <head> <meta charset="utf-8"> <title>【每日一练】25—CSS实现按钮悬停发光动画效果</title> </head> <body> <div class="container"> <a href="http://www.aierweisi.com" target="_blank"><span>服务器主机站</span></a> <a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站</span></a> <a href="http://www.aierweisi.com" target="_blank"><span>服务器主机站</span></a> <a href="http://www.webqdkf.com" target="_blank"><span>web前端开发网站</span></a> </div> </body></html>
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #000;}.container{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}a{ position: relative; display: inline-block; padding: 15px 30px; color: #fff; background: transparent; border: 2px solid #42db14; text-transform: uppercase; font-weight: 600; margin: 40px; letter-spacing: 2px; text-decoration: none; transition: 0.5s; transition-delay: 0s; -webkit-box-reflect: below 0px linear-gradient(transparent,#0002);}a:hover{ transition-delay: 1.5s; color: #fff; box-shadow: 0 0 10px #42db14, 0 0 20px #42db14, 0 0 40px #42db14, 0 0 80px #42db14, 0 0 160px #42db14;}a:nth-child(2){ filter: hue-rotate(40deg);}a:nth-child(3){ filter: hue-rotate(70deg);}a:nth-child(4){ filter: hue-rotate(90deg);}a span{ position: relative; z-index: 10;}a:before{ content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #42db14; transition: width 0.5s,left 0.5s, height 0.5s,box-shadow 0.5s; transition-delay: 1s,0.5s,0s,0s; box-shadow: 5px -8px 0 #42db14, 5px 8px 0 #42db14;}a:hover:before{ width: 60%; height: 100%; left: -2px; transition-delay: 0s,0.5s,1s,1s; box-shadow: 0px 0 0 #42db14, 0px 0 0 #42db14;}a:after{ content: ''; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); width: 20px; height: 2px; background: #42db14; transition: width 0.5s,right 0.5s, height 0.5s,box-shadow 0.5s; transition-delay: 1s,0.5s,0s,0s; box-shadow: -5px -8px 0 #42db14, -5px 8px 0 #42db14;}a:hover:after{ width: 60%; height: 100%; right: -2px; transition-delay: 0s,0.5s,1s,1s; box-shadow: 0px 0 0 #42db14, 0px 0 0 #42db14;}写在最后
希望今天的【每日一练】项目对你有用，有空的话，可以多试试，这个稍微修改一下CSS就会有新的效果出来，然后又是一个新项目，这个就是练习项目的好处，并且，我们平常的小练习，其实都可以作为我们以后开发的一些素材与灵感来源。
我一直觉得，做开发项目，就像玩搭积木游戏一样，都是一块一块搭建起来，把每一块搭建好了，然后整个项目就好了，从一个点到线到面的过程。
最后，感谢你的阅读，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号