【每日一練】25—CSS實(shí)現(xiàn)按鈕懸停發(fā)光動(dòng)畫(huà)效果
按鈕，一直是網(wǎng)站開(kāi)發(fā)項(xiàng)目中不可或缺的內(nèi)容之一，很多時(shí)候，為了做一個(gè)好看有趣的動(dòng)畫(huà)效果，總是要花很多心思，我們?cè)谇懊嬉卜窒砹艘恍┌粹o的練習(xí)項(xiàng)目。
今天，我們?cè)賮?lái)練習(xí)一個(gè)新的關(guān)于按鈕的效果，下面，我們一起來(lái)看一下今天這個(gè)項(xiàng)目的最終效果：
<html><head><meta charset="utf-8"><title>【每日一練】25—CSS實(shí)現(xiàn)按鈕懸停發(fā)光動(dòng)畫(huà)效果</title></head><body><div class="container"><a href="http://www.aierweisi.com" target="_blank"><span>服務(wù)器主機(jī)站</span></a><a href="http://www.webqdkf.com" target="_blank"><span>web前端開(kāi)發(fā)網(wǎng)站</span></a><a href="http://www.aierweisi.com" target="_blank"><span>服務(wù)器主機(jī)站</span></a><a href="http://www.webqdkf.com" target="_blank"><span>web前端開(kāi)發(fā)網(wǎng)站</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;}
寫(xiě)在最后
希望今天的【每日一練】項(xiàng)目對(duì)你有用，有空的話(huà)，可以多試試，這個(gè)稍微修改一下CSS就會(huì)有新的效果出來(lái)，然后又是一個(gè)新項(xiàng)目，這個(gè)就是練習(xí)項(xiàng)目的好處，并且，我們平常的小練習(xí)，其實(shí)都可以作為我們以后開(kāi)發(fā)的一些素材與靈感來(lái)源。
我一直覺(jué)得，做開(kāi)發(fā)項(xiàng)目，就像玩搭積木游戲一樣，都是一塊一塊搭建起來(lái)，把每一塊搭建好了，然后整個(gè)項(xiàng)目就好了，從一個(gè)點(diǎn)到線(xiàn)到面的過(guò)程。
最后，感謝你的閱讀，如果你覺(jué)得有幫助的話(huà)，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開(kāi)發(fā)的朋友，也許能夠幫助到他。
我是楊小愛(ài)，我們明天見(jiàn)。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情