css实现一个广告灯牌

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

昨天下班回家，走到平时经过的一条街道，有着饭店、饮品店、小吃店、理发店等各种混杂的店铺，看着好多店铺都闪烁着绚丽的灯牌，在雨夜的笼罩下，显得格外有生活气息。今天来简单实现一个广告灯牌

效果展示

code.juejin.cn/pen/7146948…

具体实现

1. 页面结构

由灯牌名字和灯牌四周闪烁灯光的光束组成

<div class="light">
    我的店铺
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

2. 核心css代码

a. 灯牌整体使用黑色背景，再用border属性设置一个亮色的边框

b. 灯牌文字加一个动画效果，一开始的颜色为透明色，最后颜色变成白色，并加上文字阴影效果

.light {
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  margin: 100px auto;
  position: relative;
  overflow: hidden;
  background: #050901;
  transition: all 0.5s;
}
.light::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190px;
  height: 90px;
  transform: translate(-50%,-50%);
  border: 3px dashed #18dcff;
}
.light  span{
  font-size: 24px;
  letter-spacing: 10px;
  margin-left: 10px;
  animation: words 1s steps(2, jump-none)  infinite;
}
@keyframes words {
  from{
    color: transparent;
  }
  to{
    color: #fff;
    text-shadow: 0 0 10px #ff3838,0 0 20px #ff3838,0 0 30px #ff3838,0 0 40px #ff3838;
  }
}

steps(number, position)

number 整数值，表示把动画分成了多少段。

position 可选参数，表示动画跳跃执行是在时间段的开始还是结束。 属性值jump-none表示动画开始时和结束时都不发生跳跃，然后中间部分等分跳跃。

c. 实现灯牌四周的运动光束

该运动光速是由四条光速沿着不同方向运动之后叠加的效果，使用绝对定位控制四条光速的位置，添加不同方向的从透明到亮色的渐变背景色。

第一条光速，添加从左到右的动画；第二条光速，延迟一点时间，添加从上到下的动画；第三条光速，比第二条光束延迟多一点时间，添加从右到左的动画；第四条光速，再比第三条光束延迟多一点时间，添加从下到上的动画

.light div {
  width: 140px;
  position: absolute;
}

.light div:nth-child(1) {
  width: 100%;
  height: 4px;
  top: 2px;
  left: -100%;
  /* 表示背景色向右从透明色变成 #18dcff */
  background: linear-gradient(to right, transparent, #18dcff);
  animation: animateLeft 1s linear infinite;
}

.light div:nth-child(2) {
  width: 4px;
  height: 100%;
  top: -100%;
  right: 2px;
  background: linear-gradient(to bottom, transparent, #18dcff);
  animation: animateTop 1s linear infinite;
  animation-delay: 0.25s;
}

.light div:nth-child(3){
  width: 100%;
  height: 4px;
  bottom: 2px;
  right: -100%;
  background: linear-gradient(to left, transparent, #18dcff);
  animation: animateRignt 1s linear infinite;
  animation-delay: 0.5s;
}

.light div:nth-child(4) {
  width: 4px;
  height: 100%;
  bottom: -100%;
  left: 2px;
  background: linear-gradient(to top, transparent, #18dcff);
  animation: animateBottom 1s linear infinite;
  animation-delay: 0.75s;
}

@keyframes animateLeft {
  0% {
    left: -100%;
  }

  50%,
  100% {
    left: 100%;
  }
}

@keyframes animateTop {
  0% {
    top: -100%;
  }

  50%,
  100% {
    top: 100%;
  }
}

@keyframes animateRignt {
  0% {
    right: -100%;
  }

  50%,
  100% {
    right: 100%;
  }
}

@keyframes animateBottom {
  0% {
    bottom: -100%;
  }

  50%,
  100% {
    bottom: 100%;
  }
}

linear-gradient 是一种实现线性渐变的属性 。