立即注册
 登录
切换到宽版
开阔云»论坛 › 群组 › 行业交流 › Web技术教程 › 纯CSS3实现圆圈动态发光特效动画的示例代码 ...
Web技术教程
群主admin 天启
网页技术交流
 
发新帖
楼主: 零五零八
查看: 875|回复: 0

[使用教程] 纯CSS3实现圆圈动态发光特效动画的示例代码

[复制链接]
零五零八 发表于 2021-4-7 20:47:21 | 显示全部楼层
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码，分享给大家，具体如下：


效果图：


1.gif


代码：


  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>纯CSS3实现圆圈动态发光特效动画</title>
  5.     <style>
  6.         body {
  7.             background-color: #000000;
  8.         }

  10.         @keyframes twinkling {
  11.             0% {
  12.                 opacity: 0.2;
  13.                 transform: scale(1);
  14.             }

  16.             50% {
  17.                 opacity: 0.5;
  18.                 transform: scale(1.12);
  19.             }

  21.             100% {
  22.                 opacity: 0.2;
  23.                 transform: scale(1);
  24.             }
  25.         }

  27.         .circle-wrap {
  28.             position: absolute;
  29.             left: 100px;
  30.             top: 100px;
  31.         }

  33.         .circle {
  34.             position: relative;
  35.             width: 24px;
  36.             height: 24px;
  37.         }

  39.         .small-circle {
  40.             border-radius: 50%;
  41.             width: 12px;
  42.             height: 12px;
  43.             background: #FF0033;
  44.             position: absolute;
  45.         }

  47.         .big-circle {
  48.             position: absolute;
  49.             top: -6px;
  50.             left: -6px;
  51.             width: 100%;
  52.             height: 100%;
  53.             border-radius: 50%;
  54.             background: #FF0033;
  55.             animation: twinkling 1s infinite ease-in-out;
  56.             animation-fill-mode: both;
  57.         }

  59.         @keyframes scale {
  60.             0% {
  61.                 transform: scale(1)
  62.             }

  64.             50%,
  65.             75% {
  66.                 transform: scale(3)
  67.             }

  69.             78%,
  70.             100% {
  71.                 opacity: 0
  72.             }
  73.         }

  75.         @keyframes scales {
  76.             0% {
  77.                 transform: scale(1)
  78.             }

  80.             50%,
  81.             75% {
  82.                 transform: scale(2)
  83.             }

  85.             78%,
  86.             100% {
  87.                 opacity: 0
  88.             }
  89.         }

  91.         .smallcircle2 {
  92.             position: absolute;
  93.             width: 12px;
  94.             height: 12px;
  95.             background-color: #ffffff;
  96.             border-radius: 50%;
  97.             top: 100px;
  98.             left: 200px;
  99.         }

  101.         .smallcircle2:before {
  102.             content: '';
  103.             display: block;
  104.             width: 12px;
  105.             height: 12px;
  106.             border-radius: 50%;
  107.             opacity: .4;
  108.             background-color: #ffffff;
  109.             animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
  110.         }

  112.         .bigcircle2 {
  113.             position: absolute;
  114.             width: 12px;
  115.             height: 12px;
  116.             border-radius: 50%;
  117.             opacity: .4;
  118.             background-color: #ffffff;
  119.             top: 100px;
  120.             left: 200px;
  121.             animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);
  122.         }

  124.         @keyframes scaless {
  125.             0% {
  126.                 transform: scale(1)
  127.             }

  129.             50%,
  130.             75% {
  131.                 transform: scale(3)
  132.             }

  134.             78%,
  135.             100% {
  136.                 opacity: 0
  137.             }
  138.         }

  140.         .item {
  141.             position: absolute;
  142.             width: 14px;
  143.             height: 14px;
  144.             background-color: #FFFF00;
  145.             border-radius: 50%;
  146.             top: 150px;
  147.             left: 100px;
  148.         }

  150.         .item:before {
  151.             content: '';
  152.             display: block;
  153.             width: 14px;
  154.             height: 14px;
  155.             border-radius: 50%;
  156.             opacity: .7;
  157.             background-color: #FFFF00;
  158.             animation: scaless 1s infinite cubic-bezier(0, 0, .49, 1.02);
  159.         }
  160.     </style>
  161. </head>
  162. <body>
  163.     <div class="circle-wrap">
  164.         <div class="circle">
  165.             <div class="big-circle"></div>
  166.             <div class="small-circle"></div>
  167.         </div>
  168.     </div>
  169.     <div class="smallcircle2"></div>
  170.     <div class="bigcircle2"></div>
  171.     <div class="item"></div>
  172. </body>
  173. </html>
复制代码


这个效果的具体实现主要是用到了CSS3 的animation
它共有8个属性：
animation-name 规定 @keyframes 动画的名称。
用来定义一个动画的名称。
如果要设置几个animation给一个元素，我们只需要以列表的形式，用逗号“，”隔开
animation-duration 动画时长
用来指定元素播放一个周期的动画所持续的时间长，单位为秒（s）或毫秒（ms），默认值为0
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation-delay 规定动画何时开始。默认是 0。允许负值，动画跳过 2 秒进入动画周期，也就是从2s的动画开始
animation-iteration-count 规定动画被播放的次数。默认是 1
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
综合起来简写


  1. animation : name duration timing-function delay iteration-count direction fill-mode play-state
复制代码


回复

举报

返回列表
快速回复 返回顶部 返回列表