【css3】涟漪动画

news2024/12/24 20:12:31

效果展示

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.coloradmin.cn/o/1156199.html

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

相关文章

中国工科研究生200多篇英文论文中最常见的习惯(The Most Common Habits from more than 200 English Papers written by Gradua)

文章目录 中国工科研究生200多篇英文论文中最常见的习惯&#xff08;The Most Common Habits from more than 200 English Papers written by Graduate Chinese Engineering Students&#xff09;1 常见错误1.1 “a, an, the” 冠词的使用1.2 避免使用超过60个单词的长句1.3 通…

Project#1: Buffer Pool

文章目录 Task#1 - LRU-K Replacement PolicySizeRecordAccessSetEvictableEvictRemoveBugsTests Task#2 - Disk SchedulerStartWorkerThreadBUGs- [✅] BUG: std::abortTest Task#3 - Buffer Pool ManagerLearning NoteNewPageFetchPageUnpinPageDeletePageLearningNoteBugs- …

【OpenCV实现图像:用Python生成图像特效,报错ValueError: too many values to unpack (expected 3)】

文章目录 概要读入图像改变单个通道黑白特效颜色反转将图像拆分成四个子部分 概要 Python是一种功能强大的编程语言&#xff0c;也是图像处理领域中常用的工具之一。通过使用Python的图像处理库&#xff08;例如Pillow、OpenCV等&#xff09;&#xff0c;开发者可以实现各种各…

Python框架之Flask入门和视图

一、Flask入门和视图 需要安装Pycharm专业版 1. Flask简介 Python后端的2个主流框架 Flask 轻量级框架Django 重型框架 Flask是一个基于Python实现的web开发微框架 官方文档&#xff1a;https://flask.palletsprojects.com/ 中文文档&#xff1a;https://dormousehole.readthe…

【TES720D】青翼科技基于复旦微的FMQL20S400全国产化ARM核心模

板卡概述 TES720D是一款基于上海复旦微电子FMQL20S400的全国产化核心模块。该核心模块将复旦微的FMQL20S400&#xff08;兼容FMQL10S400&#xff09;的最小系统集成在了一个50*70mm的核心板上&#xff0c;可以作为一个核心模块&#xff0c;进行功能性扩展&#xff0c;特别是用…

每日自动化提交git

目前这个功能&#xff0c;有个前提&#xff1a; 这个git代码仓库&#xff0c;是一个人负责&#xff0c;所以不存在冲突问题 我这个仓库地址下载后的本地路径是&#xff1a;D:\Projects\Tasks 然后我在另外一个地方新建了一个bat文件&#xff1a; bat文件所在目录为&#xff1a…

高效改名,文件夹名称替换:一键批量替换文件夹名中间部分内容

在我们的日常生活和工作中&#xff0c;经常需要处理大量的文件夹&#xff0c;其中有些文件夹名称可能包含我们需要替换的内容。但如果我们一个一个地手动修改文件夹名称&#xff0c;不仅耗时而且容易出错。为了解决这个问题&#xff0c;我们可以使用云炫文件管理器高效的文件夹…

【Mybatis-Plus】代码生成器

目录 安装插件 数据库建表 Other Config Database Code Generator 根据创建好的数据库表&#xff0c;来直接生成代码 安装插件 数据库建表 Other 点开之后有两个功能 1.数据库配置 2.代码生成 Config Database 首先点开这个配置数据库 Code Generator 配置完数据库…

如何让salesforce提交待审批后不锁定记录

在 Salesforce 中&#xff0c;默认情况下&#xff0c;当记录被提交待审批时&#xff0c;它会被锁定以防止其他用户对其进行修改。这是为了确保审批过程中数据的完整性和一致性。然而&#xff0c;有时可能希望提交待审批后不锁定记录&#xff0c;这时可以使用Apex代码来实现: Ap…

驾驶技巧_新手

人人都是老司机 1> 快速起步(手动挡)2> 窄路会车3> 转弯4> 变道 1> 快速起步(手动挡) 【B站】视频讲解 Step 1> 【快 停 慢放】左脚离合&#xff0c;快速抬到半联动点&#xff1b; Step 2> 离合器慢放同时加油&#xff01; 2> 窄路会车 3> 转弯 4&…

docker环境安装+maven依赖继承问题

1&#xff0c;docker环境安装 我们使用yum指令进行安装&#xff0c;分别cmd运行&#xff1a; yum install -y yum-utils device-mapper-persistent-data lvm2 yum-contig-manager --add-repo https://download.docker.com/linux/centos/docker-ce.rep具体解释如下&#xff1a;…

mac录屏快捷键指南,轻松录制屏幕内容!

“大家知道mac电脑有录屏快捷键吗&#xff0c;现在录屏不太方便&#xff0c;每次都花很多时间&#xff0c;要是有录屏快捷键&#xff0c;应该会快速很多&#xff0c;可是哪里都找不到&#xff0c;有人知道吗&#xff1f;帮帮我&#xff01;” 苹果的mac电脑以其精美的设计和卓…

长沙某公司面经总结 - 失败版

1.Java语言的特征 Java的三大特性&#xff1a;封装、继承、多态 面向对象是利于语言对现实事物进行抽象。面向对象具有以下特征&#xff1a; 继承&#xff1a;继承是从已有类得到继承信息创建新类的过程 封装&#xff1a;封装是把数据和操作数据的方法绑定起来&#xff0c;对…

顺序表——leetcode

原地删除数据 我们的思路这里给的是双指针&#xff0c;给两个指针&#xff0c;从前往后移动&#xff0c;如果不是val就覆盖&#xff0c;如果是我就跳过&#xff0c;大家一定要看到我们的条件是原地修改&#xff0c;所以我们不能另开一个数组来实现我们这道题目。 这里我们给两…

科技云报道:打造生成式AI应用,什么才是关键?

科技云报道原创。 生成式AI作为当前人工智能的前沿领域&#xff0c;全球多家科技企业都在加大生成式AI的研发投入力度。 随着技术、产品及应用等方面不断推出重要成果&#xff0c;如今有更多的行业用户在思考该如何将生成式AI应用落地。 但开发生成式AI应用是一个充满挑战的…

【Linux】虚拟机部署与发布J2EE项目(Linux版本)

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…

opencv c++ canny 实现 以及与halcon canny的对比

Opencv和C实现canny边缘检测_opencv边缘增强-CSDN博客 一、canny实现步骤 1、图像必须是单通道的&#xff0c;也就是说必须是灰度图像 2、图像进行高斯滤波&#xff0c;去掉噪点 3、sobel 算子过程的实现&#xff0c;计算x y方向 、梯度&#xff08;用不到&#xff0c;但是…

C语言KR圣经笔记 2.11条件表达式 2.12优先级和求值顺序

2.11条件表达式 if (a > b) z a; else z b; 上面的语句计算 a 和 b 中的最大值并存入 z。而使用三元操作符 ? : 的条件表达式&#xff0c;为这个结构及类似结构提供了另一种写法。在如下表达式 expr1 ? expr2 : expr3 中&#xff0c;首先对 expr1 求值。如果值非0 …

0基础学习PyFlink——个数滚动窗口(Tumbling Count Windows)

大纲 Tumbling Count WindowsmapreduceWindow Size为2Window Size为3Window Size为4Window Size为5Window Size为6 完整代码参考资料 之前的案例中&#xff0c;我们的Source都是确定内容的数据。而Flink是可以处理流式&#xff08;Streaming&#xff09;数据的&#xff0c;就是…

go中url.ParseRequestURI和url.Parse函数的踩坑记

使用url.Parse函数 package mainimport ("fmt""net/url" )func main() {attrRawUrl : "http://localhost?wifitrue&carrier#Staysafe AIS&osandroid"urlObj, _ : url.Parse(attrRawUrl)fmt.Printf("urlObj:%#v\n", *urlObj)…