CSS实现不断扩大的圆点

桃扇骨 2022-09-01 13:58 199阅读 0赞

![请添加图片描述][4da1df1afb354f66a9f1d17e6ec070da.gif]

<html>
    
    <head>
      <meta charset="utf-8">
      <meta data-n-head="1" name="viewport" content="width=device-width, initial-scale=1">
      <style type="text/css"> body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background-color: #1f3244; } .container { width: 400px; height: 400px; } .pulse { background-color: coral; height: 200px; width: 200px; border-radius: 100%; position: relative; } .ring { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.8; animation: pulsing 2s ease-out infinite; } .ring:nth-of-type(1) { animation-delay: -0.5s; } .ring:nth-of-type(2) { animation-delay: -1s; } .ring:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulsing { 100% { transform: scale(1.75); opacity: 0; } } </style>
    </head>
    
    <body>
      <div class="container">
        <div class="pulse">
          <div class="ring"></div>
          <div class="ring"></div>
          <div class="ring"></div>
          <div class="ring"></div>
        </div>
    
      </div>
    
    </body>
    
    </html>

[4da1df1afb354f66a9f1d17e6ec070da.gif]: /images/20220829/8f667498fbdc41758d7febb6b19788ab.png

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关 ShaderJoy —— “圆点消散” 的实现【GLSL】

视频预览圆点消散特效设计思路首先我们需要把图像分成 N\N 的网格（N 即代码中的 dots），每个网格中的坐标 pos 的取值范围都是 \[0.0, 1.

- 日理万妓/ 2023年07月03日 04:38/ 0 赞/ 10 阅读

相关 css闪烁圆点

<html> <head> <style> .bling-2 { width:

怼烎@/ 2022年11月06日 07:55/ 0 赞/ 314 阅读

相关 CSS实现不断扩大的圆点

![请添加图片描述][4da1df1afb354f66a9f1d17e6ec070da.gif] <html> <head> <meta

桃扇骨/ 2022年09月01日 13:58/ 0 赞/ 200 阅读

相关 CSS3 3D圆点波浪动画js特效

[下载地址][Link 1] CSS3 3D圆点波浪动画特效是一款圆点矩阵波浪滚动，3D粒子波浪动画特效。 ![4308a7cb79605fd30938276368fc6b

一时失言乱红尘/ 2022年08月28日 04:53/ 0 赞/ 251 阅读

相关 CSS知识点个人总结（不断更新）

> —自用笔记：本文属于自用笔记，错误之处恳请留言指出— 1、CSS中`!important`的使用 CSS的原理：我们知道，CSS写在不同的地方有不同的优先级， .c

客官°小女子只卖身不卖艺/ 2022年06月15日 12:25/ 0 赞/ 251 阅读

相关微信Markdown-here的CSS样式——不断调整

个人采用css样式代码： / NOTE: - The use of browser-specific styles (-moz-, -webkit-) sho

柔光的暖阳◎/ 2022年06月02日 08:39/ 0 赞/ 175 阅读

相关 Android 圆点导航+引导页的实现

圆点导航的实现参照上一篇博文：https://blog.csdn.net/xialong\_927/article/details/80332024 1、viewpager

古城微笑少年丶/ 2022年05月25日 14:16/ 0 赞/ 229 阅读

相关 Android 圆点导航的实现

1、圆点 shape\_step\_bg.xml <?xml version="1.0" encoding="utf-8"?> <shape xmlns:a

╰半橙微兮°/ 2022年05月25日 14:12/ 0 赞/ 219 阅读

相关如何用纯 CSS 创作一组昂首阔步的圆点

![在这里插入图片描述][20181207113044592.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

清疚/ 2022年04月08日 08:29/ 0 赞/ 317 阅读

相关 CSS3 工具推荐（不断更）

收集一些实用的CSS工具，不断更新中，请持续关注。一、代码生成工具 1.CSS Matic ![20130514130728682][] [CSS

你的名字/ 2022年02月20日 06:19/ 0 赞/ 304 阅读