记录--css3实现一个灯泡发光效果

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

产品说，我需要灯泡发光效果，实现这个需求有点难，发光效果挑战难度有点大，但还是可以实现。

在开始本文之前主要会会涉及以下知识

• css3的动画侦
• 写一个动画，模拟一个发光效果

正文开始...

keyframes 关键帧

在开始动画之前，我们需要了解动画桢keyframes,能够控制动画序列的步骤

比如我们需要一个淡入淡出,且文字颜色会逐渐变化

 @keyframes fadeOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.3;
    color: red;
  }
  40% {
    opacity: 0.5;
    color: aqua;
  }
  60% {
    opacity: 1;
    color: green;
  }
  80% {
    opacity: 0.5;
    color: palegreen;
  }
  90% {
    opacity: 0.3;
    color: blue;
  }
  100% {
    opacity: 0;
    color: cadetblue;
  }
}

我们看到@keyframes name这个name就是动画名称，并且在动画桢中我们是使用0%～100%

使用该动画

.fadeout {
  animation: fadeOut 1s infinite;
}

<div id="app">
  <div class="fadeout">Web技术学苑</div>
 </div>

我们看到这个动画就在一直不停的循环

循环动画animation-iteration-count:infinite

我们看到css3的动画桢一直在执行，主要是因为infinite这个属性的设置，并且animation: fadeOut 1s infinite

@keyframes itemAni {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-30px);
    }
    100% {
      transform: translateY(-60px);
    }
  }
  .item-wrap {
    height: 30px;
    overflow: hidden;
  }
  .item {
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .item:nth-of-type(2n) {
    background-color: red;
  }
  .item:nth-of-type(2n+1) {
    background-color: pink;
  }
  .item-wrap .item {
    animation: itemAni 2s infinite;
  }

animation-duration 动画的时长

@keyframes fadeLeft {
  0% {
    margin-left: 100%;
  }
  100% {
    margin-left: 0;
  }
}
.text {
  animation-name: fadeLeft;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

 <div class="text">欢迎关注公众号：Web技术学苑</div>

animation-delay 延时动画

如果我想让一个动画延时多少秒才开始执行,那么你只需要设置animation-delay就行

 .text {
  animation-name: fadeLeft;
  animation-duration: 3s;
  animation-delay: 4s; // 延迟4s后才开始执行
  animation-iteration-count: ease;
}

animation-play-state 暂停动画

• 暂停动画,animation-play-state:paused

 .text {
  animation-name: fadeLeft;
  animation-duration: 3s;
  animation-delay: 4s;
  animation-iteration-count: ease;
}
.text:hover {
    animation-play-state:paused;
}
.text:active {
    animation-play-state:running;
}

监听动画的事件

 var textDom = document.querySelector(".text");
textDom.addEventListener("animationstart", function () {
        console.log('animationstart')
      }, false);
textDom.addEventListener("animationend", function () {
        console.log('animationend')
      }, false);
textDom.addEventListener("animationiteration", function () {
    console.log('animationiteration');
  }, false);

发光效果

@keyframes light {
    0% {
      transform: scale(0.5);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(0);
    }
  }
 .bulb {
  position: relative;
  font-size: 50px;
  display: inline-block;
  width: 50px;
  height: 50px;
  z-index: 2;
}
.bulb::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
filter: blur(10px);
display: inline-block;
z-index: 1;
width: 50px;
height: 50px;
border-radius: 50%;
background: radial-gradient(#feffbe 25%, transparent 100%);
animation: light 5s ease infinite;
}

<div>
    <span class="bulb">💡</span>
 </div>

我们用一个伪类去模拟发光，并且用了filter:blur(10px)来模糊背景，在背景设置上使用了一个radial-gradient径向渐变,从一开始的缩小，然后放大，最后再缩小模拟一个放光的效果

差强人意，一个发光的效果就已经实现了

本文转载于:

https://juejin.cn/post/7217373379343302713

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。