svg+vue绘制卡车效果
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tesla truck</title>
<style>
html,
body {
background-color: #222;
height: 100%;
margin: 0;
}
#app {
height: 100%;
}
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container svg {
background: linear-gradient(to right, #c2c7cd, #fefefc);
height: 90%;
filter: blur(0.5px);
}
</style>
</head>
<body translate="no">
<div id="app">
<div class="container">
<svg viewBox="0 0 875 492">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#aaaeb3"></stop>
<stop offset="10%" stop-color="#aaaeb3"></stop>
<stop offset="50%" stop-color="#94959a"></stop>
<stop offset="80%" stop-color="#70747f"></stop>
<stop offset="100%" stop-color="#6b727a"></stop>
</linearGradient>
<linearGradient id="chasis-top-grad" x1="85%" y1="10%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#7c8fa7"></stop>
<stop offset="100%" stop-color="#a9b9c9"></stop>
</linearGradient>
<linearGradient id="tire-grad" x1="100%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#272a35"></stop>
<stop offset="100%" stop-color="#101115"></stop>
</linearGradient>
<linearGradient id="inner-wheel" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1b202c"></stop>
<stop offset="100%" stop-color="#5a6779"></stop>
</linearGradient>
<mask id="window-mask">
<rect fill="white" width="875" height="492"></rect>
<path :d="windows" fill="black"></path>
</mask>
<mask id="back-windows">
<path :d="windows" fill="white"></path>
<path d="M 211 212 268 192 262 210 Z" fill="black"></path>
<path d="M 311 189 387 165 407 168 398 206 305 211 Z" fill="black"></path>
<path d="M 428 170 511 182 512 200 431 203 Z" fill="black"></path>
</mask>
<filter id="shadowBlur">
<feGaussianBlur in="SourceGraphic" stdDeviation="30, 5"></feGaussianBlur>
</filter>
</defs>
<path d="M 875 168, 484 204, 0 133, 0 492, 875 492Z" fill="#828b9c">// mountains</path>
<path d="M 875 225 0 176 0 492 875 492Z" fill="#b0acad"></path>
<rect x="0" y="320" width="875" height="130" fill="#8d949e"></rect>
<rect x="0" y="450" width="875" height="130" fill="#98938f"></rect>
<path d="M 93 372 96 355 771 367 766 384 Z" fill="rgba(0,0,0,0.75)" filter="url(#shadowBlur)"></path>
<circle cx="200" cy="310" r="54" fill="black"></circle>
<circle cx="630" cy="310" r="54" fill="black"></circle>
<path :d="blackBehind" fill="#111"></path>
<path :d="chasisMiddle" fill="url(#grad1)"></path>
<path :d="chasisTop" fill="url(#chasis-top-grad)" mask="url(#window-mask)"></path>
<path :d="front" fill="#3f3d42"></path>
<path :d="headlights" fill="white"></path>
<path d="M 263 300, 574 298, 571 319, 265 319 Z" fill="#252733"></path>
<line x1="544" y1="214" x2="800" y2="206" stroke="rgb(0,0,0,0.5)"></line>
<line x1="544" y1="214" x2="111" y2="232" stroke="rgb(255,255,255,0.5)"></line>
<path :d="windows" fill="rgba(65, 70, 80, 0.6)"></path>
<path :d="windows" fill="black" mask="url(#back-windows)"></path>
<path :d="windows" fill="rgba(100, 110, 128, 0.5)&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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