使用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神经网络来预测时间…...
[NLP]LLM高效微调(PEFT)--LoRA
LoRA 背景 神经网络包含很多全连接层，其借助于矩阵乘法得以实现，然而，很多全连接层的权重矩阵都是满秩的。当针对特定任务进行微调后，模型中权重矩阵其实具有很低的本征秩（intrinsic rank），因…...
vue3 vant上传图片
在 Vue 3 中使用 Vant 组件库进行图片上传，您可以使用 Vant 的 ImageUploader 组件。ImageUploader 是 Vant 提供的图片上传组件，可以方便地实现图片上传功能。 以下是一个简单的示例，演示如何在 Vue 3 中使用 Vant 的 ImageUploader 组件进行…...
深入理解linux内核--内存管理
RAM的某些部分永久分配给内核， 来存放内核代码及静态内核数据结构。 RAM的其余部分称为动态内存， 这不仅是进程所需的宝贵资源， 也是内核本身所需的宝贵资源。页框管理 Intel的Pentinum处理器可采用两种不同的页框大小： 4KB&…...
SpringBoot热部署的开启与关闭
1、 开启热部署 （1）导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId> </dependency>（2）设置 此时就搞定了。。。 2、…...
k8s集群部署（使用kubeadm部署工具进行快速部署，相关对应版本为docker20.10.0+k8s1.23.0+flannel）
1. 安装要求 在开始之前，部署Kubernetes集群机器需要满足以下几个条件： 一台或多台机器，操作系统 CentOS7.x-86_x64硬件配置：2GB或更多RAM，2个CPU或更多CPU，硬盘20GB或更多可以访问外网，需要拉…...
20230729 git github gitee
1.gitee与gitHub概念？ Gitee（码云）是开源中国社区推出的代码托管协作开发平台，支持Git和SVN，提供免费的私有仓库托管。Gitee专为开发者提供稳定、高效、安全的云端软件开发协作平台，无论是个人、团队、或是…...
php建造者模式
一，建造者模式，也叫做生成器模式，是创建设计模式的一种，它能将一个复杂的对象的创建过程分离开来，使你能够分步骤的创建对象。建造者模式也允许你使用相同的建造代码创造出不同类型和形式的对象。 建造者模式一般包括四…...
linux---》用户操作/su和sudo/普通权限/特殊权限/解压压缩/软件管理，rpm和yum/源码安装nginx
用户操作 ####创建用户####1 创建sa和sutdents组 groupadd sa groupadd students # 2 用户可以属于多个组，只能属于一个主组，附加组可以有多个 G useradd -u 5001 -g students -G sa -c "注释" -s /bin/bash lqz666 # 3 设置密码 passwd lqz6…...
tinkerCAD案例：20. Simple Button 简单按钮和骰子
文章目录 tinkerCAD案例：20. Simple Button 简单按钮Make a Trick Die tinkerCAD案例：20. Simple Button 简单按钮 Project Overview: 项目概况： This is a series of fun beginner level lessons to hone your awesome Tinkercad skills a…...
Java - 为什么要用BigDecimal？
🤔️为什么要用BigDecimal？ 当然是因为使用Double计算，在某些对精度要求很高的场景下会出现问题💀不信你看⤵️ Test void test12() {// 丢失精度double result 0.2 0.1;System.out.println(result); // 输出结果为 0.300000000…...