欢迎来到3672js教程，我们关注js教程、js框架、js代码特效等。
> > 正文

记录--css3实现一个灯泡发光效果，在开始本文之前主要会

3672Js.Com2023-12-11 00:05 来源:未知 阅读:18142 关注度2

记录--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">

				

				





本站文章为3672js教程网友分享投稿，版权归原作者，欢迎任何形式的转载，但请务必注明出处。同时文章内容如有侵犯了您的权益，请联系我们处理。





			
相关内容
评论已被关闭