其他
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前，我们也练习过一些按钮动画的效果，今天我们再来练习一组CSS实现的按钮动画效果，下面是今天练习的最终效果：
<!doctype html><html><head> <meta charset="utf-8"> <title>【每日一练】68—CSS实现一组渐变按钮动画效果</title></head><body> <div class="container"> <a href="https://www.webqdkf.com/">首页</a> <a href="https://www.webqdkf.com/qdkf/">前端技术</a> <a href="https://www.webqdkf.com/code/">源码案例</a> <a href="https://www.webqdkf.com/mb/">建站模板</a> <a href="http://www.aierweisi.com">建站主机</a> <a href="https://www.webqdkf.com/">资源导航</a> </div></body></html>*{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;}.container{ width: 1200px; display: flex; justify-content: space-around; flex-wrap: wrap;}.container a{ position: relative; display: inline-block; padding: 10px 30px; margin: 20px; text-decoration: none; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; color: #fff; transition: 0.5s;}.container a:nth-child(1){ background: linear-gradient(to right,#C6FFDD, #FBD786,#f64f59); background-size: 200%;}.container a:nth-child(2){ background: linear-gradient(to right,#7F7FD5, #86A8E7,#91EAE4); background-size: 200%;}.container a:nth-child(3){ background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59); background-size: 200%;}.container a:nth-child(4){ background: linear-gradient(to right, #4481eb, #04befe, #4481eb); background-size: 200%;}.container a:nth-child(5){ background: linear-gradient(to right, #1E9600, #FFF200, #FF0000); background-size: 200%;}.container a:nth-child(6){ background: linear-gradient(to right, #fdfc47, #24fe41, #fdfc47); background-size: 200%;}.container a:hover{ background-position-x: 100%; transform: translateY(-15px);}.container a:after{ content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: rgba(255,255,255,.2);}.container a:before{ content: ''; position: absolute; bottom: 0px; left: 5%; width: 90%; height: 4px; background: rgba(0,0,0,0.2); border-radius: 50%; transform: scale(0); transition: 0.5s; filter: blur(5px); z-index: -1;}.container a:hover:before{ transform: scale(1); bottom: -15px;}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号