html5 css3光晕

最新推荐文章于 2024-08-19 09:33:22 发布

转载最新推荐文章于 2024-08-19 09:33:22 发布 · 3.6k 阅读

43 篇文章

订阅专栏

关于html5 css3实现光晕，首先我们想有个圆，这个圆向外发送圆环，如果是光晕，至少是2个圆环，不同的释放，圆环就是一个圆，只有border有颜色，其他的没有颜色，即background-color:none ,仅仅是border：1px yellow solid ，这样的圆环太死板，需要加个阴影box-shadow,既然是光晕，那么就需要有动画animation,需要一直动：infinite ，运行事件1.5秒，第二个圆环，延迟运行animation-delay：0.6，普通动画是只执行一次，@keyframes可以运行无限次，圆环scale(1) 到scale(8),transform

<!DOCTYPE html>
<html >

<head>
   <meta charset="UTF-8">
   <title>点扩散</title>
   <style>
       #circle
       {
           width:4px;
           height:4px;
           background-color:#ffffff;
           border-radius:50%;
           border:6px solid blue;
           position: relative;
           margin:100px;
       }
       #circle p,#circle span
       {
           position: absolute;
           width:4px;
           height:4px;
           border-radius:50%;

           box-shadow: 0px 0px 1px #009FD9;
           animation: halo 1.5s infinite;
           margin:0px;
           padding:0px;
       }

       #circle span
       {
           animation-delay:0.1s;
       }

       #circle #p1
       {
           animation-delay:0.2s;
       }


       #circle #span1
       {
           animation-delay:0.8s;
       }


       @keyframes halo
       {
           10% { transform:scale(1)}
           100% { transform:scale(8)}
       }