Comment réaliser des courses de chevaux avec CSS

Comment utiliser CSS pour obtenir un effet de course de chevaux : 1. Créez une bordure div avec le code "

...

" 2. Définissez l'attribut CSS sur " @keyframes moveLine {0% {background-position: -100px 1px, calc(100% - 1px) -100px, calc(100%+100px)..." C'est tout.

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment réaliser des courses de chevaux avec du CSS ?

css pour obtenir un effet de chapiteau de bordure

Tout d'abord, les rendus

1 D'abord la bordure div entière

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

2. Écrivez le style CSS

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

Apprentissage recommandé : "Tutoriel vidéo CSS. "

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!