..."; 2. Set the CSS attribute to "@keyframes moveLine {0 % {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100%+100px)..." That's it."/> ..."; 2. Set the CSS attribute to "@keyframes moveLine {0 % {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100%+100px)..." That's it.">

Home >Web Front-end >Front-end Q&A >How to achieve horse racing with css

How to achieve horse racing with css

藏色散人
藏色散人Original
2023-01-31 09:18:011732browse

How to use CSS to achieve the horse racing light effect: 1. Create a div border with the code "

...
"; 2. By setting The css attribute is "@keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100% 100px)...".

How to achieve horse racing with css

The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer

How to use css to achieve horse racing?

css to achieve border marquee effect

First upload the renderings

How to achieve horse racing with css

1. First the whole div border

<div class="box horse_run">小马跑起来~</div>

2. Writing css style

.box {
  height: 300px;
  width: 400px;
  box-shadow: 0 0 3px orange;
  text-align: center;
  line-height: 280px;
}
 
.horse_run {
  background-image: linear-gradient(90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%), linear-gradient(0deg, rgb(62, 224, 84) 0%, rgba(196, 233, 64, 0) 100%), linear-gradient(-90deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 100%), linear-gradient(0deg, rgba(196, 233, 64, 0) 0%, rgb(62, 224, 84) 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;
}
 
@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;
  }
}

Recommended study: "css video tutorial"

The above is the detailed content of How to achieve horse racing with css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:What does css both mean?Next article:What does css both mean?