CSS技巧专栏:一日一例 14-纯CSS实现模拟水波波动填充按钮特效

CSS技巧专栏:一日一例 14-纯CSS实现模拟水波波动填充按钮特效

大家好,今天介绍一个在网上很常见的模拟水波波动要灌满按钮的动画效果,效果下面图所示。

本例图片

案例分析

我们沿着Z轴从上到下数一下一共有几个层:

文字层:白色文字阴影的黑色文字,当鼠标移动上来时候,它变成了暗蓝色。

水波层:这里的水波是一个蓝色的层,上面叠加了2个圆形的白色层模拟的。两个大小一样的白色的近圆形层不停缓慢的滚动形成的。 这里就是3个层。

好吧,这样数下来就至少4个层。那么,文字层怎么在最上面呢?显然,按钮本体层是不行的,它会被压在水波层下面,那么它还需要用到 伪元素,这就是:5个层。

分析结束,我们开工!

布局代码

<button class="base">我要被淹死了</button>

基础样式

:root{--main-bg-color: #000;--color:#000;--hover-color:#993399;
}
button{margin: 0.3em;outline: 0;border: none;
}
.base{position: relative;   padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度 ,并确保了按钮文字水平方向居中 */font-family: "微软雅黑", sans-serif;font-size: 1.5rem;  line-height: 1.5rem; /* 行高和字号大小相等,可以实现按钮文字在按钮内垂直居中 */ font-weight:700;color: var(--color);  /* 文字颜色为预定义的前景色 */cursor: pointer;   /* 鼠标移动到按钮上时候的形状:手型 */user-select: none;  /* 让用户不能选择按钮上的文字 */white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */transition: all .5s; /* 按钮响应动画效果的持续时间 */margin: 1.5rem 2rem;
}

按钮样式

我们先做复杂的水波滚动效果,先修改一下HTML,给按钮增加一个 行内元素 span,它会有1个本体和两个伪元素层,用来实现上面我们说过的水波波动效果。

<button class="ba

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/51631.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

黑马点评--给店铺类型查询添加缓存

controller/ShopTypeController.java /*** 店铺分类查询&#xff0c;用于展示首页头部店铺分类* return*/GetMapping("list")public Result queryTypeList() {return typeService.queryList();} service/IShopTypeService.java Result queryList(); service/impl/S…

fatal: Could not read from remote repository. 解决方法

问题描述&#xff1a; Git : fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists。 解决方法&#xff1a; 当在网上尝试大量方法仍然失败的时候&#xff0c;不妨试试这个方法。 在 github 上&…

java手动编译和运行程序

java手动编译和运行程序 1、无package无依赖jar public class HelloWorld {public static void main(String[] args) {System.out.println("Hello World!");} }$ javac HelloWorld.java $ java -classpath . HelloWorld # 或者 $ java -cp . HelloWorld2、有packag…

探索 Redis 不同集群架构的性能与应用

1. 引言 Redis的集群配置成为了提高数据可靠性和服务可用性的关键。本文将带领大家了解Redis的四种主要集群架构&#xff0c;并重点分析哨兵模式和Redis Cluster架构和优势。 2. Redis的四种集群架构 2.1 单实例Redis 使用单个 Redis 实例提供服务。适用于小规模应用&#…

深度学习在智慧交通中的应用:行人车辆检测与计数系统详解

引言 在现代城市中&#xff0c;行人和车辆的检测与计数对交通管理和城市规划具有重要意义。通过使用深度学习技术&#xff0c;可以实现对行人和车辆的实时检测与计数&#xff0c;提高交通管理的效率。本文将详细介绍如何构建一个基于深度学习的行人车辆检测与计数系统&#xf…

论文阅读:Deformable DETR: Deformable Transformers for End-to-End Object Detection

论文阅读&#xff1a;Deformable DETR: Deformable Transformers for End-to-End Object Detection Deformable DETR: 基于稀疏空间采样的注意力机制&#xff0c;让DCN与Transformer一起玩&#xff01; - 知乎 (zhihu.com) 【Deformable DETR 论文源码解读】Deformable Trans…

The Llama 3 Herd of Models.Llama 3 模型第1,2,3部分全文

现代人工智能(AI)系统是由基础模型驱动的。本文提出了一套新的基础模型,称为Llama 3。它是一组语言模型,支持多语言、编码、推理和工具使用。我们最大的模型是一个密集的Transformer,具有405B个参数和多达128K个tokens的上下文窗口。本文对Llama 3进行了广泛的实证评价。我们…

【error】AttributeError: module ‘cv2.dnn‘ has no attribute ‘DictValue‘(库冲突)

conda list conda remove opencv pip uninstall opencv-python conda list pip 同时卸载两个库 pip uninstall opencv-contrib-python opencv-python 没有and 直接写库名 module ‘cv2.dnn‘ has no attribute ‘DictValue‘解决办法_module cv2.dnn has no attribute d…

实分析与测度论问题的分类

实分析主要研究实数、实数序列、实数极限以及实值函数的分析&#xff0c;而度量空间则是一个具有距离函数的集合&#xff0c;其分类可以从多个角度进行。 实分析 实分析主要关注实数、实数序列、实数极限以及实值函数的分析。它涉及到多个重要的概念和理论&#xff0c;包括但…

Linux - 环境变量、程序地址空间、进程地址空间及Linux2.6内核进程调度队列

目录 环境变量 基本概念 常见环境变量 查看环境变量的方法 测试PATH 测试HOME 测试SHELL 和环境变量相关的命令 环境变量的组织方式 通过代码获取环境变量 通过系统调用获取环境变量 程序地址空间 进程地址空间 Linux2.6内核进程调度队列 一个CPU拥有一个runqueue 优先级 活…

谈一谈爬虫开发工程师

爬虫就只是抓数据的吗&#xff1f;并不是&#xff0c;爬虫工程师的工作不再仅仅是抓取数据&#xff0c;还需要处理其他各种复杂问题&#xff0c;今天我们就来聊聊爬虫开发工程师。 一、 爬虫开发工程师工作内容 爬虫开发工程师是负责编写和维护网络爬虫程序的专业人员。他们的…

Springboot与SpringSecurity使用(2):授权、自定义异常处理

一、用户授权 在SpringSecurity中&#xff0c;会使用默认的FilterSecurityInterceptor来进行权限校验。在FilterSecurityInterceptor中会从SecurityContextHolder获取其中的Authentication&#xff0c;然后获取其中的权限信息。判断当前用户是否拥有访问当前资源所需的权限。Sp…

2024-HW最新漏洞整理及相应解决方案(一)

前言&#xff1a; 漏洞是基于部分安全厂家、软件厂商的公众号或官方网站&#xff0c;以及一些非官方渠道等途径整理的HW安全漏洞情报&#xff0c;情报里附含漏洞详情和解决方案。护网期间我将持续更新分享&#xff0c;希望可以在护网期间帮助到大家 漏洞 用友U8CLOUDv3.6版本以…

c++初阶篇(七):类和对象(日期类)

1.头文件 定义了日期类&#xff0c;给出了类成员变量及成员函数的声明 #pragma once #include<iostream> #include<assert.h> using namespace std; class Date{public:friend ostream& operator<<(ostream& out, const Date& d);friend istre…

计算机网络中的 IPv6 部署与转换

背景介绍 随着互联网的迅速发展&#xff0c;IPv4 地址资源日益枯竭&#xff0c;无法满足未来互联网设备连接的需求。为了解决这一问题&#xff0c;IPv6 应运而生。IPv6&#xff08;互联网协议第六版&#xff09;提供了比 IPv4 更大的地址空间、更好的安全性和扩展性。然而&…

【多模态大模型】 ALBEF in NeurIPS 2021

一、引言 论文&#xff1a; Align before Fuse: Vision and Language Representation Learning with Momentum Distillation 作者&#xff1a; Salesforce Research 代码&#xff1a; ALBEF 特点&#xff1a; 该方法使用ViT进行图像特征提取&#xff0c;提出将BERT分两部分&am…

Cocos Creator2D游戏开发(3)-飞机大战(1)-背景动起来

资源见: https://pan.baidu.com/s/1cryYNdBOry5A4YEEcLwhDQ?pwdzual 步骤 1, 让背景动起来 2, 玩家飞机显现,能操控,能发射子弹 3.敌机出现 4. 碰撞效果(子弹和敌机,敌机和玩家) 5. 积分和游戏结束 6. 游戏存档,对接微信小游戏,保存历史最高分 7. cocos发布到微信小游戏 资源…

探索Python的进度条神器:tqdm

文章目录 探索Python的进度条神器&#xff1a;tqdm一、背二、tqdm简介三、安装tqdm四、tqdm的五个简单使用示例五、tqdm在不同场景下的应用六、常见问题及解决方案七、总结 探索Python的进度条神器&#xff1a;tqdm 一、背 景&#xff1a;为什么选择tqdm&#xff1f; 在Python…

苦学Opencv的第十四天:人脸检测和人脸识别

Python OpenCV入门到精通学习日记&#xff1a;人脸检测和人脸识别 前言 经过了十三天的不懈努力&#xff0c;我们终于也是来到了人脸检测和人脸识别啦&#xff01;相信大家也很激动吧。接下来我们开始吧&#xff01; 人脸识别是基于人的脸部特征信息进行身份识别的一种生物识…

Spring 常用的三种拦截器详解

前言 在开发过程中&#xff0c;我们常常使用到拦截器来处理一些逻辑。最常用的三种拦截器分别是 AOP、 Interceptor 、 Filter&#xff0c;但其实很多人并不知道什么时候用AOP&#xff0c;什么时候用Interceptor&#xff0c;什么时候用Filter&#xff0c;也不知道其拦截顺序&am…