使用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神经网络来预测时间…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
IT供电系统绝缘监测及故障定位解决方案
随着新能源的快速发展，光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域，IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选，但在长期运行中，例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
多模态图像修复系统：基于深度学习的图片修复实现
多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...
es6+和css3新增的特性有哪些
一：ECMAScript 新特性（ES6） ES6 (2015) - 革命性更新 1，记住的方法，从一个方法里面用到了哪些技术 1，let /const块级作用域声明2，**默认参数**：函数参数可以设置默认值。3&#x…...
Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生，系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler，它是Thread的子类（就是package java.lang;里线程的Thread）。本文将利用它将设备信息、报错信息以及错误的发生时间都…...