纯css实现一个拖拉机绘画动画效果
代码语言：html
所属分类：动画
代码描述：纯css实现一个拖拉机绘画动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--color-dark: #010101;
--color-accent: #4072EE;
--color-light: #FCFFFF;
--stripes: linear-gradient(90deg, var(--color-dark) 20%, transparent 20%, transparent 40%, var(--color-dark) 40%, var(--color-dark) 60%, transparent 60%, transparent 80%, var(--color-dark) 80%);
--frame-size: 30vw;
--stripe-width-on-frame: calc(var(--frame-size) * 5 / 24.5);
--stripe-gap-on-frame: calc(var(--frame-size) / 24.5);
--stripe-gap: calc(var(--stripe-gap-on-frame) * 0.707);
--stripe-width: calc(var(--stripe-width-on-frame) * 0.707);
--animation: 30s linear infinite;
--stripe-x-1: var(--stripe-gap-on-frame);
--stripe-x-2: calc(var(--stripe-gap-on-frame) * 2 + var(--stripe-width-on-frame));
--stripe-x-3: calc(var(--stripe-gap-on-frame) * 3 + var(--stripe-width-on-frame) * 2);
--stripe-x-4: calc(var(--stripe-gap-on-frame) * 4 + var(--stripe-width-on-frame) * 3);
--stripe-height-1: calc((var(--stripe-gap-on-frame) + var(--stripe-width-on-frame)) / 0.707);
--stripe-height-2: calc((var(--stripe-gap-on-frame) * 2 + var(--stripe-width-on-frame) * 2) / 0.707);
--stripe-height-3: calc((var(--stripe-gap-on-frame) * 3 + var(--stripe-width-on-frame) * 3) / 0.707);
--stripe-height-4: calc((var(--stripe-gap-on-frame) * 4 + var(--stripe-width-on-frame) * 4) / 0.707);
}
html, body {
height: 100vh; width: 100vw;
min-height: 60vw;
padding: 0; margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(rgba(0,0,0,0.06), rgba(0,0,0,0.14));
}
body *, body *:before, body *:after {
content: '';
position: absolute;
}
.frame {
position: relative;
width: var(--frame-size);
height: var(--frame-size);
border: 3.2vw solid rgba(255,255,255,0.2);
box-shadow: 0 11vw 7.5vw rgba(0, 32, 51, 0.08),
0 1.5vw 4vw rgba(0, 32, 51, 0.05),
0 4vw 2vw -3vw rgba(0, 32, 51, 0.04),
0 2vw 1vw -1vw rgba(0, 32, 51, 0.04),
0 0.6vw 0.5vw rgba(0, 32, 51, 0.03),
0 -0.2vw 0.5vw rgba(0, 32, 51, 0.03);
}
.frame::before {
left: -2vw;
right: -2vw;
top: -2vw;
bottom: -2vw;
border-top: 2vw solid rgba(0,0,0,0.09);
border-left: 2vw solid rgba(0,0,0,0.05);
border-right: 2vw solid rgba(0,0,0,0.04);
border-bottom: 2vw solid rgba(255,255,255,0.3);
box-shadow: inset 0 0.2vw 0 rgba(0,0,0,0.2),
inset 0.2vw 0 0 rgba(0,0,0,0.08),
inset -0.2vw 0 0 rgba(0,0,0,0.08),
inset 0 -0.2vw 0 rgba(255,255,255,0.2);
}
.frame::after {
top: -3.2vw;
bottom: -3.2vw;
right: -3.2vw;
left: -3.2vw;
border-top: 0.1vw solid rgba(255,255,255,0.4);
border-left: 0.1vw solid rgba(127,127,127,0.2);
border-right: 0.1vw solid rgba(127,127,127,0.2);
border-bottom: 0.1vw solid rgba(0,0,0,0.3);
}
.picture {
width: 100%; height: 100%;
overflow: hidden;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.stripe {
--height: calc((var(--stripe-gap-on-frame) * var(--index) + var(--stripe-width-on-frame) * var(--index)) / 0.707);
width: var(--stripe-width);
height: var(--height);
transform: rotate(45deg);
}
.stripe_1 { --index: 1; }
.stripe_2 { --index: 2; }
.stripe_3 { --index: 3; }
.stripe_4 { --index: 4; }
.stripe_5 { --index: 4; }
.stripe_6 { --index: 3; }
.stripe_7 { --index: 2; }
.stripe_8 { --index: 1; }
.stripe:nth-child(-n+4) {
top: 0;
left: calc(var(--stripe-gap-on-frame) * var(--index) + var(--stripe-width-on-frame) * (var(--index) - 1));
transform-origin: top left;
}
.stripe:nth-child(-n+4)::before { top: calc(var(--stripe-width) * -1); }
.stripe:nth-child(n+5) {
bottom: 0;
right: calc(var(--stripe-gap-on-frame) * var(--index) + var(--stripe-width-on-frame) * (var(--index) - 1));
transform-origin: bottom right;
}
.stripe:nth-child(n+5)::before { bottom: calc(var(--stripe-width) * -1); }
.stripe::before {
width: 100%;
height: 100%;
background: var(--stripes);
}
.stripe_1::before {
transform-origin: top center;
animation: stripe1Anim var(--animation);
}
.stripe_2::before {
transform-origin: bottom center;
animation: stripe2Anim var(--animation);
}
.stripe_3::before {
transform-origin: top center;
animation: stripe3Anim var(--animation);
}
.stripe_4::before {
transform-origin: bottom center;
animation: stripe4Anim var(--animation);
}
.stripe_5::before {
transform-origin: top center;
animation: stripe5Anim var(--animation);
}
.stripe_6::before {
transform-origin: bottom center;
animation: stripe6Anim var(--animation);
}
.stripe_7::before {
transform-origin: top center;
animation: stripe7Anim var(--animation);
}
.stripe_8::before {
transform-origin: bottom center;
animation: stripe8Anim var(--animation);
}
@keyframes stripe1Anim {
0% { transform: scaleY(1.37) translateY(calc(var(--stripe-height-1) * -1 + var(--stripe-width) * -2.78)); }
9.4%, 100% { transform: translateY(0) scaleY(1.37); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe2Anim {
0%, 9.4% { transform: scaleY(1.12) translateY(calc(var(--stripe-height-2) + var(--stripe-width) * 3.9)); }
21.2%, 100% { transform: scaleY(1.12); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe3Anim {
0%, 21.2% { transform: scaleY(1.13) translateY(calc(var(--stripe-height-3) * -1 + var(--stripe-width) * -3.8)); }
36.9%, 100% { transform: translateY(0) scaleY(1.13); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe4Anim {
0%, 36.9% { transform: scaleY(1.03) translateY(calc(var(--stripe-height-4) + var(--stripe-width) * 2.7)); }
53.7%, 100% { transform: scaleY(1.03); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe5Anim {
0%, 53.7% { transform: translateY(calc(var(--stripe-height-4) * -1 + var(--stripe-width) * -2.81)); }
70%, 100% { transform: translateY(0); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe6Anim {
0%, 70% { transform: translateY(calc(var(--stripe-height-3) + var(--stripe-width) * 2.81)); }
83.2%, 100% { transform: translateY(0); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe7Anim {
0%, 83.2% { transform: translateY(calc(var(--stripe-height-2) * -1 + var(--stripe-width) * -2.81)); }
93.1%, 100% { transform: translateY(0); }
99% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes stripe8Anim {
0%, 93.1% { transform: translateY(calc(var(--stripe-height-1) + var(--stripe-width) * 2.81)); }
100% { transform: translateY(0); }
99% { opacity: 1; }
100% { opacity: 0; }
}
.tractor {
width: var(--stripe-width);
height: calc(var(--stripe-width) * 0.54);
background: var(--color-dark);
}
.tractor::before {
left: calc(var(--stripe-width) * -0.05);
top: calc(var(--stripe-width) * 0.94);
width: calc(var(--stripe-width) * 1.28);
height: calc(var(--stripe-width) * 1.75);
background: var(--color-dark);
border-radius: calc(var(--stripe-width) * 0.1);
}
.tractor::after {
right: calc(var(--stripe-width) * -0.18);
top: calc(var(--stripe-width) * 0.98);
width: calc(var(--stripe-width) * 0.08);
height: calc(var(--stripe-width) * 0.55);
background: var(--color-accent);
border-radius: 100%;
box-shadow: 0 calc(var(--stripe-width) * 1.1) var(--color-accent);
}
.tractor > div:nth-child(1) {
left: calc(var(--stripe-width) * 0.56);
top: calc(var(--stripe-width) * 2);
width: calc(var(--stripe-width) * 0.4);
height: calc(var(--stripe-width) * 1.1);
background: linear-gradient(130deg, var(--color-dark) 77%, transparent 10%);
}
.tractor > div:nth-child(1)::before {
left: calc(var(--stripe-width) * -0.35);
top: calc(var(--stripe-width) * -1.13);
width: calc(var(--stripe-width) * 0.6);
height: calc(var(--stripe-width) * 1.36);
background: var(--color-accent);
border-radius: calc(var(--stripe-width) * 0.1);
}
.tractor > div:nth-child(1)::after {
left: calc(var(--stripe-width) * -0.34);
top: calc(var(--stripe-width) * -1.02);
width: calc(var(--stripe-width) * 0.55);
height: calc(var(--stripe-width) * 1.3);
background: var(--color-dark);
border-radius: calc(var(--stripe-width) * 0.1);
}
.tractor > div:nth-child(2) {
left: calc(var(--stripe-width) * 0.16);
top: calc(var(--stripe-width) * 2.04);
width: calc(var(--stripe-width) * 0.52);
height: calc(var(--stripe-width) * 1.05);
background: var(--color-accent);
border-radius: calc(var(--stripe-width) * 0.05);
}
.tractor > div:nth-child(2)::before {
left: calc(var(--stripe-width) * 0.03);
top: calc(var(--stripe-width) * -0.7);
width: calc(var(--stripe-width) * 0.53);
height: calc(var(--stripe-width) * 0.51);
background: var(--color-accent);
border-radius: calc(var(--stripe-width) * 0.03);
}
.tractor > div:nth-child(2)::after {
left: calc(var(--stripe-width) * 0.30);
top: calc(var(--stripe-width) * -0.95);
width: calc(var(--stripe-width) * 0.2);
height: calc(var(--stripe-width) * 0.77);
border-radius: 100%;
background: var(--color-dark);
transform-origin: top center;
transform: rotate(25deg);
}
.tractor > div:nth-child(3) {
left: calc(var(--stripe-width) * 0.32);
top: calc(var(--stripe-width) * 1.78);
width: calc(var(--stripe-width) * 0.25);
height: calc(var(--stripe-width) * 0.19);
box-sizing: border-box;
border: calc(var(--stripe-width) * 0.02) solid var(--color-dark);
border-radius: 50%;
box-shadow: inset 0vw -0.15vw var(--color-accent);
}
.tractor > div:nth-child(3)::before {
left: calc(var(--stripe-width) * 0.0);
top: calc(var(--stripe-width) * -0.75);
width: calc(var(--stripe-width) * 0.2);
height: calc(var(--stripe-width) * 0.77);
border-radius: 100%;
background: var(--color-dark);
transform-origin: top center;
transform: rotate(-15deg);
}
.tractor > div:nth-child(3)::after {
left: calc(var(--stripe-width) * -0.16);
top: calc(var(--stripe-width) * -0.78);
width: calc(var(--stripe-width) * 0.54);
height: calc(var(--stripe-width) * 0.43);
border-radius: 100%;
background: var(--color-dark);
box-shadow: inset calc(var(--stripe-width) * 0.03) calc(var(--stripe-width) * -0.14) 0 calc(var(--stripe-width) * 0) var(--color-accent);
z-index: 1;
}
.tractor > div:nth-child(4) {
left: calc(var(--stripe-width) * 0.45);
top: calc(var(--stripe-width) * 0.5);
width: calc(var(--stripe-width) * 0.1);
height: calc(var(--stripe-width) * 0.36);
background-color: var(--color-dark);
}
.tractor > div:nth-child(4)::before {
left: calc(var(--stripe-width) * 0.16);
top: calc(var(--stripe-width) * 0.6);
width: calc(var(--stripe-width) * 0.11);
height: calc(var(--stripe-width) * 0.7);
border-radius: 0 100% 100% 0 / 0 0% 100% 0;
box-shadow: inset -0.0vw 0.5vw var(--color-dark), inset -1.7vw 0.9vw 0 -1vw var(--color-accent);
}
.tractor > div:nth-child(4)::after {
left: calc(var(--stripe-width) * -0.27);
top: calc(var(--stripe-width) * 0.6);
width: calc(var(--stripe-width) * 0.13);
height: calc(var(--stripe-width) * 0.65);
border-radius: 0 70% 100% 0 / 0 30% 70% 0;
box-shadow: inset -1.7vw 0.9vw 0 -1vw var(--color-accent);
transform: scaleX(-1);
}
.tractor > div:nth-child(5) {
left: calc(var(--stripe-width) * 0.23);
top: calc(var(--stripe-width) * 1.01);
width: calc(var(--stripe-width) * 0.38);
height: calc(var(--stripe-width) * 0.39);
border-radius: 50%;
background: linear-gradient(0deg, var(--color-light) 25%, var(--color-accent) 25%, var(--color-accent) 77%, var(--color-light) 0%);
box-shadow: inset 0.8vw 0vw var(--color-light);
z-index: 1;
}
.tractor > div:nth-child(5)::before {
left: calc(var(--stripe-width) * 0.03);
top: calc(var(--stripe-width) * 0..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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