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

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

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

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

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

正文开始...

keyframes 关键帧

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

@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%

使用该动画

1 2 3

.fadeout {   animation: fadeOut 1s infinite; }

1 2 3

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

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

循环动画animation-iteration-count:infinite

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

@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 动画的时长

1 2 3 4 5 6 7 8 9 10 11 12 13

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

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

animation-delay 延时动画

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

1 2 3 4 5 6

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

animation-play-state 暂停动画

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

1 2 3 4 5 6 7 8 9 10 11 12

.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; }

监听动画的事件

1 2 3 4 5 6 7 8 9 10

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);

发光效果

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

@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; }

1 2 3

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

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

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

本文转载于:

https://juejin.cn/post/7217373379343302713

相关阅读：

1、https://blog.wanwuguiyi.com/web-css-hand/

2、https://blog.wanwuguiyi.com/linear-gradient02/

3、https://blog.wanwuguiyi.com/css-line-wrap/