【每日一练】68—CSS实现一组渐变按钮动画效果

最新推荐文章于 2024-04-28 20:39:51 发布

web前端开发V

最新推荐文章于 2024-04-28 20:39:51 发布

阅读量290

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649132374&idx=3&sn=e08c13c434bd3fec165fc24849d63d71&chksm=be58aafb892f23edb2fa10d90cf26c21abcd13dd7a4e4b2e07d998553ac5af5adb30be156d68&scene=126&&sessionid=0

版权

在之前，我们也练习过一些按钮动画的效果，今天我们再来练习一组CSS实现的按钮动画效果，下面是今天练习的最终效果：

接下来，我们再来看一下这个案例的源码。

HTML代码：

<!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>

CSS代码：

*
{
  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;
}

写在最后

以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】68—CSS实现一组渐变按钮动画效果

在之前，我们也练习过一些按钮动画的效果，今天我们再来练习一组CSS实现的按钮动画效果，下面是今天练习的最终效果：接下来，我们再来看一下这个案例的源码。HTML代码：<!doctype html><html><head> <meta charset="utf-8"><title>【每日一练】68—CSS实现一组渐变按钮动画效果...
复制链接

扫一扫