css 圆形脉冲动画
需求:
项目需要在3D场景增加动画按钮,直接添加到场景时 当场景过大的时候 、加载比较麻烦
因在找资料时发现这玩意居然要付费。故做此记录,
效果:
参考:
1、https://www.jiangweishan.com/article/css3htmlsdf20210208a1.html
2、https://www.cnblogs.com/lalalagq/p/9988347.html
实现:
没啥可思考的 就是将上面两个内容结合了一下。
大概的意思就是:
1、创建一个元素
2、创建两个伪类元素
3、动画延迟加载(before 元素更新之前会加载一次,after 元素更新之后加载一次、这个时候去加一个延时。)
<template>
<!-- 样式1 -->
<div class="circle">
<svg class="circle" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9798" width="32" height="32">
<path d="M509.979 959.316c-247.308 0-447.794-200.486-447.794-447.794S262.671 63.728 509.979 63.728s447.794 200.486 447.794 447.794-200.485 447.794-447.794 447.794z m0-814.171c-202.346 0-366.377 164.031-366.377 366.377s164.031 366.377 366.377 366.377c202.342 0 366.377-164.031 366.377-366.377S712.321 145.145 509.979 145.145z m-40.708 610.628c-40.709 0-40.709-40.708-40.709-40.708l40.709-203.543s0-40.709-40.709-40.709c0 0-40.709 0-40.709-40.709h122.126s40.709 0 40.709 40.709-40.709 162.834-40.709 203.543 40.709 40.709 40.709 40.709h40.709c-0.001 0-0.001 40.708-122.126 40.708z m81.417-407.085c-22.483 0-40.709-18.225-40.709-40.709s18.225-40.709 40.709-40.709 40.709 18.225 40.709 40.709-18.226 40.709-40.709 40.709z" p-id="9799" fill="#d81e06"></path></svg> </div> </template> <style lang="less"> .circle {
// --inner-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
} .circle::before,
.circle::after {
content: '';
position: absolute;
width: 32px;
height: 32px;
// border: 2px solid white;
box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
border-radius: 50%;
animation: pulse 2s ease-out infinite;
} .circle::after {
animation-delay: 1s;
} @keyframes pulse {
from {
box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
} to {
box-shadow: 0 0 0 35px rgba(168, 63, 57, 0);
}
} </style>
当然 ,这个是比较简单的, 想要更多的层数,那还是参考别的吧。
css 圆形脉冲动画的更多相关文章
- 第四十二课:基于CSS的动画引擎
由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...
- Effeckt.css项目:CSS交互动画应用集锦
目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS波纹动画
波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...
- css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发外层hover,要用外层position 定义绝对定位,内层的hover跳出外层的div,这样视觉上就是两个单独的div,进行内外层联动。
css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...
- CSS变形动画
CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...
- CSS帧动画
CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...
- css keyframes动画属性设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- HTTP协议特性、HTML标签
HTTP协议 超文本传输协议,规定浏览器和服务端数据交互格式 四大特性 基于请求响应. 在TCP/IP协议之上的应用层协议. 无状态(不能保存用户信息,后来为了保存用户信息,诞生了cookie,ses ...
- 为什么网络损伤仪WANsim中没有流量通过
在使用网络损伤仪 WANsim 的过程中,有时候发现网损仪中没有流量通过.有些小伙伴可能会想:自己所有配置都是正确的 ,为什么会没有流量通过呢? 有可能,是你忽略了一些东西. 下面,我总结了一些导致网 ...
- NOIP 模拟 7 寿司
题解 题目 这道题考试的时候直接打暴力,结果暴力连样例都过不了,最后放上去一个玄学东西,骗了 \(5pts\). 正解: 此题中我们可以看到原序列是一个环,所以我们要把它拆成一条链,那么我们需要暴力枚 ...
- 题解 UVA10225 Discrete Logging
本题是一道 \(BSGS\) 裸题,用于求解高次同余方程,形如 \(a^x\equiv b(\mod p)\),其中 \(a\),\(p\) 互质(不互质还有 \(EXBSGS\)). 建议多使用 \ ...
- 题解 [SDOI2010]所驼门王的宝藏
传送门 保分题再度爆零,自闭ing×2 tarjan没写vis数组,点权算的也有点问题 这题情况3的连边有点麻烦,考场上想了暴力想了二分就是没想到可以直接拿map水过去 不过map果然贼慢,所以这也是 ...
- 在docker安装tomcat的时候,报错:Caused by: java.lang.IllegalArgumentException: The AJP Connector is configured with secretRequired="true
初识docker,试着在docker中安装tomcat(安装的tomcat8.5),并且挂载到宿主机的相关目录下,结果启动的时候报错: 12-May-2020 01:14:34.061 SEVERE ...
- VirtualBox-虚拟硬盘扩容-win7
问题: 我在VirtualBox下搭建的win7系统只设置了一个C盘,当初只给硬盘分配32G,如今深受生活的毒打,发现只剩5G可用,装个PS都费劲. 我要扩容,扩容! 当前环境: VirtualBox ...
- TP6 服务器响应500时没有错误信息的解决方案
重点!!!! 首先,确认你的电脑管理员账户是否含有中文!!!!!!就像下面这种:所以出现了没有错误提示 查看nginx日志显示\vendor\topthink\framework\src\thi ...
- [ES6深度解析]14:子类 Subclassing
我们描述了ES6中添加的新类系统,用于处理创建对象构造函数的琐碎情况.我们展示了如何使用它来编写如下代码: class Circle { constructor(radius) { this.radi ...
- ANSI C说明了三个用于存储空间动态分配的函数
1.1 malloc的全称是memory allocation,中文叫动态内存分配.原型:extern void *malloc(unsigned int num_bytes);说明:分配长度为num ...