【每日一練】02—CSS實現(xiàn)發(fā)光按鈕Hover ?效果
寫在前面
昨天，我們開啟了【每日一練】的第一天練習(xí)，今天我們開始第二天的練習(xí)，希望你能堅持學(xué)習(xí)，不管學(xué)什么做什么，堅持還是比較重要的，但是方向也要對，這樣，我們到達(dá)目的地才只是時間的問題。
對于【每日一練】，我們先給自己定一個目標(biāo)，我們先堅持練習(xí)寫滿100個小案例，希望你也行動起來。
現(xiàn)在，我們就進(jìn)入第二天的練習(xí)，以下是今天練習(xí)的最終效果圖：
<html><head><title>【每日一練】02-CSS實現(xiàn)發(fā)光按鈕Hover效果</title></head><body><a href="https://www.webqdkf.com/" style="--clr:#00a6bc"><span>網(wǎng)站首頁</span><i></i></a><a href="https://www.webqdkf.com/HTML/" style="--clr:#fff"><span>HTML/CSS </span><i></i></a><a href="https://www.webqdkf.com/JS/" style="--clr:#6eff3e"><span>JavaScript</span><i></i></a><a href="https://www.webqdkf.com/tx/" style="--clr:#1e9bff"><span>源碼案例</span><i></i></a><a href="https://www.webqdkf.com/zyk/books/" style="--clr:#ff1867"><span>電子書</span><i></i></a><a href="http://www.webqdkf.com/gksj.html" style="--clr:#00a6bc"><span>在線課程</span><i></i></a><a href="http://www.aierweisi.com" style="--clr:#fff"><span>建站主機</span><i></i></a><a href="http://www.webqdkf.com/zyk/gjx/" style="--clr:#6eff3e"><span>開發(fā)工具</span><i></i></a></body></html>
CSS完整代碼：
*{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: #27282c;flex-direction: column;gap: 40px}a{position: relative;background: #444;color: #fff;text-decoration: none;text-transform: uppercase;font-size: 1.5em;letter-spacing: 0.1em;font-weight: 400;padding: 10px 30px;transition: 0.5s;}a:hover{background: var(--clr);color: var(--clr);letter-spacing: 0.25em;box-shadow: 0 0 35px var(--clr);}a:before{content: '';position: absolute;inset: 2px;background: #27282c;}span{position: relative;z-index: 1;}i{position: absolute;inset: 0;display: block;}i::before{content: '';position: absolute;top: -3.5px;left: 80%;width: 10px;height: 5px;background: #27282c;transform: translateX(-50%);border: 2px solid var(--clr);transition: 0.5s;}a:hover i::before{width: 20px;left: 20%;}i::after{content: '';position: absolute;bottom: -3.5px;left: 20%;width: 10px;height: 5px;background: #27282c;transform: translateX(-50%);border: 2px solid var(--clr);transition: 0.5s;}a:hover i::after{width: 20px;left: 80%;}
寫在最后
以上就是【每日一練】的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
感謝你的閱讀，我是楊小愛，我們明天見。
推薦練習(xí)
學(xué)習(xí)更多技能
請點擊下方公眾號
評論
圖片
表情