The introduction

I saw an effect earlier, a little thin line that goes all the way around the border, but it’s implemented in JavaScript. So I tried to write an effect that only needed CSS to run around the border, and without further ado, went straight to the renderings and code.

Running lantern effect diagram &Demo

Running code

HTML

<div class="box marquee-line">I am run horselight ^_^, click I can also view Demo oh</div>
Copy the code

CSS

@keyframes moveLine {
  0% {
    background-position: -100px 1px.calc(100% - 1px) -100px.calc(100% + 100px) calc(100% - 1px), 1px 0px; 5%} {background-position: 0px 1px.calc(100% - 1px) -100px.calc(100% + 100px) calc(100% - 1px), 1px -100px; 30%} {background-position: 100% 1px.calc(100% - 1px) -100px.calc(100% + 100px) calc(100% - 1px), 1px -100px; 35%} {background-position: calc(100% + 100px) 1px.calc(100% - 1px) 0px.calc(100% + 100px) calc(100% - 1px), 1px -100px; 50%} {background-position: calc(100% + 100px) 1px.calc(100% - 1px) 100%.calc(100% + 100px) calc(100% - 1px), -100px -100px; 55%} {background-position: calc(100% + 100px) 1px.calc(100% - 1px) calc(100% + 100px), 100% calc(100% - 1px), -100px calc(100% + 100px); 80%} {background-position: calc(100% + 100px) 1px.calc(100% - 1px) calc(100% + 100px), 0px calc(100% - 1px), 1px calc(100% + 100px); 85%} {background-position: calc(100% + 100px) 1px.calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 100%; 100%} {background-position: calc(100% + 100px) 1px.calc(100% - 1px) calc(100% + 100px), -100px calc(100% - 1px), 1px 0px; }}.marquee-line {
  background-image: linear-gradient(90 deg, rgba (0,0,0,0)0%.# 000 100%), linear-gradient(0 deg, # 000 0%, rgba (0,0,0,0)100%), linear-gradient(90 deg, rgba (0,0,0,0)0%.# 000 100%), linear-gradient(0 deg, rgba (0,0,0,0)0%.# 000 100%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 100px 4px.4px 100px.100px 4px.4px 100px;
  background-position: -100px 1px.calc(100% - 1px) -100px.calc(100% + 100px) calc(100% - 1px), 1px 0px;
  animation: moveLine 8s infinite linear;
  height: calc(100% - 2px);
  padding: 1px;
  background-clip: content-box;
}

.box {
  height: 300px;
  width: 400px;
  box-shadow: 0 0 3px orange;
  text-align: center;
  line-height: 280px;
}
Copy the code

You read that right, a single DOM, plus some CSS, achieves the effect shown above.

Style analysis and interpretation

As you can see from the CSS code above, this effect takes advantage of background’s ability to set multiple layers of background. Set four gradient backgrounds, one at each corner, and then control when the four gradient lines appear. You only need to write it once, and use the.marquee-line className where you want it to look like this, but it’s usually used on the body tag of a website, because it uses the background so it doesn’t block out any passing elements. The only downside is that, because you’re using pure CSS, the width and height movement rates are all written in percentages inside @keyframes moveLine. So it’s going to be different speeds at different heights and widths. The overall speed is set to animation-duration, which I wrote here as 8s.

Finally, CSS is powerful, heh heh

If you have any questions about the above code, please feel free to comment below. Thank you.