【每日一练】77—CSS 实现一款文字Hover效果
web前端开发
共 2019字，需浏览 5分钟
· 2022-10-15
<html><head><meta charset="utf-8"><title>【每日一练】77—CSS 实现一款文字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;}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
评论