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

转载

wx6332e0803afcf 2022-11-08 08:56:44

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

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

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

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

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