【每日一練】77—CSS 實現(xiàn)一款文字Hover效果
<html><head><meta charset="utf-8"><title>【每日一練】77—CSS 實現(xiàn)一款文字Hover效果</title></head><body><h2><span><i></i>w</span><span><i></i>w</span><span><i></i>w</span><span><i></i>.</span><span><i></i>w</span><span><i></i>e</span><span><i></i>b</span><span><i></i>q</span><span><i></i>d</span><span><i></i>k</span><span><i></i>f</span><span><i></i>.</span><span><i></i>c</span><span><i></i>o</span><span><i></i>m</span></h2></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;font-family: monospace;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: linear-gradient(45deg,#ff0057,#2196f3);}h2{position: relative;display: flex;gap: 5px;color: #fff;font-size: 4em;cursor: pointer;text-transform: uppercase;}h2 span{position: relative;filter: blur(5px);padding: 0 5px;transition: 0.5s;}h2 span:hover{filter: blur(0);transition: 0s;}h2 span i{position: absolute;inset: 0;}h2 span:hover i::before{content: '';position: absolute;top: 0;left: 0;width: 2px;height: 8px;background: #fff;box-shadow: 0 53px #fff,36px 53px #fff,36px 0 #fff;}h2 span:hover i::after{content: '';position: absolute;top: 0;left: 0;width: 8px;height: 2px;background: #fff;box-shadow: 0 60px #fff,30px 60px #fff,30px 0 #fff;}
寫在最后
以上就是【每日一練】的全部內(nèi)容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學習更多技能
請點擊下方公眾號
評論
圖片
表情