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

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