纯css实现一个拖拉机绘画动画效果-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看