网页技术交流
 
发新帖
楼主: 零五零八
查看: 572|回复: 0

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

[复制链接]
零五零八 发表于 2021-3-22 20:16:52 | 显示全部楼层
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下:
效果图:
     
1.gif



代码:
   
  1. <font size="4" style="font-weight: normal;" face="宋体"><!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <title>纯CSS3实现圆圈动态发光特效动画</title>
  5.     <style>
  6.         body {
  7.             background-color: #000000;
  8.         }

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

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

  18.             100% {
  19.                 opacity: 0.2;
  20.                 transform: scale(1);
  21.             }
  22.         }

  23.         .circle-wrap {
  24.             position: absolute;
  25.             left: 100px;
  26.             top: 100px;
  27.         }

  28.         .circle {
  29.             position: relative;
  30.             width: 24px;
  31.             height: 24px;
  32.         }

  33.         .small-circle {
  34.             border-radius: 50%;
  35.             width: 12px;
  36.             height: 12px;
  37.             background: #FF0033;
  38.             position: absolute;
  39.         }

  40.         .big-circle {
  41.             position: absolute;
  42.             top: -6px;
  43.             left: -6px;
  44.             width: 100%;
  45.             height: 100%;
  46.             border-radius: 50%;
  47.             background: #FF0033;
  48.             animation: twinkling 1s infinite ease-in-out;
  49.             animation-fill-mode: both;
  50.         }

  51.         @keyframes scale {
  52.             0% {
  53.                 transform: scale(1)
  54.             }

  55.             50%,
  56.             75% {
  57.                 transform: scale(3)
  58.             }

  59.             78%,
  60.             100% {
  61.                 opacity: 0
  62.             }
  63.         }

  64.         @keyframes scales {
  65.             0% {
  66.                 transform: scale(1)
  67.             }

  68.             50%,
  69.             75% {
  70.                 transform: scale(2)
  71.             }

  72.             78%,
  73.             100% {
  74.                 opacity: 0
  75.             }
  76.         }

  77.         .smallcircle2 {
  78.             position: absolute;
  79.             width: 12px;
  80.             height: 12px;
  81.             background-color: #ffffff;
  82.             border-radius: 50%;
  83.             top: 100px;
  84.             left: 200px;
  85.         }

  86.         .smallcircle2:before {
  87.             content: '';
  88.             display: block;
  89.             width: 12px;
  90.             height: 12px;
  91.             border-radius: 50%;
  92.             opacity: .4;
  93.             background-color: #ffffff;
  94.             animation: scale 1s infinite cubic-bezier(0, 0, .49, 1.02);
  95.         }

  96.         .bigcircle2 {
  97.             position: absolute;
  98.             width: 12px;
  99.             height: 12px;
  100.             border-radius: 50%;
  101.             opacity: .4;
  102.             background-color: #ffffff;
  103.             top: 100px;
  104.             left: 200px;
  105.             animation: scales 1s infinite cubic-bezier(0, 0, .49, 1.02);
  106.         }

  107.         @keyframes scaless {
  108.             0% {
  109.                 transform: scale(1)
  110.             }

  111.             50%,
  112.             75% {
  113.                 transform: scale(3)
  114.             }

  115.             78%,
  116.             100% {
  117.                 opacity: 0
  118.             }
  119.         }

  120.         .item {
  121.             position: absolute;
  122.             width: 14px;
  123.             height: 14px;
  124.             background-color: #FFFF00;
  125.             border-radius: 50%;
  126.             top: 150px;
  127.             left: 100px;
  128.         }

  129.         .item:before {
  130.             content: '';
  131.             display: block;
  132.             width: 14px;
  133.             height: 14px;
  134.             border-radius: 50%;
  135.             opacity: .7;
  136.             background-color: #FFFF00;
  137.             animation: scaless 1s infinite cubic-bezier(0, 0, .49, 1.02);
  138.         }
  139.     </style>
  140. </head>
  141. <body>
  142.     <div class="circle-wrap">
  143.         <div class="circle">
  144.             <div class="big-circle"></div>
  145.             <div class="small-circle"></div>
  146.         </div>
  147.     </div>
  148.     <div class="smallcircle2"></div>
  149.     <div class="bigcircle2"></div>
  150.     <div class="item"></div>
  151. </body>
  152. </html></font>
复制代码

这个效果的具体实现主要是用到了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”。



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