CSS动画（毛玻璃按钮）

最新推荐文章于 2024-10-01 23:20:42 发布

写代码的大学生

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量578

点赞数 12

文章标签： css 前端

本文链接：https://blog.csdn.net/2303_82176667/article/details/139496077

版权

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