CSS动画（毛玻璃按钮）

本文主要是介绍CSS动画（毛玻璃按钮），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.整体效果

https://mmbiz.qpic.cn/sz_mmbiz_gif/EGZdlrTDJa4ofJ9W4ibgD5asQcBesp1f1CXVnrQmicnzqDPskBNEQC4ia06cq50C0ZPpzcdQ5fBOe2zjNPLQsARfQ/640?wx_fmt=gif&from=appmsg&wxfrom=13

2.完整代码

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  <meta charset="UTF-8">  <title>毛玻璃按钮</title>  <link rel="stylesheet" type="text/css" href="6_6.css">  
</head>  
<body>  <div class="container">  <div class="btn"><a href="#">button 1</a></div>  <div class="btn"><a href="#">button 2</a></div>  <div class="btn"><a href="#">button 3</a></div>  
</div>  </body>

CSS

body {  position: relative;  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  background: linear-gradient(to bottom, #5d326c, #350048); /*fiolet*/  
}  
.container {  width: 1000px;  display: flex;  flex-wrap: wrap;  justify-content: space-around;  
}  
.container .btn {  position: relative;  top: 0;  left: 0;  width: 250px;  height: 50px;  margin: 0;  display: flex;  justify-content: center;  align-items: center;  
}  
.container .btn a {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  display: flex;  justify-content: center;  align-items: center;  background: rgba(255, 255, 255, 0.05);  box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);  border-bottom: 1px solid rgba(255, 255, 255, 0.1);  border-top: 1px solid rgba(255, 255, 255, 0.1);  border-radius: 30px;  padding: 10px;  box-sizing: border-box;  letter-spacing: 1px;  text-decoration: none;  overflow: hidden;  color: #fff;  font-weight: 400px;  z-index: 1;  transition: 0.5s;  backdrop-filter: blur(15px);  
}  
.container .btn:hover a {  letter-spacing: 3px;  
}  
.container .btn a::before {  content: "";  position: absolute;  top: 0;  left: 0;  width: 50%;  height: 100%;  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);  transform: skewX(45deg) translate(0);  transition: 0.5s;  filter: blur(0px);  
}  
.container .btn:hover a::before {  transform: skewX(45deg) translate(200px);  
}  
.container .btn::before {  content: "";  position: absolute;  left: 50%;  transform: translatex(-50%);  bottom: -5px;  width: 30px;  height: 10px;  background: #f00;  border-radius: 10px;  transition: 0.5s;  transition-delay: 0.5;  
}  
.container .btn:hover::before /*lightup button*/ {  bottom: 0;  height: 50%;  width: 80%;  border-radius: 30px;  
}  .container .btn::after {  content: "";  position: absolute;  left: 50%;  transform: translatex(-50%);  top: -5px;  width: 30px;  height: 10px;  background: #f00;  border-radius: 10px;  transition: 0.5s;  transition-delay: 0.5;  
}  
.container .btn:hover::after /*lightup button*/ {  top: 0;  height: 50%;  width: 80%;  border-radius: 30px;  
}  
.container .btn:nth-child(1)::before, /*chnage 1*/  
.container .btn:nth-child(1)::after {  background: #ff1f71;  box-shadow: 0 0 5px #ff1f71, 0 0 15px #ff1f71, 0 0 30px #ff1f71, 0 0 60px #ff1f71;  
}  
.container .btn:nth-child(2)::before, /* 2*/  
.container .btn:nth-child(2)::after {  background: #2db2ff;  box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff, 0 0 60px #2db2ff;  
}  
.container .btn:nth-child(3)::before, /* 3*/  
.container .btn:nth-child(3)::after {  background: #1eff45;  box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45, 0 0 60px #1eff45;  
}