svg实现一马平川动画效果
代码语言：html
所属分类：动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Clip Clop Clippity Clop</title>
<style>
@charset "UTF-8";
:root {
font-size: 22vmin;
--outlines: transparent;
--speed: 0.8s;
--delay-gap: 8;
--horse-width: 3.8rem;
--horse-height: 2.5rem;
--color-horse: rgba(50, 50, 50, 1);
--color-horse-back: rgba(30, 30, 30, 1);
--color-hair: rgba(70, 70, 70, 1);
--color-hoof: rgba(0, 0, 0, 1);
--color-dust: #AF540B;
--color-floor: #F1D1AF;
--color-sky: #C4C4FF;
}
input[type=checkbox] {
opacity: 0;
}
input[type=checkbox]:checked ~ label {
--outlines: white;
--speed: 8s;
--color-horse: rgba(50, 50, 50, 0.3);
--color-horse-back: rgba(30, 30, 30, 0.3);
--color-hair: rgba(70, 70, 70, 0.3);
--color-hoof: rgba(0, 0, 0, 0.3);
}
* {
position: relative;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: linear-gradient(0deg, #ffa44e 30%, #00d4ff 100%);
}
body {
display: flex;
justify-content: center;
align-items: center;
}
label {
cursor: pointer;
}
.dust {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: calc(((100vh - var(--horse-height)) / 2) + 0.02rem);
overflow: hidden;
}
.floor {
background-color: var(--color-floor);
background: linear-gradient(9deg, #e8d9be 0%, #A95108 100%);
position: fixed;
top: calc(50vh + (var(--horse-height) / 2) - 0.5rem);
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.dust .particle {
background-color: var(--color-dust);
width: 0.05rem;
height: 0.05rem;
border-radius: 50%;
position: absolute;
border: 1px dashed var(--outlines);
top: calc(50vh + (var(--horse-height) / 2) - 0.05rem);
left: calc(50vw - (var(--horse-width) / 2) + (var(--horse-width) * 0.15));
}
.dust.back .particle {
left: calc(50vw - (var(--horse-width) / 2) + (var(--horse-width) * 0.5));
}
@-webkit-keyframes particle-animation-1 {
100% {
-webkit-transform: translateX(calc(0.5074098275 * var(--horse-width) )) translateY(calc(-0.0052842981 * (var(--horse-height) / 5))) scale(5) rotate(-5.5deg);
transform: translateX(calc(0.5074098275 * var(--horse-width) )) translateY(calc(-0.0052842981 * (var(--horse-height) / 5))) scale(5) rotate(-5.5deg);
opacity: 0;
}
}
@keyframes particle-animation-1 {
100% {
-webkit-transform: translateX(calc(0.5074098275 * var(--horse-width) )) translateY(calc(-0.0052842981 * (var(--horse-height) / 5))) scale(5) rotate(-5.5deg);
transform: translateX(calc(0.5074098275 * var(--horse-width) )) translateY(calc(-0.0052842981 * (var(--horse-height) / 5))) scale(5) rotate(-5.5deg);
opacity: 0;
}
}
.particle:nth-child(1) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-1 var(--speed) ease-out infinite;
animation: particle-animation-1 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.01s);
animation-delay: calc((var(--speed) * 0.1) + 0.01s);
}
.dust.back .particle:nth-child(1) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.01s);
animation-delay: calc((var(--speed) * 0.68) + 0.01s);
}
@-webkit-keyframes particle-animation-2 {
100% {
-webkit-transform: translateX(calc(0.6392046967 * var(--horse-width) )) translateY(calc(-0.0072690912 * (var(--horse-height) / 5))) scale(4) rotate(-20.5deg);
transform: translateX(calc(0.6392046967 * var(--horse-width) )) translateY(calc(-0.0072690912 * (var(--horse-height) / 5))) scale(4) rotate(-20.5deg);
opacity: 0;
}
}
@keyframes particle-animation-2 {
100% {
-webkit-transform: translateX(calc(0.6392046967 * var(--horse-width) )) translateY(calc(-0.0072690912 * (var(--horse-height) / 5))) scale(4) rotate(-20.5deg);
transform: translateX(calc(0.6392046967 * var(--horse-width) )) translateY(calc(-0.0072690912 * (var(--horse-height) / 5))) scale(4) rotate(-20.5deg);
opacity: 0;
}
}
.particle:nth-child(2) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-2 var(--speed) ease-out infinite;
animation: particle-animation-2 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.02s);
animation-delay: calc((var(--speed) * 0.1) + 0.02s);
}
.dust.back .particle:nth-child(2) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.02s);
animation-delay: calc((var(--speed) * 0.68) + 0.02s);
}
@-webkit-keyframes particle-animation-3 {
100% {
-webkit-transform: translateX(calc(0.2557206625 * var(--horse-width) )) translateY(calc(-0.005271258 * (var(--horse-height) / 5))) scale(5) rotate(-38.5deg);
transform: translateX(calc(0.2557206625 * var(--horse-width) )) translateY(calc(-0.005271258 * (var(--horse-height) / 5))) scale(5) rotate(-38.5deg);
opacity: 0;
}
}
@keyframes particle-animation-3 {
100% {
-webkit-transform: translateX(calc(0.2557206625 * var(--horse-width) )) translateY(calc(-0.005271258 * (var(--horse-height) / 5))) scale(5) rotate(-38.5deg);
transform: translateX(calc(0.2557206625 * var(--horse-width) )) translateY(calc(-0.005271258 * (var(--horse-height) / 5))) scale(5) rotate(-38.5deg);
opacity: 0;
}
}
.particle:nth-child(3) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-3 var(--speed) ease-out infinite;
animation: particle-animation-3 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.03s);
animation-delay: calc((var(--speed) * 0.1) + 0.03s);
}
.dust.back .particle:nth-child(3) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.03s);
animation-delay: calc((var(--speed) * 0.68) + 0.03s);
}
@-webkit-keyframes particle-animation-4 {
100% {
-webkit-transform: translateX(calc(0.6477696155 * var(--horse-width) )) translateY(calc(-0.0020339322 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
transform: translateX(calc(0.6477696155 * var(--horse-width) )) translateY(calc(-0.0020339322 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
opacity: 0;
}
}
@keyframes particle-animation-4 {
100% {
-webkit-transform: translateX(calc(0.6477696155 * var(--horse-width) )) translateY(calc(-0.0020339322 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
transform: translateX(calc(0.6477696155 * var(--horse-width) )) translateY(calc(-0.0020339322 * (var(--horse-height) / 5))) scale(6) rotate(-158deg);
opacity: 0;
}
}
.particle:nth-child(4) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-4 var(--speed) ease-out infinite;
animation: particle-animation-4 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.04s);
animation-delay: calc((var(--speed) * 0.1) + 0.04s);
}
.dust.back .particle:nth-child(4) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.04s);
animation-delay: calc((var(--speed) * 0.68) + 0.04s);
}
@-webkit-keyframes particle-animation-5 {
100% {
-webkit-transform: translateX(calc(0.7485402266 * var(--horse-width) )) translateY(calc(-0.0078002419 * (var(--horse-height) / 5))) scale(4) rotate(-22.5deg);
transform: translateX(calc(0.7485402266 * var(--horse-width) )) translateY(calc(-0.0078002419 * (var(--horse-height) / 5))) scale(4) rotate(-22.5deg);
opacity: 0;
}
}
@keyframes particle-animation-5 {
100% {
-webkit-transform: translateX(calc(0.7485402266 * var(--horse-width) )) translateY(calc(-0.0078002419 * (var(--horse-height) / 5))) scale(4) rotate(-22.5deg);
transform: translateX(calc(0.7485402266 * var(--horse-width) )) translateY(calc(-0.0078002419 * (var(--horse-height) / 5))) scale(4) rotate(-22.5deg);
opacity: 0;
}
}
.particle:nth-child(5) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-5 var(--speed) ease-out infinite;
animation: particle-animation-5 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.05s);
animation-delay: calc((var(--speed) * 0.1) + 0.05s);
}
.dust.back .particle:nth-child(5) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.05s);
animation-delay: calc((var(--speed) * 0.68) + 0.05s);
}
@-webkit-keyframes particle-animation-6 {
100% {
-webkit-transform: translateX(calc(0.698444156 * var(--horse-width) )) translateY(calc(-0.0041138637 * (var(--horse-height) / 5))) scale(5) rotate(-173deg);
transform: translateX(calc(0.698444156 * var(--horse-width) )) translateY(calc(-0.0041138637 * (var(--horse-height) / 5))) scale(5) rotate(-173deg);
opacity: 0;
}
}
@keyframes particle-animation-6 {
100% {
-webkit-transform: translateX(calc(0.698444156 * var(--horse-width) )) translateY(calc(-0.0041138637 * (var(--horse-height) / 5))) scale(5) rotate(-173deg);
transform: translateX(calc(0.698444156 * var(--horse-width) )) translateY(calc(-0.0041138637 * (var(--horse-height) / 5))) scale(5) rotate(-173deg);
opacity: 0;
}
}
.particle:nth-child(6) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-6 var(--speed) ease-out infinite;
animation: particle-animation-6 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.06s);
animation-delay: calc((var(--speed) * 0.1) + 0.06s);
}
.dust.back .particle:nth-child(6) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.06s);
animation-delay: calc((var(--speed) * 0.68) + 0.06s);
}
@-webkit-keyframes particle-animation-7 {
100% {
-webkit-transform: translateX(calc(0.1070048579 * var(--horse-width) )) translateY(calc(-0.0066026827 * (var(--horse-height) / 5))) scale(5) rotate(-156deg);
transform: translateX(calc(0.1070048579 * var(--horse-width) )) translateY(calc(-0.0066026827 * (var(--horse-height) / 5))) scale(5) rotate(-156deg);
opacity: 0;
}
}
@keyframes particle-animation-7 {
100% {
-webkit-transform: translateX(calc(0.1070048579 * var(--horse-width) )) translateY(calc(-0.0066026827 * (var(--horse-height) / 5))) scale(5) rotate(-156deg);
transform: translateX(calc(0.1070048579 * var(--horse-width) )) translateY(calc(-0.0066026827 * (var(--horse-height) / 5))) scale(5) rotate(-156deg);
opacity: 0;
}
}
.particle:nth-child(7) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-7 var(--speed) ease-out infinite;
animation: particle-animation-7 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.07s);
animation-delay: calc((var(--speed) * 0.1) + 0.07s);
}
.dust.back .particle:nth-child(7) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.07s);
animation-delay: calc((var(--speed) * 0.68) + 0.07s);
}
@-webkit-keyframes particle-animation-8 {
100% {
-webkit-transform: translateX(calc(0.0949365285 * var(--horse-width) )) translateY(calc(-0.0072882105 * (var(--horse-height) / 5))) scale(4) rotate(-174.5deg);
transform: translateX(calc(0.0949365285 * var(--horse-width) )) translateY(calc(-0.0072882105 * (var(--horse-height) / 5))) scale(4) rotate(-174.5deg);
opacity: 0;
}
}
@keyframes particle-animation-8 {
100% {
-webkit-transform: translateX(calc(0.0949365285 * var(--horse-width) )) translateY(calc(-0.0072882105 * (var(--horse-height) / 5))) scale(4) rotate(-174.5deg);
transform: translateX(calc(0.0949365285 * var(--horse-width) )) translateY(calc(-0.0072882105 * (var(--horse-height) / 5))) scale(4) rotate(-174.5deg);
opacity: 0;
}
}
.particle:nth-child(8) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-8 var(--speed) ease-out infinite;
animation: particle-animation-8 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.08s);
animation-delay: calc((var(--speed) * 0.1) + 0.08s);
}
.dust.back .particle:nth-child(8) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.08s);
animation-delay: calc((var(--speed) * 0.68) + 0.08s);
}
@-webkit-keyframes particle-animation-9 {
100% {
-webkit-transform: translateX(calc(0.600576615 * var(--horse-width) )) translateY(calc(-0.0017408256 * (var(--horse-height) / 5))) scale(6) rotate(-146.5deg);
transform: translateX(calc(0.600576615 * var(--horse-width) )) translateY(calc(-0.0017408256 * (var(--horse-height) / 5))) scale(6) rotate(-146.5deg);
opacity: 0;
}
}
@keyframes particle-animation-9 {
100% {
-webkit-transform: translateX(calc(0.600576615 * var(--horse-width) )) translateY(calc(-0.0017408256 * (var(--horse-height) / 5))) scale(6) rotate(-146.5deg);
transform: translateX(calc(0.600576615 * var(--horse-width) )) translateY(calc(-0.0017408256 * (var(--horse-height) / 5))) scale(6) rotate(-146.5deg);
opacity: 0;
}
}
.particle:nth-child(9) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-9 var(--speed) ease-out infinite;
animation: particle-animation-9 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.09s);
animation-delay: calc((var(--speed) * 0.1) + 0.09s);
}
.dust.back .particle:nth-child(9) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.09s);
animation-delay: calc((var(--speed) * 0.68) + 0.09s);
}
@-webkit-keyframes particle-animation-10 {
100% {
-webkit-transform: translateX(calc(0.3913824487 * var(--horse-width) )) translateY(calc(-0.0086273263 * (var(--horse-height) / 5))) scale(4) rotate(-129.5deg);
transform: translateX(calc(0.3913824487 * var(--horse-width) )) translateY(calc(-0.0086273263 * (var(--horse-height) / 5))) scale(4) rotate(-129.5deg);
opacity: 0;
}
}
@keyframes particle-animation-10 {
100% {
-webkit-transform: translateX(calc(0.3913824487 * var(--horse-width) )) translateY(calc(-0.0086273263 * (var(--horse-height) / 5))) scale(4) rotate(-129.5deg);
transform: translateX(calc(0.3913824487 * var(--horse-width) )) translateY(calc(-0.0086273263 * (var(--horse-height) / 5))) scale(4) rotate(-129.5deg);
opacity: 0;
}
}
.particle:nth-child(10) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-10 var(--speed) ease-out infinite;
animation: particle-animation-10 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.1s);
animation-delay: calc((var(--speed) * 0.1) + 0.1s);
}
.dust.back .particle:nth-child(10) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.1s);
animation-delay: calc((var(--speed) * 0.68) + 0.1s);
}
@-webkit-keyframes particle-animation-11 {
100% {
-webkit-transform: translateX(calc(0.3372162546 * var(--horse-width) )) translateY(calc(-0.0092121755 * (var(--horse-height) / 5))) scale(4) rotate(-36.5deg);
transform: translateX(calc(0.3372162546 * var(--horse-width) )) translateY(calc(-0.0092121755 * (var(--horse-height) / 5))) scale(4) rotate(-36.5deg);
opacity: 0;
}
}
@keyframes particle-animation-11 {
100% {
-webkit-transform: translateX(calc(0.3372162546 * var(--horse-width) )) translateY(calc(-0.0092121755 * (var(--horse-height) / 5))) scale(4) rotate(-36.5deg);
transform: translateX(calc(0.3372162546 * var(--horse-width) )) translateY(calc(-0.0092121755 * (var(--horse-height) / 5))) scale(4) rotate(-36.5deg);
opacity: 0;
}
}
.particle:nth-child(11) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-11 var(--speed) ease-out infinite;
animation: particle-animation-11 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.11s);
animation-delay: calc((var(--speed) * 0.1) + 0.11s);
}
.dust.back .particle:nth-child(11) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.11s);
animation-delay: calc((var(--speed) * 0.68) + 0.11s);
}
@-webkit-keyframes particle-animation-12 {
100% {
-webkit-transform: translateX(calc(0.154059282 * var(--horse-width) )) translateY(calc(-0.0007994462 * (var(--horse-height) / 5))) scale(5) rotate(-119deg);
transform: translateX(calc(0.154059282 * var(--horse-width) )) translateY(calc(-0.0007994462 * (var(--horse-height) / 5))) scale(5) rotate(-119deg);
opacity: 0;
}
}
@keyframes particle-animation-12 {
100% {
-webkit-transform: translateX(calc(0.154059282 * var(--horse-width) )) translateY(calc(-0.0007994462 * (var(--horse-height) / 5))) scale(5) rotate(-119deg);
transform: translateX(calc(0.154059282 * var(--horse-width) )) translateY(calc(-0.0007994462 * (var(--horse-height) / 5))) scale(5) rotate(-119deg);
opacity: 0;
}
}
.particle:nth-child(12) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-12 var(--speed) ease-out infinite;
animation: particle-animation-12 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.12s);
animation-delay: calc((var(--speed) * 0.1) + 0.12s);
}
.dust.back .particle:nth-child(12) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.12s);
animation-delay: calc((var(--speed) * 0.68) + 0.12s);
}
@-webkit-keyframes particle-animation-13 {
100% {
-webkit-transform: translateX(calc(0.3285054638 * var(--horse-width) )) translateY(calc(-0.0059227091 * (var(--horse-height) / 5))) scale(4) rotate(-18deg);
transform: translateX(calc(0.3285054638 * var(--horse-width) )) translateY(calc(-0.0059227091 * (var(--horse-height) / 5))) scale(4) rotate(-18deg);
opacity: 0;
}
}
@keyframes particle-animation-13 {
100% {
-webkit-transform: translateX(calc(0.3285054638 * var(--horse-width) )) translateY(calc(-0.0059227091 * (var(--horse-height) / 5))) scale(4) rotate(-18deg);
transform: translateX(calc(0.3285054638 * var(--horse-width) )) translateY(calc(-0.0059227091 * (var(--horse-height) / 5))) scale(4) rotate(-18deg);
opacity: 0;
}
}
.particle:nth-child(13) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-13 var(--speed) ease-out infinite;
animation: particle-animation-13 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.13s);
animation-delay: calc((var(--speed) * 0.1) + 0.13s);
}
.dust.back .particle:nth-child(13) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.13s);
animation-delay: calc((var(--speed) * 0.68) + 0.13s);
}
@-webkit-keyframes particle-animation-14 {
100% {
-webkit-transform: translateX(calc(0.2524319951 * var(--horse-width) )) translateY(calc(-0.0084589307 * (var(--horse-height) / 5))) scale(4) rotate(-95.5deg);
transform: translateX(calc(0.2524319951 * var(--horse-width) )) translateY(calc(-0.0084589307 * (var(--horse-height) / 5))) scale(4) rotate(-95.5deg);
opacity: 0;
}
}
@keyframes particle-animation-14 {
100% {
-webkit-transform: translateX(calc(0.2524319951 * var(--horse-width) )) translateY(calc(-0.0084589307 * (var(--horse-height) / 5))) scale(4) rotate(-95.5deg);
transform: translateX(calc(0.2524319951 * var(--horse-width) )) translateY(calc(-0.0084589307 * (var(--horse-height) / 5))) scale(4) rotate(-95.5deg);
opacity: 0;
}
}
.particle:nth-child(14) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-14 var(--speed) ease-out infinite;
animation: particle-animation-14 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.14s);
animation-delay: calc((var(--speed) * 0.1) + 0.14s);
}
.dust.back .particle:nth-child(14) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.14s);
animation-delay: calc((var(--speed) * 0.68) + 0.14s);
}
@-webkit-keyframes particle-animation-15 {
100% {
-webkit-transform: translateX(calc(0.5607658756 * var(--horse-width) )) translateY(calc(-0.0083161012 * (var(--horse-height) / 5))) scale(4) rotate(-84deg);
transf.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0