×

CSS3动画:圆形脉冲动画

作者:Web前端之家2021.02.08来源:Web前端之家浏览:1507评论:0
关键词:css3动画html5
微信公众号

微信公众号

在平时项目中,脉冲动画经常会被用到,比如地图上标记某个地点,或者在页面上突显某个元素等等,都会用上,今天分享下一个简单的圆形脉冲动画的DEMO。

12.jpg

这是一个涉及较少的动画,但仅显示了一些CSS即可完成的工作。

首先,我们需要绕圈。首先添加一些HTML:

<div class="pulse"></div>

现在,我们可以使用一些CSS创建圈子:

.pulse {
    position:absolute;
    left:50%;
    top:50%;
    transform:scale(1.5,1.5) translate(-50%,-50%);
    height: 150px;
    width: 150px;
    background: #a83f39;
    border-radius: 50%;
  }

到目前为止,这是我们所拥有的:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画:圆形脉冲动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
        background: #e1ad01;
      }

      .pulse {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: scale(1.5, 1.5) translate(-50%, -50%);
        height: 150px;
        width: 150px;
        background: #a83f39;
        border-radius: 50%;
      }
    </style>
</head>
<body>
  <div class="pulse">

  </div>

<script>
        
</script>
</body>
</html>

要创建脉冲动画,我们使用box-shadow属性。如果您从未使用box-shadow过,Mozilla会提供一些出色的文档:

@keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
    }
    70% {
        box-shadow: 0 0 0 50px rgba(168, 63, 57, 0);
    }
    100% {
        box-shadow: 0 0 0 150px rgba(168, 63, 57, 0);
    }
  }

要使用此动画,我们只需将其添加到.pulse


.pulse {
    ....
    animation: pulse 2s infinite;
 }

现在,我们创建了脉冲动画。看下完整的DEMO特效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3动画:圆形脉冲动画 - Web前端之家https://www.jiangweishan.com</title>
    <style>
     body {
        background: #e1ad01;
      }

      .pulse {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: scale(1.5, 1.5) translate(-50%, -50%);
        height: 150px;
        width: 150px;
        background: #a83f39;
        border-radius: 50%;
        animation: pulse 2s infinite;
      }

      @keyframes pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(168, 63, 57, 0.4);
        }
        70% {
          box-shadow: 0 0 0 50px rgba(168, 63, 57, 0);
        }
        100% {
          box-shadow: 0 0 0 150px rgba(168, 63, 57, 0);
        }
      }

    </style>
</head>
<body>
  <div class="pulse">

  </div>

<script>
        
</script>
</body>
</html>

大家试试效果,是不是很酷呢?赶紧应用到你们的项目中去吧!!!!

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/css3htmlsdf20210208a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

  • Web前端之家

    请持续关注Web前端之家。...

  • Y4K

    谢谢指导,这下背景问题解决了!...

  • Web前端之家

    要用起来才可以....

  • 钢板

    只有持续的学习和应用才能把知识牢固起来www.jinanxingya.com...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria