CSS3 动画(圆点闪烁动画效果的实现)

最新推荐文章于 2024-05-31 11:07:26 发布

人间草木96

最新推荐文章于 2024-05-31 11:07:26 发布

阅读量1.2w

点赞数 2

分类专栏：面试总结 css

本文链接：https://blog.csdn.net/qq_43258252/article/details/102958790

版权

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...

摘要由CSDN通过智能技术生成

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  .point {
    width: 50px;
    height: 50px;
    background-color: #2ea598;
    position: relative;
    border-radius: 50%;
  }

  /* 设置动画前颜色 */
  .point-flicker:after {
    background-color: #2ea598;
  }

  /* 设置动画后颜色 */
  .point-flicker:before {
    background-color: rgba(0, 168, 253, 0.2);
  }

  /* 设置动画 */
  .point-flicker:before,
  .point-flicker:after {
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 50%;
    /* CSS3

最低0.47元/天解锁文章

人间草木96

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
CSS3 动画(圆点闪烁动画效果的实现)

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
复制链接

扫一扫