【每日一練】05—CSS 實(shí)現(xiàn)創(chuàng)意按鈕動(dòng)畫效果
作者 | 楊小愛
寫在前面
今天是【每日一練】項(xiàng)目練習(xí)的第5天，如果你前面已經(jīng)堅(jiān)持練習(xí)了4天，那么，恭喜你，你還沒有放棄！
今天我們練習(xí)的小項(xiàng)目是一個(gè)按鈕的效果，這個(gè)按鈕功能，我們?cè)谌魏我粋€(gè)開發(fā)項(xiàng)目中，都會(huì)用到它，而很多時(shí)候，我們?yōu)榱宋脩?，我們的設(shè)計(jì)一定要出彩，畢竟現(xiàn)在網(wǎng)絡(luò)上的網(wǎng)站不計(jì)其數(shù)，如果我們?cè)谝曈X能夠吸引到用戶的話，用戶可能會(huì)考慮繼續(xù)瀏覽，不然就直接退出離開了。
因此，我們今天練習(xí)的案例是一個(gè)比較有創(chuàng)意的按鈕效果，希望對(duì)你的開發(fā)項(xiàng)目也有用。
以下是今天小練習(xí)的最終效果：
<html><head><title>【每日一練】05—CSS 實(shí)現(xiàn)創(chuàng)意按鈕動(dòng)畫效果</title></head><body><a href="https://www.webqdkf.com/" style="--clr:#12a0e7;--i:0;" targer="_blank"><span>首頁</span></a><a href="https://www.webqdkf.com/HTML/" style="--clr:#f39c10;--i:1;" targer="_blank"><span>HTML/CSS</span></a><a href="https://www.webqdkf.com/JS/" style="--clr:#23800a;--i:2;" targer="_blank"><span>JavaScript</span></a><a href="https://www.webqdkf.com/tx/" style="--clr:#7c0d5a;--i:1;" targer="_blank"><span>源碼</span></a><a href="http://www.webqdkf.com/gksj.html" style="--clr:#0d33ae;--i:2;" targer="_blank"><span>好課</span></a><a href="http://www.aierweisi.com" style="--clr:#ff22bb;--i:0;" targer="_blank"><span>主機(jī)</span></a></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: #0e1538;overflow: hidden;}a{position: relative;padding: 20px 60px;display: flex;justify-content: center;align-items: center;background: rgba(0,0,0,0.5);overflow: hidden;text-decoration: none;margin: 80px 40px;transition: 1s;-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);}a:hover{background: var(--clr);box-shadow: 0 0 10px var(--clr),0 0 30px var(--clr),0 0 60px var(--clr),0 0 100px var(--clr);}a::before{content: '';position: absolute;width: 40px;height: 400%;background: var(--clr);transition: 1s;animation: animate 2s linear infinite;animation-delay: calc(-0.33s * var(--i));}a:hover::before{width: 120%;}a::after{content: '';position: absolute;inset: 4px;background: #0e1538;transition: 0.5s;}a:hover::after{background: var(--clr);}@keyframes animate{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}span{position: relative;z-index: 1;font-size: 2em;color: #fff;opacity: 0.5;text-transform: uppercase;letter-spacing: 4px;}a:hover span{opacity: 1;}
寫在最后
以上就是每日一練的全部?jī)?nèi)容，希望今天的小練習(xí)對(duì)你有用，如果你覺得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
評(píng)論
圖片
表情