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;

}

关键技术点如下：

  1. 过渡（Transitions）：您使用了transition属性来添加平滑的动画效果，如按钮在悬停和点击时的位置变化。

  2. 动画（Animations）：您使用了@keyframes规则来定义动画，并通过animation属性应用到元素上，实现按钮的动态效果。

  3. 伪元素（Pseudo-elements）：您使用了::before和::after伪元素来添加额外的内容或效果，如阴影、边框和背景图案。

  4. 渐变（Gradients）：您使用了颜色渐变来设置按钮的背景颜色，这增加了视觉吸引力。

  5. 滤镜（Filters）：您使用了backdrop-filter和box-shadow属性来添加模糊效果和阴影，增强视觉效果。

  6. 定位（Positioning）：您使用了position属性来设置按钮的位置和布局，使其可以相对于父元素定位。

  7. 过渡延迟（Transition Delay）：您使用了transition-delay属性来控制动画的延迟时间，使按钮的动画更加流畅。

CSS动画（毛玻璃按钮）的更多相关文章

  1. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  2. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 你所不知道的 CSS 动画技巧与细节

    怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...

  4. 这样使用 GPU 渲染 CSS 动画（转）

    大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 超酷JQuery动画分页按钮，鼠标悬停滑动展开

    1.效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩 2.实现原理 主要是靠动画方法,来让原本的箭头图像的长度发生变长,正好可以融入下标题的文字 ...

  7. 完整学习使用CSS动画【翻译】

    注:原文有较大改动 使用keyframes, animation属性,例如timing,  delay, play state, animation-count, iteration count, d ...

  8. 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  9. Layui动画、按钮、表单

    Layui动画.按钮.表单 在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部 ...

  10. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

随机推荐

  1. 查看numpy中不同数据类型的表示范围

    在numpy中数据类型主要可以分为int和float两个类型,查看int类型的表示范围可以使用numpy.iinfo,查看float类型的表示范围可以使用numpy.finfo  . 例子: impo ...

  2. Java IO流的简单使用 通俗易懂 超详细 【内含案例】

    IO流简单使用 InputStream 字节输入流 OutputStream 字节输出流 Reader 字符输入流 Writer 字符输出流 代码示例 输入和输出是相对于程序来说的,读取到程序中叫做输 ...

  3. 十五分钟两百行代码，手写一个vue项目全局通用的弹框

    前言: 我们在写vue项目时,弹框是非常常用的组件,并且在同一个项目中,弹框大多类似.所以我们可以抽离封装出一个通用的弹框: 因为vue3可向下兼容,所以作者这边会使用vue2的写法,vue3写法大同 ...

  4. 后缀数组--SA--字符串

    SA (Suffix Array) -- 后缀数组 简介 这里明白两个定义: \(SA_i\) : 按字典序排列后大小为 \(i\) 的后缀的后缀头的下标. \(Rank_i\) : 后缀头的下标为 ...

  5. Devexpress GridControl下拉框实现联动

    实现效果 1.先在设计界面绑定数据列 1.点击设计器 2.绑定数据列 2. 绑定GridView的 FocusedRowChanged事件 //定义两个下拉框 _RIcmbtype:不良分类 _RIc ...

  6. Conda 使用

    简介 Conda 和 Anaconda.Miniconda 的关系 Conda 是一个包管理器及环境管理器. Anaconda 和 Miniconda 都是一种 Python 和 R 发行版,其包括了 ...

  7. 自动调用关闭释放资源try-with-resources

    try-with-resources自动执行释放资源 看到了try这个关键字立马就应该能想到异常处理机制try-catch-finally语句块.这里要说的东西和异常处理背后的机制其实几乎是一样的,只 ...

  8. 使用kamailio进行分机注册及互拨

    操作系统版本:Debian 12.5_x64 kamailio版本:5.8.2 kamailio作为专业的SIP服务器,可承担注册服务器的角色.今天记录下kamailio作为注册服务器,承接分机注册, ...

  9. .net core 依赖注入，运行报错 Cannot consume scoped 'xxx' service from singleton 'yyy'

    这是因为 xxx 的生命周期是 AddScoped 注入的,而 yyy 的生命周期是 AddSingleton ,然后 yyy 这个单例的对象中,它又依赖了xxx 也就是说,单例注入的对象中依赖了 A ...

  10. mysql 和 sqlalchemy 的一个测试环境

    Mysql: docker run -itd --name mysql-test -p 3306:3306 -e MYSQL_ROOT_PASSWORD=123456 mysqldocker exec ...