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);
transform: translateX(calc(0.5607658756 * var(--horse-width) )) translateY(calc(-0.0083161012 * (var(--horse-height) / 5))) scale(4) rotate(-84deg);
opacity: 0;
}
}
@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);
transform: translateX(calc(0.5607658756 * var(--horse-width) )) translateY(calc(-0.0083161012 * (var(--horse-height) / 5))) scale(4) rotate(-84deg);
opacity: 0;
}
}
.particle:nth-child(15) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-15 var(--speed) ease-out infinite;
animation: particle-animation-15 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.15s);
animation-delay: calc((var(--speed) * 0.1) + 0.15s);
}
.dust.back .particle:nth-child(15) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.15s);
animation-delay: calc((var(--speed) * 0.68) + 0.15s);
}
@-webkit-keyframes particle-animation-16 {
100% {
-webkit-transform: translateX(calc(0.5919810907 * var(--horse-width) )) translateY(calc(-0.0010307931 * (var(--horse-height) / 5))) scale(6) rotate(-38.5deg);
transform: translateX(calc(0.5919810907 * var(--horse-width) )) translateY(calc(-0.0010307931 * (var(--horse-height) / 5))) scale(6) rotate(-38.5deg);
opacity: 0;
}
}
@keyframes particle-animation-16 {
100% {
-webkit-transform: translateX(calc(0.5919810907 * var(--horse-width) )) translateY(calc(-0.0010307931 * (var(--horse-height) / 5))) scale(6) rotate(-38.5deg);
transform: translateX(calc(0.5919810907 * var(--horse-width) )) translateY(calc(-0.0010307931 * (var(--horse-height) / 5))) scale(6) rotate(-38.5deg);
opacity: 0;
}
}
.particle:nth-child(16) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-16 var(--speed) ease-out infinite;
animation: particle-animation-16 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.16s);
animation-delay: calc((var(--speed) * 0.1) + 0.16s);
}
.dust.back .particle:nth-child(16) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.16s);
animation-delay: calc((var(--speed) * 0.68) + 0.16s);
}
@-webkit-keyframes particle-animation-17 {
100% {
-webkit-transform: translateX(calc(0.1900806557 * var(--horse-width) )) translateY(calc(-0.0058417307 * (var(--horse-height) / 5))) scale(6) rotate(-175deg);
transform: translateX(calc(0.1900806557 * var(--horse-width) )) translateY(calc(-0.0058417307 * (var(--horse-height) / 5))) scale(6) rotate(-175deg);
opacity: 0;
}
}
@keyframes particle-animation-17 {
100% {
-webkit-transform: translateX(calc(0.1900806557 * var(--horse-width) )) translateY(calc(-0.0058417307 * (var(--horse-height) / 5))) scale(6) rotate(-175deg);
transform: translateX(calc(0.1900806557 * var(--horse-width) )) translateY(calc(-0.0058417307 * (var(--horse-height) / 5))) scale(6) rotate(-175deg);
opacity: 0;
}
}
.particle:nth-child(17) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-17 var(--speed) ease-out infinite;
animation: particle-animation-17 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.17s);
animation-delay: calc((var(--speed) * 0.1) + 0.17s);
}
.dust.back .particle:nth-child(17) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.17s);
animation-delay: calc((var(--speed) * 0.68) + 0.17s);
}
@-webkit-keyframes particle-animation-18 {
100% {
-webkit-transform: translateX(calc(0.2603823728 * var(--horse-width) )) translateY(calc(-0.0054406053 * (var(--horse-height) / 5))) scale(3) rotate(-177.5deg);
transform: translateX(calc(0.2603823728 * var(--horse-width) )) translateY(calc(-0.0054406053 * (var(--horse-height) / 5))) scale(3) rotate(-177.5deg);
opacity: 0;
}
}
@keyframes particle-animation-18 {
100% {
-webkit-transform: translateX(calc(0.2603823728 * var(--horse-width) )) translateY(calc(-0.0054406053 * (var(--horse-height) / 5))) scale(3) rotate(-177.5deg);
transform: translateX(calc(0.2603823728 * var(--horse-width) )) translateY(calc(-0.0054406053 * (var(--horse-height) / 5))) scale(3) rotate(-177.5deg);
opacity: 0;
}
}
.particle:nth-child(18) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-18 var(--speed) ease-out infinite;
animation: particle-animation-18 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.18s);
animation-delay: calc((var(--speed) * 0.1) + 0.18s);
}
.dust.back .particle:nth-child(18) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.18s);
animation-delay: calc((var(--speed) * 0.68) + 0.18s);
}
@-webkit-keyframes particle-animation-19 {
100% {
-webkit-transform: translateX(calc(0.4040457516 * var(--horse-width) )) translateY(calc(-0.006063583 * (var(--horse-height) / 5))) scale(6) rotate(-174.5deg);
transform: translateX(calc(0.4040457516 * var(--horse-width) )) translateY(calc(-0.006063583 * (var(--horse-height) / 5))) scale(6) rotate(-174.5deg);
opacity: 0;
}
}
@keyframes particle-animation-19 {
100% {
-webkit-transform: translateX(calc(0.4040457516 * var(--horse-width) )) translateY(calc(-0.006063583 * (var(--horse-height) / 5))) scale(6) rotate(-174.5deg);
transform: translateX(calc(0.4040457516 * var(--horse-width) )) translateY(calc(-0.006063583 * (var(--horse-height) / 5))) scale(6) rotate(-174.5deg);
opacity: 0;
}
}
.particle:nth-child(19) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-19 var(--speed) ease-out infinite;
animation: particle-animation-19 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.19s);
animation-delay: calc((var(--speed) * 0.1) + 0.19s);
}
.dust.back .particle:nth-child(19) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.19s);
animation-delay: calc((var(--speed) * 0.68) + 0.19s);
}
@-webkit-keyframes particle-animation-20 {
100% {
-webkit-transform: translateX(calc(0.0501267347 * var(--horse-width) )) translateY(calc(-0.0029188928 * (var(--horse-height) / 5))) scale(3) rotate(-20deg);
transform: translateX(calc(0.0501267347 * var(--horse-width) )) translateY(calc(-0.0029188928 * (var(--horse-height) / 5))) scale(3) rotate(-20deg);
opacity: 0;
}
}
@keyframes particle-animation-20 {
100% {
-webkit-transform: translateX(calc(0.0501267347 * var(--horse-width) )) translateY(calc(-0.0029188928 * (var(--horse-height) / 5))) scale(3) rotate(-20deg);
transform: translateX(calc(0.0501267347 * var(--horse-width) )) translateY(calc(-0.0029188928 * (var(--horse-height) / 5))) scale(3) rotate(-20deg);
opacity: 0;
}
}
.particle:nth-child(20) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-20 var(--speed) ease-out infinite;
animation: particle-animation-20 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.2s);
animation-delay: calc((var(--speed) * 0.1) + 0.2s);
}
.dust.back .particle:nth-child(20) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.2s);
animation-delay: calc((var(--speed) * 0.68) + 0.2s);
}
@-webkit-keyframes particle-animation-21 {
100% {
-webkit-transform: translateX(calc(0.0602685576 * var(--horse-width) )) translateY(calc(-0.0038246669 * (var(--horse-height) / 5))) scale(3) rotate(-4.5deg);
transform: translateX(calc(0.0602685576 * var(--horse-width) )) translateY(calc(-0.0038246669 * (var(--horse-height) / 5))) scale(3) rotate(-4.5deg);
opacity: 0;
}
}
@keyframes particle-animation-21 {
100% {
-webkit-transform: translateX(calc(0.0602685576 * var(--horse-width) )) translateY(calc(-0.0038246669 * (var(--horse-height) / 5))) scale(3) rotate(-4.5deg);
transform: translateX(calc(0.0602685576 * var(--horse-width) )) translateY(calc(-0.0038246669 * (var(--horse-height) / 5))) scale(3) rotate(-4.5deg);
opacity: 0;
}
}
.particle:nth-child(21) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-21 var(--speed) ease-out infinite;
animation: particle-animation-21 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.21s);
animation-delay: calc((var(--speed) * 0.1) + 0.21s);
}
.dust.back .particle:nth-child(21) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.21s);
animation-delay: calc((var(--speed) * 0.68) + 0.21s);
}
@-webkit-keyframes particle-animation-22 {
100% {
-webkit-transform: translateX(calc(0.1661482011 * var(--horse-width) )) translateY(calc(-0.0000550426 * (var(--horse-height) / 5))) scale(6) rotate(-163.5deg);
transform: translateX(calc(0.1661482011 * var(--horse-width) )) translateY(calc(-0.0000550426 * (var(--horse-height) / 5))) scale(6) rotate(-163.5deg);
opacity: 0;
}
}
@keyframes particle-animation-22 {
100% {
-webkit-transform: translateX(calc(0.1661482011 * var(--horse-width) )) translateY(calc(-0.0000550426 * (var(--horse-height) / 5))) scale(6) rotate(-163.5deg);
transform: translateX(calc(0.1661482011 * var(--horse-width) )) translateY(calc(-0.0000550426 * (var(--horse-height) / 5))) scale(6) rotate(-163.5deg);
opacity: 0;
}
}
.particle:nth-child(22) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-22 var(--speed) ease-out infinite;
animation: particle-animation-22 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.22s);
animation-delay: calc((var(--speed) * 0.1) + 0.22s);
}
.dust.back .particle:nth-child(22) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.22s);
animation-delay: calc((var(--speed) * 0.68) + 0.22s);
}
@-webkit-keyframes particle-animation-23 {
100% {
-webkit-transform: translateX(calc(0.4478850912 * var(--horse-width) )) translateY(calc(-0.0066241343 * (var(--horse-height) / 5))) scale(4) rotate(-54.5deg);
transform: translateX(calc(0.4478850912 * var(--horse-width) )) translateY(calc(-0.0066241343 * (var(--horse-height) / 5))) scale(4) rotate(-54.5deg);
opacity: 0;
}
}
@keyframes particle-animation-23 {
100% {
-webkit-transform: translateX(calc(0.4478850912 * var(--horse-width) )) translateY(calc(-0.0066241343 * (var(--horse-height) / 5))) scale(4) rotate(-54.5deg);
transform: translateX(calc(0.4478850912 * var(--horse-width) )) translateY(calc(-0.0066241343 * (var(--horse-height) / 5))) scale(4) rotate(-54.5deg);
opacity: 0;
}
}
.particle:nth-child(23) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-23 var(--speed) ease-out infinite;
animation: particle-animation-23 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.23s);
animation-delay: calc((var(--speed) * 0.1) + 0.23s);
}
.dust.back .particle:nth-child(23) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.23s);
animation-delay: calc((var(--speed) * 0.68) + 0.23s);
}
@-webkit-keyframes particle-animation-24 {
100% {
-webkit-transform: translateX(calc(0.4401005896 * var(--horse-width) )) translateY(calc(-0.0020458433 * (var(--horse-height) / 5))) scale(4) rotate(-155.5deg);
transform: translateX(calc(0.4401005896 * var(--horse-width) )) translateY(calc(-0.0020458433 * (var(--horse-height) / 5))) scale(4) rotate(-155.5deg);
opacity: 0;
}
}
@keyframes particle-animation-24 {
100% {
-webkit-transform: translateX(calc(0.4401005896 * var(--horse-width) )) translateY(calc(-0.0020458433 * (var(--horse-height) / 5))) scale(4) rotate(-155.5deg);
transform: translateX(calc(0.4401005896 * var(--horse-width) )) translateY(calc(-0.0020458433 * (var(--horse-height) / 5))) scale(4) rotate(-155.5deg);
opacity: 0;
}
}
.particle:nth-child(24) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-24 var(--speed) ease-out infinite;
animation: particle-animation-24 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.24s);
animation-delay: calc((var(--speed) * 0.1) + 0.24s);
}
.dust.back .particle:nth-child(24) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.24s);
animation-delay: calc((var(--speed) * 0.68) + 0.24s);
}
@-webkit-keyframes particle-animation-25 {
100% {
-webkit-transform: translateX(calc(0.4494632744 * var(--horse-width) )) translateY(calc(-0.00049582 * (var(--horse-height) / 5))) scale(3) rotate(-89deg);
transform: translateX(calc(0.4494632744 * var(--horse-width) )) translateY(calc(-0.00049582 * (var(--horse-height) / 5))) scale(3) rotate(-89deg);
opacity: 0;
}
}
@keyframes particle-animation-25 {
100% {
-webkit-transform: translateX(calc(0.4494632744 * var(--horse-width) )) translateY(calc(-0.00049582 * (var(--horse-height) / 5))) scale(3) rotate(-89deg);
transform: translateX(calc(0.4494632744 * var(--horse-width) )) translateY(calc(-0.00049582 * (var(--horse-height) / 5))) scale(3) rotate(-89deg);
opacity: 0;
}
}
.particle:nth-child(25) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-25 var(--speed) ease-out infinite;
animation: particle-animation-25 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.25s);
animation-delay: calc((var(--speed) * 0.1) + 0.25s);
}
.dust.back .particle:nth-child(25) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.25s);
animation-delay: calc((var(--speed) * 0.68) + 0.25s);
}
@-webkit-keyframes particle-animation-26 {
100% {
-webkit-transform: translateX(calc(0.2622251775 * var(--horse-width) )) translateY(calc(-0.0065847864 * (var(--horse-height) / 5))) scale(5) rotate(-107.5deg);
transform: translateX(calc(0.2622251775 * var(--horse-width) )) translateY(calc(-0.0065847864 * (var(--horse-height) / 5))) scale(5) rotate(-107.5deg);
opacity: 0;
}
}
@keyframes particle-animation-26 {
100% {
-webkit-transform: translateX(calc(0.2622251775 * var(--horse-width) )) translateY(calc(-0.0065847864 * (var(--horse-height) / 5))) scale(5) rotate(-107.5deg);
transform: translateX(calc(0.2622251775 * var(--horse-width) )) translateY(calc(-0.0065847864 * (var(--horse-height) / 5))) scale(5) rotate(-107.5deg);
opacity: 0;
}
}
.particle:nth-child(26) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-26 var(--speed) ease-out infinite;
animation: particle-animation-26 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.26s);
animation-delay: calc((var(--speed) * 0.1) + 0.26s);
}
.dust.back .particle:nth-child(26) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.26s);
animation-delay: calc((var(--speed) * 0.68) + 0.26s);
}
@-webkit-keyframes particle-animation-27 {
100% {
-webkit-transform: translateX(calc(0.7004073796 * var(--horse-width) )) translateY(calc(-0.000505517 * (var(--horse-height) / 5))) scale(6) rotate(-104.5deg);
transform: translateX(calc(0.7004073796 * var(--horse-width) )) translateY(calc(-0.000505517 * (var(--horse-height) / 5))) scale(6) rotate(-104.5deg);
opacity: 0;
}
}
@keyframes particle-animation-27 {
100% {
-webkit-transform: translateX(calc(0.7004073796 * var(--horse-width) )) translateY(calc(-0.000505517 * (var(--horse-height) / 5))) scale(6) rotate(-104.5deg);
transform: translateX(calc(0.7004073796 * var(--horse-width) )) translateY(calc(-0.000505517 * (var(--horse-height) / 5))) scale(6) rotate(-104.5deg);
opacity: 0;
}
}
.particle:nth-child(27) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-27 var(--speed) ease-out infinite;
animation: particle-animation-27 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.27s);
animation-delay: calc((var(--speed) * 0.1) + 0.27s);
}
.dust.back .particle:nth-child(27) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.27s);
animation-delay: calc((var(--speed) * 0.68) + 0.27s);
}
@-webkit-keyframes particle-animation-28 {
100% {
-webkit-transform: translateX(calc(0.1672381519 * var(--horse-width) )) translateY(calc(-0.0076002517 * (var(--horse-height) / 5))) scale(3) rotate(-108deg);
transform: translateX(calc(0.1672381519 * var(--horse-width) )) translateY(calc(-0.0076002517 * (var(--horse-height) / 5))) scale(3) rotate(-108deg);
opacity: 0;
}
}
@keyframes particle-animation-28 {
100% {
-webkit-transform: translateX(calc(0.1672381519 * var(--horse-width) )) translateY(calc(-0.0076002517 * (var(--horse-height) / 5))) scale(3) rotate(-108deg);
transform: translateX(calc(0.1672381519 * var(--horse-width) )) translateY(calc(-0.0076002517 * (var(--horse-height) / 5))) scale(3) rotate(-108deg);
opacity: 0;
}
}
.particle:nth-child(28) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-28 var(--speed) ease-out infinite;
animation: particle-animation-28 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.28s);
animation-delay: calc((var(--speed) * 0.1) + 0.28s);
}
.dust.back .particle:nth-child(28) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.28s);
animation-delay: calc((var(--speed) * 0.68) + 0.28s);
}
@-webkit-keyframes particle-animation-29 {
100% {
-webkit-transform: translateX(calc(0.171801595 * var(--horse-width) )) translateY(calc(-0.0020460633 * (var(--horse-height) / 5))) scale(5) rotate(-49.5deg);
transform: translateX(calc(0.171801595 * var(--horse-width) )) translateY(calc(-0.0020460633 * (var(--horse-height) / 5))) scale(5) rotate(-49.5deg);
opacity: 0;
}
}
@keyframes particle-animation-29 {
100% {
-webkit-transform: translateX(calc(0.171801595 * var(--horse-width) )) translateY(calc(-0.0020460633 * (var(--horse-height) / 5))) scale(5) rotate(-49.5deg);
transform: translateX(calc(0.171801595 * var(--horse-width) )) translateY(calc(-0.0020460633 * (var(--horse-height) / 5))) scale(5) rotate(-49.5deg);
opacity: 0;
}
}
.particle:nth-child(29) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-29 var(--speed) ease-out infinite;
animation: particle-animation-29 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.29s);
animation-delay: calc((var(--speed) * 0.1) + 0.29s);
}
.dust.back .particle:nth-child(29) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.29s);
animation-delay: calc((var(--speed) * 0.68) + 0.29s);
}
@-webkit-keyframes particle-animation-30 {
100% {
-webkit-transform: translateX(calc(0.3709730582 * var(--horse-width) )) translateY(calc(-0.002780301 * (var(--horse-height) / 5))) scale(4) rotate(-48.5deg);
transform: translateX(calc(0.3709730582 * var(--horse-width) )) translateY(calc(-0.002780301 * (var(--horse-height) / 5))) scale(4) rotate(-48.5deg);
opacity: 0;
}
}
@keyframes particle-animation-30 {
100% {
-webkit-transform: translateX(calc(0.3709730582 * var(--horse-width) )) translateY(calc(-0.002780301 * (var(--horse-height) / 5))) scale(4) rotate(-48.5deg);
transform: translateX(calc(0.3709730582 * var(--horse-width) )) translateY(calc(-0.002780301 * (var(--horse-height) / 5))) scale(4) rotate(-48.5deg);
opacity: 0;
}
}
.particle:nth-child(30) {
-webkit-transform-origin: -20% -20%;
transform-origin: -20% -20%;
-webkit-animation: particle-animation-30 var(--speed) ease-out infinite;
animation: particle-animation-30 var(--speed) ease-out infinite;
-webkit-animation-delay: calc((var(--speed) * 0.1) + 0.3s);
animation-delay: calc((var(--speed) * 0.1) + 0.3s);
}
.dust.back .particle:nth-child(30) {
-webkit-animation-delay: calc((var(--speed) * 0.68) + 0.3s);
animation-delay: calc((var(--speed) * 0.68) + 0.3s);
}
.🐴 {
width: var(--horse-width);
height: var(--horse-height);
border: 0px solid var(--outlines);
}
.🐴 *, .🐴 *:after, .🐴 *:before {
border: 1px dashed var(--outlines);
}
.🐴 > * {
position: absolute;
top: var(--part-y, 0);
left: var(--part-x, 0);
width: var(--part-width, 10px);
height: var(--part-height, 10px);
border-radius: var(--part-radius, 0);
-webkit-transform: rotate(var(--part-rotate, 0deg));
transform: rotate(var(--part-rotate, 0deg));
-webkit-transform-origin: var(--part-origin, 50% 50%);
transform-origin: var(--part-origin, 50% 50%);
-webkit-animation-delay: var(--delay, 0s) !important;
animation-delay: var(--delay, 0s) !important;
}
.🐴 > * *, .🐴 > * *:after, .🐴 > * *:before {
position: absolute;
background-color: var(--color-horse);
top: var(--shape-y, 0);
left: var(--shape-x, 0);
width: var(--shape-width, 10px);
height: var(--shape-height, 10px);
border-radius: var(--shape-radius, 0);
-webkit-transform: rotate(var(--shape-rotate, 0deg));
transform: rotate(var(--shape-rotate, 0deg));
-webkit-transform-origin: var(--shape-origin, 50% 50%);
transform-origin: var(--shape-origin, 50% 50%);
-webkit-animation-delay: var(--delay, 0s) !important;
animation-delay: var(--delay, 0s) !important;
}
/* ================
HEAD
================ */
.head {
--part-width: 20%;
--part-height: 15%;
--part-x: -1%;
--part-y: 3%;
--part-origin: 100% 50%;
--part-rotate: -40deg;
}
.head .skull {
--shape-width: 55%;
--shape-height: 80%;
--shape-radius: 50%;
--shape-x: 43%;
--shape-y: 10%;
--shape-rotate: 40deg;
}
.head .eye {
background-color: var(--color-horse-back);
--shape-width: 6%;
--shape-height: 10%;
--shape-radius: 30% 100%;
--shape-x: 45%;
--shape-y: 20%;
--shape-rotate: 0deg;
}
.head .face {
--shape-width: 47%;
--shape-height: 50%;
--shape-y: 8%;
--shape-x: 14%;
--shape-rotate: -5deg;
}
.head .nose {
--shape-x: 0%;
--shape-y: 11.7%;
--shape-width: 24%;
--shape-height: 35%;
--shape-radius: 50%;
--shape-rotate: -12deg;
}
.head .jaw {
--shape-width: 25%;
--shape-height: 60%;
--shape-x: 40%;
--shape-y: 37%;
--shape-radius: 45%;
-webkit-transform: skew(0deg) rotate(40deg);
transform: skew(0deg) rotate(40deg);
}
.head .lip {
--shape-rotate: 40deg;
--shape-x: -3%;
--shape-y: 28%;
--shape-radius: 30%;
--shape-width: 12%;
--shape-height: 25%;
}
.head .chin {
--shape-width: 15%;
--shape-height: 40%;
--shape-y: 31%;
--shape-x: 2%;
--shape-radius: 30%;
--shape-rotate: 40deg;
}
.head .chin:after {
content: '';
--shape-width: 130%;
--shape-height: 180%;
--shape-radius: 0;
--shape-x: 123%;
--shape-y: -95%;
--shape-rotate: 70deg;
}
.head .ear {
--shape-width: 20%;
--shape-height: 15%;
--shape-y: 17%;
--shape-x: 78%;
--shape-radius: 50%;
--shape-rotate: 10deg;
--shape-origin: 0% 50%;
}
.head .ear:after {
content: '';
--shape-width: 70%;
--shape-height: 40%;
--shape-y: 10%;
--shape-x: 65%;
--shape-radius: 40%;
--shape-rotate: -30deg;
}
.head .ear:before {
content: '';
--shape-width: 70%;
--shape-height: 30%;
--shape-y: -20%;
--shape-x: 50%;
--shape-radius: 0%;
--shape-rotate: -5deg;
}
/* ================
NECK
================ */
.neck {
--part-width: 30%;
--part-height: 25%;
--part-x: 5%;
--part-y: 35%;
--part-origin: 90% 50%;
--part-rotate: 45deg;
}
.neck .under {
--shape-height: 40%;
--shape-width: 16%;
--shape-radius: 50%;
--shape-x: 11%;
--shape-y: 55%;
--shape-rotate: -19deg;
background-color: transparent;
border-top: 0.07rem outset var(--color-horse);
}
.neck .front {
--shape-width: 75%;
--shape-height: 55%;
--shape-radius: 50%;
--shape-y: 28%;
--shape-x: 7%;
--shape-rotate: 20deg;
}
.neck .top {
--shape-x: 10%;
--shape-y: 5%;
--shape-width: 50%;
--shape-height: 25%;
--shape-radius: 50% / 20%;
--shape-rotate: 0deg;
/* background-color: red; */
}
.neck .top:after {
content: '';
--shape-x: 50%;
--shape-y: -10%;
--shape-width: 70%;
--shape-height: 50%;
--shape-radius: 0%;
--shape-rotate: -5deg;
}
.neck .top:before {
/* content: ''; */
--shape-x: 70%;
--shape-y: -30%;
--shape-width: 70%;
--shape-height: 100%;
--shape-radius: 50%;
--shape-rotate: -8deg;
}
.neck .base {
--shape-width:50%;
--shape-height:30%;
--shape-x: 20%;
--shape-y: 10%;
--shape-radius: 30%;
--shape-rotate: -10deg;
}
.neck .shoulder {
--shape-width:50%;
--shape-height:30%;
--shape-x: 48%;
--shape-y: -2%;
--shape-rotate: -20deg;
--shape-radius: 50%;
}
.neck .shoulder:after {
/* content: ''; */
--shape-width:60%;
--shape-height:30%;
--shape-x: 65%;
--shape-y: 10%;
--shape-rotate: 0deg;
--shape-radius: 0%;
}
/* ================
BODY
================ */
.body {
--part-width: 55%;
--part-height: 33%;
--part-x: 20%;
--part-y: 30%;
--part-origin: 10% 50%;
}
.body .section {
--shape-width: 94%;
--shape-height: 90%;
--shape-x: 40%;
--shape-y: 5%;
--shape-origin: 10% 30%;
--shape-radius: 50% 0 20% 20%;
--shape-rotate: -9deg;
}
.body .section.last {
--shape-radius: 45%;
}
.body .section.last:after {
content: none;
}
.body > .section {
--shape-x: 4%;
--shape-y: 4%;
--shape-width: 32%;
--shape-height: 92%;
--shape-rotate: 10deg;
--shape-origin: 50% 50%;
--shape-radius: 45%;
}
.body > .section:after {
content: '';
--shape-height: 70%;
--shape-width: 202%;
--shape-x: 40%;
--shape-y: 48%;
--shape-rotate: -23deg;
--shape-origin: 0% 100%;
--shape-radius: 50%;
}
.body > .section:before {
/* content: ''; */
--shape-height: 10%;
--shape-width: 40%;
--shape-x: -22%;
--shape-y: 50%;
--shape-rotate: 55deg;
--shape-radius: 0%;
}
.body .back-side {
--shape-x: 60%;
--shape-y: -10%;
--shape-width: 38%;
--shape-height: 70%;
--shape-origin: 0 0;
--shape-rotate: 8deg;
--shape-radius: 40% 50% 50%;
}
/* ================
TAIL
================ */
.tail {
--part-width: 35%;
--part-height: 18%;
--part-x: 63%;
--part-y: 29%;
--part-rotate: 10deg;
--part-origin: 0% 50%;
}
.tail .nub {
--shape-width: 35%;
--shape-height: 30%;
--shape-rotate: 4deg;
--shape-origin: 10% 50%;
--shape-radius: 20% / 50%;
background-color: var(--color-hair);
}
.tail .section {
--shape-width: 100%;
--shape-height: 90%;
--shape-rotate: 15deg;
--shape-origin: 0% 50%;
--shape-radius: 30% / 50%;
--shape-y: -25%;
--shape-x: 60%;
background-color: var(--color-hair);
}
.tail .section:after {
content: '';
--shape-width: 170%;
--shape-height: 120%;
--shape-rotate: 6deg;
--shape-origin: 0% 50%;
--shape-radius: 50%;
--shape-y: -10%;
--shape-x: 0%;
background-color: transparent;
box-shadow: -1.5vmin 0.5vmin 0 0 var(--color-hair);
}
.tail .section:before {
content: '';
--shape-width: 130%;
--shape-height: 100%;
--shape-rotate: -20deg;
--shape-origin: 0% 50%;
--shape-radius: 50%;
--shape-y: 0%;
--shape-x: 50%;
background-color: transparent;
box-shadow: -1.5vmin 1vmin 0 0 var(--color-hair);
}
.tail .nub > .section {
--shape-width: 50%;
--shape-height: 170%;
}
.tail .section > * > * {
--shape-rotate: 0deg;
--shape-height: 80%;
}
.tail .section > * > * > * > * {
--shape-rotate: -25deg;
--shape-height: 40%;
}
/* ================
FRONT LEG
================ */
.front-leg {
--part-width: 15%;
--part-height: 60%;
--part-x: 20%;
--part-y: 40%;
--part-origin: 100% 50%;
}
.front-leg.right {
--color-horse: var(--color-horse-back);
--delay: calc( 0s - var(--speed) / var(--delay-gap));
}
.front-leg .shoulder {
--shape-x: 20%;
--shape-width: 80%;
--shape-height: 35%;
--shape-origin: 100% 50%;
--shape-radius: 30% 30% 30% 50%;
--shape-rotate: -0deg;
}
.front-leg .upper {
--shape-x: 40%;
--shape-y: 60%;
--shape-width: 40%;
--shape-height: 80%;
--shape-origin: 40% 10%;
--shape-radius: 30% 30% 50% 50%;
--shape-rotate: 0deg;
}
.front-leg .upper:before {
content: '';
--shape-x: 5%;
--shape-radius: 20%;
--shape-rotate: 0deg;
}
.front-leg .upper:after {
content: '';
--shape-x: 40%;
--shape-y: 60%;
--shape-height: 78%;
--shape-radius: 40%;
--shape-rotate: 5deg;
}
.front-leg .knee {
--shape-x: 0%;
--shape-y: 120%;
--shape-width: 57%;
--shape-height: 55%;
--shape-radius: 45%;
--shape-origin: 40% 20%;
--shape-rotate: -0deg;
}
.front-leg .knee:before {
content: '';
--shape-x: 0%;
--shape-y: 60%;
--shape-width: 30%;
--shape-height: 40%;
--shape-radius: 30%;
--shape-rotate: 0deg;
}
.front-leg .lower {
--shape-x: 0%;
--shape-y: 80%;
--shape-width: 54%;
--shape-height: 120%;
--shape-radius: 5%;
--shape-rotate: 12deg;
}
.front-leg .ankle {
--shape-x: -20%;
--shape-y: 80%;
--shape-width: 170%;
--shape-height: 45%;
--shape-radius: 50%;
--shape-rotate: 20deg;
}
.front-leg .foot {
--shape-x: -35%;
--shape-y: 65%;
--shape-width: 120%;
--shape-height: 200%;
--shape-radius: 0%;
--shape-rotate: 30deg;
-webkit-clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
clip-path: polygon(0% 0%, 80% 0%, 65% 20%, 63% 30%, 70% 45%, 75% 55%, 46% 90%, 35% 95%, 10% 70%, 5% 50%, 10% 25%);
}
.front-leg .hoof {
--shape-x: 40%;
--shape-y: 52%;
--shape-width: 100%;
--shape-height: 50%;
--shape-radius: 0%;
--shape-rotate: 55deg;
background-color: var(--color-hoof);
}
/* ================
BACK LEG
================ */
.back-leg {
--part-width: 20%;
--part-height: 70%;
--part-x: 60%;
--part-y: 30%;
--part-origin: 100% 50%;
}
.back-leg.right {
--color-horse: var(--color-horse-back);
--delay: calc( 0s - var(--speed) / var(--delay-gap));
}
.back-leg .top {
--shape-height: 20%;
--shape-width: 75%;
--shape-radius: 45%;
--shape-rotate: 25deg;
--shape-x: -8%;
background-color: transparent;
}
.back-leg .top:after {
content: '';
--shape-height: 140%;
--shape-width: 40%;
--shape-radius: 50% / 30%;
--shape-rotate: -19deg;
--shape-x: 55%;
--shape-y: 20%;
--shape-origin: 50% 10%;
}
.back-leg .top:before {
content: '';
--shape-height: 150%;
--shape-width: 80%;
--shape-radius: 50% / 60%;
--shape-rotate: -60deg;
--shape-x: 24%;
--shape-y: 58%;
}
.back-leg .thigh {
--shape-height: 140%;
--shape-width: 22%;
--shape-radius: 45% / 20%;
--shape-rotate: -95deg;
--shape-x: 75%;
--shape-y: 172%;
--shape-origin: 50% 0%;
}
.back-leg .thigh:before {
content: '';
--shape-height: 80%;
--shape-width: 50%;
--shape-radius: 50%;
--shape-rotate: -15deg;
--shape-x: -66%;
--shape-y: -10%;
--shape-origin: 50% 0%;
}
.back-leg .thigh:after {
content: '';
--shape-height: 40%;
--shape-width: 50%;
--shape-radius: 50%;
--shape-rotate: 20deg;
--shape-x: 110%;
--shape-y: 23%;
--shape-origin: 50% 50%;
background-color: transparent;
box-shadow: -1.2% 0.5% 0 0 var(--color-horse);
}
.back-leg .lower-leg {
--shape-height: 100%;
--shape-width: 60%;
--shape-radius: 50% / 10%;
--shape-rotate: 47deg;
--shape-x: 80%;
--shape-y: 88%;
--shape-origin: 50% 0%;
}
.back-leg .lower-leg:after {
content: '';
--shape-height: 60%;
--shape-width: 100%;
--shape-radius: 50%;
--shape-rotate: -25deg;
--shape-x: -155%;
--shape-y: 8%;
--shape-origin: 50% 50%;
background-color: transparent;
box-shadow: 8px 1px 0 0 var(--color-horse);
}
.back-leg .lower-leg:before {
/* content: ''; */
--shape-height: 30%;
--shape-width: 30%;
--shape-radius: 0%;
--shape-rotate: 120deg;
--shape-x: 50%;
--shape-y: 4%;
--shape-origin: 50% 0%;
}
.back-leg .foot {
--shape-x: -120%;
--shape-y: 100%;
--shape-width: 180%;
--shape-height: 60%;
--shape-radius: 0%;
--shape-rotate: -70deg;
-webkit-clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
clip-path: polygon(90% 0%, 95% 10%, 100% 20%, 100% 30%, 60% 45%, 60% 55%, 70% 62%, 80% 65%, 80% 70%, 15% 95%, 10% 50%, 15% 25%, 30% 10%, 70% 0%);
}
.back-leg .hoof {
--shape-x: -10%;
--shape-y: 65%;
--shape-width: 100%;
--shape-height: 100%;
--shape-radius: 0%;
--shape-rotate: -5deg;
background-color: var(--color-hoof);
}
/* ================
ANIMATIONS
================ */
@-webkit-keyframes body {
0%, 100% {
-webkit-transform: rotate(8deg) translatex(2%) translatey(-5%);
transform: rotate(8deg) translatex(2%) translatey(-5%);
}
9% {
-webkit-transform: rotate(4deg) translatex(2%) translatey(0%);
transform: rotate(4deg) translatex(2%) translatey(0%);
}
18.1% {
-webkit-transform: rotate(1deg) translatex(0%) translatey(5%);
transform: rotate(1deg) translatex(0%) translatey(5%);
}
27.2% {
-webkit-transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
}
36.3% {
-webkit-transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
}
45.4% {
-webkit-transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
}
54.5% {
-webkit-transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
}
63.6% {
-webkit-transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
}
72.7% {
-webkit-transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
}
81.8% {
-webkit-transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
}
90.9% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
}
}
@keyframes body {
0%, 100% {
-webkit-transform: rotate(8deg) translatex(2%) translatey(-5%);
transform: rotate(8deg) translatex(2%) translatey(-5%);
}
9% {
-webkit-transform: rotate(4deg) translatex(2%) translatey(0%);
transform: rotate(4deg) translatex(2%) translatey(0%);
}
18.1% {
-webkit-transform: rotate(1deg) translatex(0%) translatey(5%);
transform: rotate(1deg) translatex(0%) translatey(5%);
}
27.2% {
-webkit-transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
transform: rotate(1deg) translatex(2%) translatey(0%) scaleX(0.92);
}
36.3% {
-webkit-transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
transform: rotate(0deg) translatex(2%) translatey(-2%) scaleX(0.9);
}
45.4% {
-webkit-transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
transform: rotate(2deg) translatex(2%) translatey(-3%) scaleX(0.9);
}
54.5% {
-webkit-transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
transform: rotate(3deg) translatex(2%) translatey(-5%) scaleX(0.9);
}
63.6% {
-webkit-transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
transform: rotate(4deg) translatex(0%) translatey(-4%) scaleX(0.9);
}
72.7% {
-webkit-transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
transform: rotate(4.5deg) translatex(0%) translatey(-3%) scaleX(0.95);
}
81.8% {
-webkit-transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
transform: rotate(6.5deg) translatex(0%) translatey(-5%) scaleX(0.95);
}
90.9% {
-webkit-transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
transform: rotate(10deg) translatex(0%) translatey(-14%) scaleX(1);
}
}
.animate .body {
-webkit-animation: body var(--speed) linear infinite;
animation: body var(--speed) linear infinite;
}
@-webkit-keyframes front-shoulder {
0%, 100% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(6%);
transform: rotate(20deg) translatex(0%) translatey(6%);
}
8.3% {
-webkit-transform: rotate(8deg) translatex(-10%) translatey(0%);
transform: rotate(8deg) translatex(-10%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(0deg) translatex(-12%) translatey(-3%);
transform: rotate(0deg) translatex(-12%) translatey(-3%);
}
24.9% {
-webkit-transform: rotate(0deg) translatex(10%) translatey(0%);
transform: rotate(0deg) translatex(10%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-30deg) translatex(7%) translatey(-12%);
transform: rotate(-30deg) translatex(7%) translatey(-12%);
}
41.6% {
-webkit-transform: rotate(-30deg) translatex(11%) translatey(-10%);
transform: rotate(-30deg) translatex(11%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-20deg) translatex(10%) translatey(0%);
transform: rotate(-20deg) translatex(10%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-10deg) translatex(30%) translatey(-5%);
transform: rotate(-10deg) translatex(30%) translatey(-5%);
}
66.6% {
-webkit-transform: rotate(15deg) translatex(25%) translatey(5%);
transform: rotate(15deg) translatex(25%) translatey(5%);
}
74.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(0%);
transform: rotate(20deg) translatex(0%) translatey(0%);
}
}
@keyframes front-shoulder {
0%, 100% {
-webkit-transform: rotate(20deg) translatex(0%) translatey(6%);
transform: rotate(20deg) translatex(0%) translatey(6%);
}
8.3% {
-webkit-transform: rotate(8deg) translatex(-10%) translatey(0%);
transform: rotate(8deg) translatex(-10%) translatey(0%);
}
16.6% {
-webkit-transform: rotate(0deg) translatex(-12%) translatey(-3%);
transform: rotate(0deg) translatex(-12%) translatey(-3%);
}
24.9% {
-webkit-transform: rotate(0deg) translatex(10%) translatey(0%);
transform: rotate(0deg) translatex(10%) translatey(0%);
}
33.3% {
-webkit-transform: rotate(-30deg) translatex(7%) translatey(-12%);
transform: rotate(-30deg) translatex(7%) translatey(-12%);
}
41.6% {
-webkit-transform: rotate(-30deg) translatex(11%) translatey(-10%);
transform: rotate(-30deg) translatex(11%) translatey(-10%);
}
49.9% {
-webkit-transform: rotate(-20deg) translatex(10%) translatey(0%);
transform: rotate(-20deg) translatex(10%) translatey(0%);
}
58.3% {
-webkit-transform: rotate(-10deg) translatex(30%) translatey(-5%);
transform: rotate(-10deg) translatex(30%) translatey(-5%);
}
66.6% {
-webkit-transform: rotate(15deg) translatex(25%) translatey(5%);
transform: rotate(15deg) translatex(25%) translatey(5%);
}
74.9% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
83.3% {
-webkit-transform: rotate(0deg) translatex(0%) translatey(0%);
transform: rotate(0deg) translatex(0%) translatey(0%);
}
91.6% {
-webkit-transform: rotate(20deg) translate.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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