line+css实现摇滚半程马拉松动画效果-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：line+css实现摇滚半程马拉松动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
:root {
  --opacity-start: 0.4;
  --minor-rotate-dur: 1s;
  --ferris-wheel-del: 0s;
  --ferris-wheel-dur: 20s;
  --eiffel-opacity-del: 1s;
  --eiffel-opacity-dur: 5s;
  --balloon-lines-del: 2s;
  --balloon-lines-dur: 4s;
  --luxor-light-del: 3s;
  --luxor-light-dur: 5s;
  --sign-opacity-del: 5s;
  --sign-opacity-dur: 10s;
  --excalibur-opacity-del: 7s;
  --excalibur-opacity-dur: 10s;
}

body {
  background-color: #222;
  display: flex;
  justify-content: center;
}

.rnr {
  height: 95vh;
  margin-top: 1vh;
}

#ferris-wheel #wheel {
  transform-origin: 600.98px 658.5px;
  transform: rotate(0deg);
  animation: ferris-wheel var(--ferris-wheel-dur) linear var(--ferris-wheel-del) infinite;
}
@keyframes ferris-wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#diamond {
  transform-box: fill-box;
  transform-origin: center center;
  transform: rotate(0deg);
  animation: shake-left var(--minor-rotate-dur) linear infinite;
}

#martini-glass {
  transform-box: fill-box;
  transform-origin: center center;
  transform: rotate(0deg);
  animation: shake-left var(--minor-rotate-dur) linear infinite;
}

#music-note {
  transform-box: fill-box;
  transform-origin: center center;
  transform: rotate(0deg);
  animation: shake-right var(--minor-rotate-dur) linear infinite;
}

#welcome-sign .sign-letter {
  opacity: var(--opacity-start);
}
#welcome-sign #sign-outline {
  opacity: 1;
}
#welcome-sign #sign-outline line, #welcome-sign #sign-outline path {
  animation: opacity-sign-outline var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-outline {
  0%, 55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-w {
  animation: opacity-sign-w var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-w {
  0%, 9.9% {
    opacity: var(--opacity-start);
  }
  10%, 55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-e-1 {
  animation: opacity-sign-e-1 var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-e-1 {
  0%, 14.9% {
    opacity: var(--opacity-start);
  }
  15%, 55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-l {
  animation: opacity-sign-l var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-l {
  0%, 19.9% {
    opacity: var(--opacity-start);
  }
  20% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-c {
  animation: opacity-sign-c var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-c {
  0%, 24.9% {
    opacity: var(--opacity-start);
  }
  25% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-o {
  animation: opacity-sign-o var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-o {
  0%, 29.9% {
    opacity: var(--opacity-start);
  }
  30% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-m {
  animation: opacity-sign-m var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-m {
  0%, 34.9% {
    opacity: var(--opacity-start);
  }
  35% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #sign-e-2 {
  animation: opacity-sign-e-2 var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-e-2 {
  0%, 39.9% {
    opacity: var(--opacity-start);
  }
  40% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#welcome-sign #welcome-date {
  animation: opacity-sign-date var(--sign-opacity-dur) linear var(--sign-opacity-del) infinite;
}
@keyframes opacity-sign-date {
  0%, 44.9% {
    opacity: var(--opacity-start);
  }
  45% {
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  55.1%, 58% {
    opacity: var(--opacity-start);
  }
  58.1%, 61% {
    opacity: 1;
  }
  61.1%, 64% {
    opacity: var(--opacity-start);
  }
  64.1%, 99.9% {
    opacity: 1;
  }
  100% {
    opacity: var(--opacity-start);
  }
}
#eiffel-tower #eiffel-tower-1 {
  animation: opacity-eiffel-1 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-1 {
  0%, 10% {
    opacity: var(--opacity-start);
  }
  10.1%, 100% {
    opacity: 1;
  }
}
#eiffel-tower #eiffel-tower-2 {
  animation: opacity-eiffel-2 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-2 {
  0%, 15% {
    opacity: var(--opacity-start);
  }
  15.1%, 100% {
    opacity: 1;
  }
}
#eiffel-tower #eiffel-tower-3 {
  animation: opacity-eiffel-3 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-3 {
  0%, 20% {
    opacity: var(--opacity-start);
  }
  20.1%, 100% {
    opacity: 1;
  }
}
#eiffel-tower #eiffel-tower-4 {
  animation: opacity-eiffel-4 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-4 {
  0%, 25% {
    opacity: var(--opacity-start);
  }
  25.1%, 100% {
    opacity: 1;
  }
}
#eiffel-tower #eiffel-tower-5 {
  animation: opacity-eiffel-5 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-5 {
  0%, 30% {
    opacity: var(--opacity-start);
  }
  30.1%, 100% {
    opacity: 1;
  }
}
#eiffel-tower #eiffel-tower-6 {
  animation: opacity-eiffel-6 var(--eiffel-opacity-dur) linear var(--eiffel-opacity-del) infinite;
}
@keyframes opacity-eiffel-6 {
  0%, 35% {
    opacity: var(--opacity-start);
  }
  35.1%, 100% {
    opacity: 1;
  }
}
#heart {
  transform-box: fill-box;
  transform-origin: center center;
  transform: rotate(0deg);
  animation: shake-right var(--minor-rotate-dur) linear infinite;
}

#luxor #light-bg {
  opacity: var(--opacity-start);
}
#luxor #light #middle-light {
  stroke-dasharray: 116;
  stroke-dashoffset: 0;
  animation: luxor-light-middle var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-middle {
  0% {
    stroke-dashoffset: 116;
  }
  10%, 70% {
    stroke-dashoffset: 0;
  }
  70.1%, 100% {
    stroke-dashoffset: 116;
  }
}
#luxor #light #left-yellow-light {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: luxor-light-left-yellow var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-left-yellow {
  0% {
    stroke-dashoffset: 100;
  }
  10%, 70% {
    stroke-dashoffset: 0;
  }
  70.1%, 100% {
    stroke-dashoffset: 100;
  }
}
#luxor #light #right-yellow-light {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  animation: luxor-light-right-yellow var(--luxor-light-dur) linear var(--luxor-light-del) infinite;
}
@keyframes luxor-light-right-yellow {
  0% {
    str.........完整代码请登录后点击上方下载按钮下载查看