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;

}

关键技术点如下：

过渡（Transitions）：您使用了transition属性来添加平滑的动画效果，如按钮在悬停和点击时的位置变化。
动画（Animations）：您使用了@keyframes规则来定义动画，并通过animation属性应用到元素上，实现按钮的动态效果。
伪元素（Pseudo-elements）：您使用了::before和::after伪元素来添加额外的内容或效果，如阴影、边框和背景图案。
渐变（Gradients）：您使用了颜色渐变来设置按钮的背景颜色，这增加了视觉吸引力。
滤镜（Filters）：您使用了backdrop-filter和box-shadow属性来添加模糊效果和阴影，增强视觉效果。
定位（Positioning）：您使用了position属性来设置按钮的位置和布局，使其可以相对于父元素定位。
过渡延迟（Transition Delay）：您使用了transition-delay属性来控制动画的延迟时间，使按钮的动画更加流畅。

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

15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
这样使用 GPU 渲染 CSS 动画（转）
大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...
1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
超酷JQuery动画分页按钮，鼠标悬停滑动展开
1.效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩 2.实现原理主要是靠动画方法,来让原本的箭头图像的长度发生变长,正好可以融入下标题的文字 ...
完整学习使用CSS动画【翻译】
注:原文有较大改动使用keyframes, animation属性,例如timing, delay, play state, animation-count, iteration count, d ...
纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
Layui动画、按钮、表单
Layui动画.按钮.表单在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部 ...
amazeui学习笔记--css（常用组件15）--CSS动画Animation
amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

随机推荐

ubuntu22.04 终端显示数字剑雨
数字剑雨是读大学时候常用的屏保,这些年基本也再没有用过,不经意间想到了这个曾经的屏保,发现Ubuntu原版的桌面系统是没有屏保的,又不想换桌面系统,想想还是单独安装一下这个数字剑雨吧. 在Ubuntu ...
HDMI和DP双屏幕连接，对于BIOS来说哪个优先级高——DP连接优先级高于HDMI
最近被博导忽悠了,说是实验室的国家项目结项了,有几十万的资金没有花掉,于是每个人都有了1W的报销金额,由于是结项所用因此只能报销耗材.我这人呢,平时是绝对不占小便宜的,但这次是个大便宜,于是就有些没把 ...
Apache DolphinScheduler 3.2.2 版本正式发布！
Apache DolphinScheduler 3.2.2 版本正式发布! 近日,Apache DolphinScheduler 发布了 3.2.2 版本.此版本主要基于 3.2.1 版本进行了 bu ...
Committer 迎新！这次是来自阿里云的同学
截至今天,Apache DolphinScheduler 项目在 GitHub 上的 Star 数已突破 10.6K,贡献者人数也突破了 470 人.社区的不断壮大,离不开每位 Contributor ...
利用Makefile给多文件、多目录C源码建立工程
0. 前言粉丝留言,想知道如何使用Makefile给多个文件和多级目录建立一个工程,必须安排! 关于Makefile的入门参考文章,可以先看这篇文章: <Makefile入门教程> 为了 ...
线性dp：编辑距离
编辑距离本题与力扣72.编辑距离题意一样,阅读完本文可以尝试leetcode72. 力扣题目链接题目叙述输入两个字符串a,b.输出从字符串a修改到字符串b时的编辑距离输入 NOTV LOVER ...
java_GUI2
package GUi;import java.awt.*;public class GuI2 { public static void main(String[] args) { MyFrame n ...
Go plan9 汇编：说透函数栈
原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言函数是 Go 的一级公民,本文从汇编角度出发看看我们常用的一些函数在干什么. 1. 函数 1.1 main 函数在 main 函数中计算两数之 ...
ECharts实现雷达图详解
ECharts 是一款由百度开源的数据可视化工具,它提供了丰富的图表类型,如折线图.柱状图.饼图.散点图.雷达图.地图.K线图.热力图.仪表盘等,以及丰富的交互功能.ECharts 组件的核心功能实现 ...
五子棋AI：实现逻辑与相关背景探讨（上）
绪论本合集将详细讲述如何实现基于群只能遗传算法的五子棋AI,采用C++作为底层编程语言本篇将简要讨论实现思路,并在后续的文中逐一展开了解五子棋五子棋规则五子棋是一种经典的棋类游戏,规则简单却 ...

CSS动画（毛玻璃按钮）

1.整体效果

2.完整代码

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

随机推荐

热门专题