svg+js实现Cybertruck夜间公路旅行行驶鼠标交互动画效果代码-html代码-BFW代码库

svg+js实现Cybertruck夜间公路旅行行驶鼠标交互动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+js实现Cybertruck夜间公路旅行行驶鼠标交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">





    <style>
        body {
        	margin: 0 auto;
        	background: #030405;
        
        }
        svg {
        	cursor: none;
        	position: absolute;
        	bottom: 0;
        	width: 100%;
        	height: auto;
        	left: 50%;
        	transform: translate(-50%);
        }
        #car, #lights, #lightPath {
        	transition: 3000ms;
        }
    </style>


</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
	<defs>
		<linearGradient id="darkGrad" gradientTransform="rotate(90)">
			<stop offset="5%" stop-color="#000" />
			<stop offset="95%" stop-color="#444" />
		</linearGradient>
		<linearGradient id="lightGrad">
			<stop offset="50%" stop-color="#000" />
			<stop offset="100%" stop-color="#fff" />
		</linearGradient>
		<linearGradient id="skyGrad" gradientTransform="rotate(90)">
			<stop offset="0%" stop-color="rgba(0,0,0,0)" />
			<stop offset="50%" stop-color="rgba(0,0,0,0)" stop-opacity="0" />
			<stop offset="95%" stop-color="#fff" />
		</linearGradient>
		<linearGradient id="skyGrad2" gradientTransform="rotate(90)">
			<stop offset="0%" stop-color="rgba(0,0,0,0)" stop-opacity="0" />
			<stop offset="100%" stop-color="#fff" stop-opacity="0.8" />
		</linearGradient>
		<linearGradient id="grassGrad" gradientTransform="rotate(90)">
			<stop offset="0%" stop-color="darkgreen" />
			<stop offset="70%" stop-color="green" />
		</linearGradient>
		<linearGradient id="grassGradFront" gradientTransform="rotate(90)">
			<stop offset="5%" stop-color="orange" />
			<stop offset="60%" stop-color="#c6e24d" />
		</linearGradient>
		<linearGradient id="gravelGrad" gradientTransform="rotate(90)">
			<stop offset="0%" stop-color="#c6e24d" />
			<stop offset="60%" stop-color="orange" />
		</linearGradient>
		<linearGradient id="windowGrad" gradientTransform="rotate(-8)">
			<stop offset="0%" stop-color="rgba(20,50,50,0.8)" />
			<stop offset="15%" stop-color="rgba(20,50,50,0.8)" />
			<stop offset="50%" stop-color="rgba(20,50,50,0.95)" />
		</linearGradient>
		<linearGradient id="tireGrad">
			<stop offset="0%" stop-color="#000" />
			<stop offset="50%" stop-color="#444" />
			<stop offset="100%" stop-color="#000" />
		</linearGradient>
		<filter id="blur1" x="-100%" y="-100%" width="300%" height="300%">
			<feGaussianBlur in="SourceGraphic" stdDeviation="0.8" />
		</filter>
		<filter id="blur2" x="-100%&quo.........完整代码请登录后点击上方下载按钮下载查看