【css3】涟漪动画

效果展示

dom代码

<div class="mapSelfTitle66"><div></div>
</div>

样式代码

.mapSelfTitle66{width:120px;height:60px;position: relative;&>div{width:100%;height:100%;background: url("~@/assets/images/video_show/error_bg.png") no-repeat;background-size: 100% 100%;position: absolute;top:50%;left:50%;margin:-30px 0 0 -60px;animation: animationName 1.5s ease-out infinite;}
}
@keyframes animationName {0% { }100% {width:140px;height:70px;margin:-35px 0 0 -70px;}
}

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

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

相关文章

javaee实验:搭建maven+spring boot开发环境,开发“Hello,Spring Boot”应用

目录 mavenspringboot实验目的实验内容环境的搭建 在开发中&#xff0c;maven和spring都是非常常用、非常重要的管理工具和框架&#xff0c;今天就在这里使用idea进行环境的搭建和创建第一个spring程序 maven 1.1maven是一个跨平台的项目管理工具&#xff08;主要管理jar包&am…

Linux软件安装包管理器yum

Linux软件安装 Linux软件安装的本质 ​ 对于安装软件最基本的理解就是把可执行程序拷贝到指定路径下&#xff0c;我们知道直接输入指令就可以实现想要的功能&#xff0c;这些指令本质上都是放在指定路径下的可执行文件&#xff0c;如果我们把写好的程序编译后的可执行文件放到…

证明char是定长的?

证明char是定长的&#xff1f; 大部分博客都在讲解char和varchar区别的时候都谈到char为定长&#xff0c;varchar为变长。 但是怎么证明char为定长呢&#xff1f; 下面是我证明的过程。 创建CHAR列&#xff1a;首先&#xff0c;创建一个CHAR列&#xff0c;指定其长度。例如&…

10kb的照片尺寸怎么弄?三个方法值得一试!

为了方便存储和传输&#xff0c;同时还能保证一定的清晰度。10kb的照片在清晰度和尺寸之间达到了平衡&#xff0c;既能保证照片的细节和色彩&#xff0c;又不会占用太多的存储空间。那么如何把照片弄成10kb呢&#xff1f;下面介绍了三种方法。 方法一&#xff1a;嗨格式压缩大师…

GZ035 5G组网与运维赛题第10套

2023年全国职业院校技能大赛 GZ035 5G组网与运维赛项&#xff08;高职组&#xff09; 赛题第10套 一、竞赛须知 1.竞赛内容分布 竞赛模块1--5G公共网络规划部署与开通&#xff08;35分&#xff09; 子任务1&#xff1a;5G公共网络部署与调试&#xff08;15分&#xff09; 子…

Spring Cloud之Sentinel的简单学习

目录 雪崩问题 超时处理 线程隔离 熔断降级 流量控制 服务对比 安装Sentinel控制台 案例 簇点链路 限流规则 流控模式 直接模式 关联模式 链路模式 流控效果 Warm up 排队等待 热点参数限流 隔离与降级 Feign整合Sentinel 线程隔离 规则设置 熔断降级 …

RK3568外部IO中断示例

外部IO中断介绍 本篇文章以万象奥科HD-RK3568-IOT评估板中GPIO30为例&#xff0c;介绍Linux内核中断的注册方法&#xff0c;使用中断的方式检测GPIO30是否出现上升沿信号。中断在linux、设备驱动开发里使用的都非常多&#xff0c;可以更加实时的检测GPIO30的状态。 Linux内核…

高等数学教材重难点题型总结(九)多元函数微分法及其应用

第九章习题总结完毕&#xff0c;最难的应该就是方程组求解隐函数中的雅可比行列式了&#xff0c;其他方面无论是期末还是考研都不会出太多难题。对于多元极限和连续性质要理解得更深刻一些&#xff0c;而方向导数、梯度等公式&#xff0c;应该熟练掌握~ 1. 写出多元函数的定义域…

TypeScript 第一站概念篇

前言 &#x1f52e; 好长一段时间没有写文章了&#xff0c;原因是经历了一次工作变动&#xff0c;加入了一个有一定规模的开发团队&#xff0c;前端算上我有四个人&#xff0c;很欣慰&#xff0c;体验一下团队配合的感觉&#xff0c;在我之上有一个组长&#xff0c;比我年长四…

Azure 机器学习 - 使用 AutoML 和 Python 训练物体检测模型

目录 一、Azure环境准备二、计算目标设置三、试验设置四、直观呈现输入数据五、上传数据并创建 MLTable六、配置物体检测试验适用于图像任务的自动超参数扫描 (AutoMode)适用于图像任务的手动超参数扫描作业限制 七、注册和部署模型获取最佳试用版注册模型配置联机终结点创建终…

Spark的主要概念

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容&#x1f34a; 1. RDD&#x1f34a; 2. Spark SQL&#x1f34a; 3. Spark Streaming&#x1f34a; 4. MLlib&#x1f34a; 5. GraphX&#x1f34a; 总结 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍…

ubuntu20.04配置解压版mysql5.7

目录 1.创建mysql 用户组和用户2.下载 MySQL 5.7 解压版3.解压 MySQL 文件4.将 MySQL 移动到适当的目录5.更改mysql目录所属的用户组和用户&#xff0c;以及权限6.进入mysql/bin/目录&#xff0c;安装初始化7.编辑/etc/mysql/my.cnf配置文件8.启动 MySQL 服务&#xff1a;9.建立…

在Linux上编译gdal3.1.2指南

作者:朱金灿 来源:clever101的专栏 为什么大多数人学不会人工智能编程?>>> 以Ubuntu 18编译gdal3.1.2为例,编译gdal3.1.2需要先编译proj库和geos库(可选)。我选择的proj库版本为proj-7.1.0,编译proj-7.1.0需要先编译tiff库和sqlite3。我选择的sqlite3的版本为…

Unity的live2dgalgame多语言可配置剧情框架

这段代码用于读取表格 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; using OfficeOpenXml; using System.IO; using UnityEngine.Networking; using UnityEngine.UI; using Random UnityEngine.Random;public class Plots…

工业5G路由器;小体积 千兆高速通信组网

计讯物联工业路由器TR232&#xff0c;5G高速网络&#xff0c;超低时延、高可靠性&#xff0c;小体积、易安装、强兼容&#xff0c;串口/网口多设备接入联网&#xff0c;为用户提供高速稳定的数据传输通道 。    小体积5G工业路由器TR323&#xff0c;外形1047824mm&#xff0…

系列六、Mybatis的一级缓存

一、概述 Mybatis一级缓存的作用域是同一个SqlSession&#xff0c;在同一个SqlSession中执行两次相同的查询&#xff0c;第一次执行完毕后&#xff0c;Mybatis会将查询到的数据缓存起来&#xff08;缓存到内存中&#xff09;&#xff0c; 第二次执行相同的查询时&#xff0c;会…

ArmSom---SPI开发指南

1. 简介 RK3588从入门到精通本⽂主要介绍在Rockchip平台配置spi接口并且使用的方法开发板&#xff1a;ArmSoM-W3Kernel&#xff1a;5.10.160OS&#xff1a;Debian11 2. SPI接口概述 SPI&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;即串行外围设备接口&…

ElementuiPlus的table组件实现行拖动与列拖动

借助了插件sortablejs。这种方法只适合做非树状table。如果想实现树状table&#xff0c;并且可拖动。可以试一下aggridVue3这个插件 <template><div class"draggable" style"padding: 20px"><el-table row-key"id" :data"t…

RabbitMQ 消息对象 序列化/反序列化 天坑!异常处理方案

目录 1. 报错的背景 2. 问题分析 3. 最佳解决办法 1. 报错的背景 a&#xff09;使用 RabbitMQ 发送消息时&#xff0c;发送消息的类型为 Map<String, Object>&#xff0c;map 里面我 put 了一个 <String, Long> 类型&#xff0c;如下图&#xff1a; b&#xff…

【考研数据结构代码题2】删除单链表倒数第n个结点

题目&#xff1a;删除单链表倒数第n个结点 难度&#xff1a;★ 算法思路&#xff1a; 首先题目没有指明链表的长度&#xff0c;多以首先需要编写一个函数getLength()来求表长&#xff0c;其次删除倒数第n个结点&#xff0c;即删除正数第length-n1个结点&#xff0c;这是二者之间…