使用css 动画实现，水波纹的效果
每日鸡汤：每个你想要学习的瞬间都是未来的你向自己求救
需求，实现水波纹动画效果，要求中心一个圆点，然后有3个圈，一圈一圈的向里面缩小。
说实话我第一个想到了给3个圈设置不同的宽高，然后设置动画0-100%，一次缩小宽高！
但是，我转念一想，我是不是也可以用padding设置，就是给每个圈设定一个padding, 逐渐缩小padding, 貌似也能达到相同的效果。 确实可以，但是无论用哪种方法，要想让动画变得顺滑，就需要给最外圈设置0-1的透明度的变化，要不然总是会有卡顿的感觉，你可以自己尝试一下加与不加的区别
1. 使用 padding 实现
动画实现：大圈padding缩到中圈的初始padding（同时不透明度从0-1）、中圈的padding缩到小圈的初始padding，小圈padding缩到0
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./dist/bundle.js"></script><style>.flex-c {display: inline-flex;align-items: center;justify-content: center;}.wrapper {border: 1px solid red;width: 800px;height: 800px;}.center {width: 100px;height: 100px;background: red;border-radius: 50%;}.circle {border: 1px solid;border-radius: 50%;}.circle-1 {padding: 200px;/*最外圈要加一个透明度的变化*/border-color: rgba(0, 0, 0, 0);animation: animate1 2.5s linear infinite;}.circle-2 {padding: 100px;animation: animate2 2.5s linear infinite;}.circle-3 {padding: 50px;animation: animate3 2.5s linear infinite;}@keyframes animate1 {0% {padding: 200px;/*最外圈要加一个透明度的变化*/border-color: rgba(0, 0, 0, 0);}100% {padding: 100px;/*最外圈要加一个透明度的变化*/border-color: rgba(0, 0, 0, 1);}}@keyframes animate2 {0% {padding: 100px;}100% {padding: 50px;}}@keyframes animate3 {0% {padding: 50px;}100% {padding: 0px;}}</style></head><body><div class="wrapper flex-c"><div class="flex-c circle circle-1"><div class="flex-c circle circle-2"><div class="flex-c circle circle-3"><div class="center flex-c">中心</div></div></div></div></div></body>
</html>
2. 使用宽高实现
动画实现：大圈宽高缩到中圈的初始尺寸（同时不透明度从0-100）、中圈宽高缩到小圈的初始尺寸，小圈缩到中心的尺寸
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="./dist/bundle.js"></script><style>.flex-c {display: inline-flex;align-items: center;justify-content: center;}.wrapper {border: 1px solid rgba(0, 0, 0, 0.5);width: 1500px;height: 1500px;background: #000;}.center {width: 248px;height: 248px;background: rgba(255, 255, 255, 0.5);border-radius: 50%;opacity: 0.4;color: #fff;}.circle {border: 1px solid rgba(255, 255, 255, 0.5);border-radius: 50%;}.circle-1 {width: 1297px;height: 1297px;animation: animate1 2.5s linear infinite;}.circle-2 {width: 833px;height: 833px;animation: animate2 2.5s linear infinite;}.circle-3 {width: 503px;height: 503px;animation: animate3 2.5s linear infinite;}@keyframes animate1 {0% {width: 1297px;height: 1297px;/*最外圈要加一个透明度的变化*/border-color: rgba(255, 255, 255, 0);}100% {width: 833px;height: 833px;/*最外圈要加一个透明度的变化*/border-color: rgba(255, 255, 255, 0.6);}}@keyframes animate2 {0% {width: 833px;height: 833px;}100% {width: 503px;height: 503px;}}@keyframes animate3 {0% {width: 503px;height: 503px;}100% {width: 248px;height: 248px;}}</style></head><body><div class="wrapper flex-c"><div class="flex-c circle circle-1"><div class="flex-c circle circle-2"><div class="flex-c circle circle-3"><div class="center flex-c">中心</div></div></div></div></div></body>
</html>
相关文章：
使用css 动画实现，水波纹的效果
每日鸡汤：每个你想要学习的瞬间都是未来的你向自己求救 需求，实现水波纹动画效果，要求中心一个圆点，然后有3个圈，一圈一圈的向里面缩小。 说实话我第一个想到了给3个圈设置不同的宽高，然后设置动画0-100%&a…...
Unity光照相关知识和实践 （烘焙光照，环境光设置，全局光照）
简介 本文将会通过一个简单的场景搭建，介绍如何使用烘焙光照以及相关的注意事项。另外还介绍了Unity内全局光照（GI）的知识和GI实际在游戏内的表现效果。 Unity关于光照相关的参考文档地址：https://docs.unity.cn/cn/current/Man…...
【设计模式——学习笔记】23种设计模式——适配器模式Adapter（原理讲解+应用场景介绍+案例介绍+Java代码实现）
文章目录 介绍生活中的案例基础介绍工作原理分类应用场景 案例类适配器模式例1介绍类图代码实现优缺点分析 例2类图代码实现 对象适配器模式（常用方式）例1介绍类图代码实现优缺点分析 例2代码实现 接口适配器模式介绍类图代码实现 登场角色类图类适配器模…...
Android Unit Test
一、测试基础知识 1.1 测试级别 测试金字塔（如图 2 所示）说明了应用应如何包含三类测试（即小型、中型和大型测试）： 小型测试是指单元测试，用于验证应用的行为，一次验证一个类。 中型测试是指…...
docker更新jenkins
下载文件 1、jenkins提示下载 2、官网下载jenkins官网 文件放服务器内 通过工具把jenkins.war放进服务器例如tmp 文件复制到docker的jenkins容器 docker cp 路径文件 容器id:/{后面不接内容为根路径} docker cp /tmp/jenkins.war 53dc1c71058a:/进入容器内 docker exec …...
一种新的基于区域的在线活动轮廓模型研究（Matlab代码实现）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...
【Docker】基于Dockerfile搭建LNMP架构
一、项目环境 公司在实际的生产环境中，需要使用Docker 技术在一台主机上创建LNMP服务并运行Wordpress网站平台。然后对此服务进行相关的性能调优和管理工作。 1. 环境配置 主机操作系统IP地址主要软件DockerCentOS 7.3 x86_64192.168.145.15Docker 19.03容器ip地址规划 ngin…...
爬虫003_pycharm的安装以及使用_以及python脚本模版设置---python工作笔记021
这里我们用ide,pycharm来编码,看一看如何下载 这里我们下载这个社区办,这个是免费的,个人版是收费的 然后勾选以后 安装以后我们来创建一个项目 这里可以选择python的解释器,选择右边的... 这里我们找到我们自己安装的python解释器...
远程xml读取解析，将image url下载到本地，延时队列定时删除文件，图片访问路径保存在数据库中
远程xml部分内容 <imagelist name"FY4A AGRI IMG REGI MTCC GLL" tag"FY4A AGRI IMG REGI MTCC GLL"><image time"2023-07-25 22:30 (UTC)" desc"FY4A AGRI IMG REGI MTCC GLL" url"http://img.nsmc.org.cn/PORTAL/FY4…...
firefox笔记-Centos7离线安装firefox
目前（2023-03-22 16:41:35）Centos7自带的firefox已经很新了是2020年的。主要原因是有个web项目，用2020年的firefox打不开。 发到互联网上是2023-07-24。 报错是js有问题，估计是搞前端的只做了chrome适应，没做firefox…...
Flutter：滑动面板
前言 无意中发现了这个库，发现现在很多app中都有类似的功能。以手机b站为例，当你在看视频时，点击评论，视频会向上偏移，下方划出评论界面。 sliding_up_panel SlidingUpPanel是一个Flutter插件，用于创建滑…...
RocketMQ概论
目录 前言： 1.概述 2.下载安装、集群搭建 3.消息模型 4.如何保证吞吐量 4.1.消息存储 4.1.1顺序读写 4.1.2.异步刷盘 4.1.3.零拷贝 4.2.网络传输 前言： RocketMQ的代码示例在安装目录下有全套详细demo，所以本文不侧重于讲API这种死…...
任务的创建与删除
Q: 什么是任务？ A: 任务可以理解为进程/线程，创建一个任务，就会在内存开辟一个空间。 比如： 玩游戏，打篮球，开车，都可以视为任务。 Windows 系统中的 MarkText 、谷歌浏览器、记事本࿰…...
致敬图灵！HashData拥抱数据智能新时代！
图1：2023ACM中国图灵大会现场 生于1912年的艾伦图灵被称为“计算机科学之父”、“人工智能之父”。1966年，国际计算机协会（ACM）为了纪念这位卓越的科学家，设立了以其名字命名的ACM图灵奖，以表彰在计算机领…...
AD21原理图的高级应用（二）层次原理图设计
（二）层次原理图设计 1.层次原理图概述2.层次化原理图的应用2.1 自上而下的层次化原理图2.2 自下而上的层次化原理图 3.生成层次设计表 对于大规模的电路系统,需要将其按功能分解为若干个电路模块,用户可以单独绘制好各个功能模块,再将它们组合起来继续处…...
ROS中使用RealSense-D435
文章目录 D435简介RealSense的SDK2.0安装方法1：直接利用安装源安装注册服务器公匙将服务器添加到存储库列表安装库 方法2：利用源码安装GitHub下载librealsense安装编译依赖运行脚本cmake编译 软件显示 ROS接口安装启动节点查看话题rviz显示点云 Python接…...
nlp系列（6）文本实体识别（Bi-LSTM+CRF）pytorch
模型介绍 LSTM：长短期记忆网络（Long-short-term-memory）,能够记住长句子的前后信息，解决了RNN的问题（时间间隔较大时，网络对前面的信息会遗忘，从而出现梯度消失问题，会形成长期依赖…...
zookeeper-3.7.1集群
1.下载&解压安装包apache-zookeeper-3.7.1-bin.tar.gz 解压到/app/ &改名zookeeper-3.7.1 [rootnode1 app]# tar -zxvf apache-zookeeper-3.7.1-bin.tar.gz -C /app/ [rootnode1 app]# mv apache-zookeeper-3.7.1-bin zookeeper-3.7.1 ---- 删除docs [rootnode1…...
ubuntu上安装firefox geckodriver 实现爬虫
缘由：当时在windows 上运行chrom 的时候 发现要找到 浏览器和 webdirver 相匹配的 版本比较麻烦，当时搞了大半天才找到并安装好。 这次在ubuntu上尝试用firefox 实现爬虫 文章分为三个部分： 环境搭建浏览器弹窗输入用户名，密码的…...
【Matlab】基于长短期记忆网络的时间序列预测（Excel可直接替换数据）
【Matlab】基于长短期记忆网络的时间序列预测（Excel可直接替换数据） 1.模型原理2.数学公式3.文件结构4.Excel数据5.分块代码6.完整代码7.运行结果1.模型原理 "基于长短期记忆网络（Long Short-Term Memory, LSTM）的时间序列预测"是一种使用LSTM神经网络来预测时间…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
.Net框架，除了EF还有很多很多......
文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...
vscode（仍待补充）
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh？ debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
oracle与MySQL数据库之间数据同步的技术要点
Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异，它们的数据同步要求既要保持数据的准确性和一致性，又要处理好性能问题。以下是一些主要的技术要点： 数据结构差异 数据类型差异ÿ…...
Matlab | matlab常用命令总结
常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）
参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
HDFS分布式存储 zookeeper
hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...