svg+js实现Cybertruck夜间公路旅行行驶鼠标交互动画效果代码
代码语言：html
所属分类：动画
代码描述：svg+js实现Cybertruck夜间公路旅行行驶鼠标交互动画效果代码
代码标签： 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%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<filter id="blur3" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.7" />
</filter>
<filter id="blur4" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.3" />
</filter>
<mask id="light">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path id="lightPath" d="M 228.3 58 L 450 53 v30 L 228.3 64.6z" fill="url(#lightGrad)" />
</mask>
</defs>
<g opacity="1">
<!-- sky -->
<rect id="sky" height="50" width="100%" fill="url('#skyGrad')" y="0" />
<!-- mountains -->
<g id="mountain1" filter="url(#blur2)">
<!-- mountain 1 -->
<path id="mtn1" d="M 56 50 L 140 50 L 111 19 L 100 15 L 90 17 L 79 25 Z" fill="silver" />
<!-- mountain 2 -->
<path id="mtn2" d="M 17 50 L 90 50 L 78 23 L 50 17 L 34 27 Z" fill="lightgrey" filter="brightness(80%)" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="370 0" to="-150 0" dur="20s" begin="-2s" repeatCount="indefinite" />
</g>
<g id="mountain2" filter="url(#blur1)">
<path id="mtn3" d="M 118 50 L 60 50 L 72 33 L 83 27 L 102 30 L 114 43 Z" fill="lightgrey" filter="brightness(90%)" />
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="370 0" to="-150 0" dur="20.1s" begin="-12s" repeatCount="indefinite" />
</g>
<g id="mountain3" transform="scale(0.7 0.7) translate(180 25)" filter="url(#blur1)">
<use href="#mtn3" filter="brightness(78%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="320 0" to="-270 0" dur="14.1s" begin="-3s" repeatCount="indefinite" />
</use>
</g>
<!-- sky gradient overlay -->
<rect id="skyOverlay" height="50" width="100%" fill="url('#skyGrad2')" y="0" />
<!-- top gravel -->
<rect height="7" width="100%" fill="url('#gravelGrad')" y="60.5" />
<!-- top grass -->
<rect height="10.5" width="100%" fill="url('#grassGrad')" y="50" />
<!-- trees -->
<g filter="url(#blur3)">
<g id="treeGroup1">
<g id="tree1">
<!-- trunk -->
<rect height="5" width="2" x="99" y="45" fill="brown" />
<!-- tree branch -->
<path id="t1" d="M 92 46 L 108 46 L 100 25 Z" fill="forestgreen" />
</g>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12s" repeatCount="indefinite" />
</g>
<use href="#tree1" filter="brightness(75%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12s" begin="-5s" repeatCount="indefinite" />
</use>
<g transform="translate(0 1)">
<use href="#tree1" filter="brightness(90%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12s" begin="-7s" repeatCount="indefinite" />
</use>
</g>
<g transform="translate(0 1.5)">
<use href="#tree1" filter="brightness(110%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12.1s" begin="-1s" repeatCount="indefinite" />
</use>
</g>
<use href="#tree1" filter="brightness(112%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="12.1s" begin="-11s" repeatCount="indefinite" />
</use>
<g transform="scale(1.1 1.1) translate(0 0)">
<use href="#tree1" filter="brightness(105%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="13.1s" begin="-12.4s" repeatCount="indefinite" />
</use>
<use href="#tree1" filter="brightness(115%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="13.1s" begin="-7.7s" repeatCount="indefinite" />
</use>
</g>
<g transform="scale(0.8 0.8) translate(0 20)">
<use href="#tree1" filter="brightness(111%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="9.1s" begin="-4.4s" repeatCount="indefinite" />
</use>
<use href="#tree1" filter="brightness(95%)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="410 0" to="-110 0" dur="9.1s" begin="-11.4s" repeatCount="indefinite" />
</use>
</g>
</g>
<!-- grass base -->
<rect height="20" width="100%&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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