css+svg实现阿尔托的奥德赛禅系风格游戏风景效果代码
代码语言：html
所属分类：布局界面
代码描述：css+svg实现阿尔托的奥德赛禅系风格游戏风景效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,
body {
min-height: 100vh;
width: 100%;
background-color: black;
overflow: hidden;
}
#draw {
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
}
#draw svg {
min-height: 100vh;
}
#draw * {
transform-origin: center;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
#draw .cloud,
#draw #baloons,
#draw #birds,
#draw #birds-paradise,
#draw #sky {
transition-duration: 14s;
}
#draw #whitesun > path {
transition-duration: 4s;
}
#draw #land1,
#draw #land2,
#draw #whitesun,
#draw #land3,
#draw #glow {
transition-duration: 4s;
}
#draw #land1 {
transform: translateY(-10%) scale(1.3);
}
#draw #land2,
#draw #whitesun {
transform: translateY(-8%) scale(1.2);
}
#draw #land3 {
transform: translateY(-10%) scale(1.3);
}
#draw #c-left1,
#draw #c-left2,
#draw #c-left3 {
transform: translateX(-20%) translateY(-10%) scale(1.5);
opacity: 0.01;
}
#draw #c-right1,
#draw #c-right2,
#draw #c-right3 {
transform: translateX(20%) translateY(-10%) scale(1.5);
opacity: 0.01;
}
#draw #baloons,
#draw #birds-paradise {
transform: translateX(-5%) translateY(-5%) scale(1.2);
}
#draw #birds {
transform: translateX(5%) translateY(-5%) scale(1.2);
}
#draw #sky {
transform: translateY(30%);
}
#draw #whitesun > path {
opacity: 0.5;
}
#draw.animate #land1,
#draw.animate #land2,
#draw.animate #whitesun,
#draw.animate #land3,
#draw.animate #sky,
#draw.animate #glow {
transform: translateX(0%) translateY(0%) scale(1);
}
#draw.animate .cloud,
#draw.animate #baloons,
#draw.animate #birds,
#draw.animate #birds-paradise {
transform: translateX(0%) translateY(0%) scale(1) !important;
}
#draw.animate .cloud {
opacity: 0.15 !important;
}
</style>
</head>
<body>
<div id="draw"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 250 1000 563">
<defs>
<style>
.cls-1,
.cls-21,
.cls-4,
.cls-5 {
fill: #fff;
}
.cls-2 {
fill: url(#gradiant1);
}
.cls-3 {
opacity: 0.89;
}
.cls-4 {
opacity: 0.43;
}
.cls-5 {
opacity: 0.34;
}
.cloud {
fill: #fff4f7;
opacity: 0.16;
}
.cls-7 {
fill: #654877;
}
.cls-8 {
opacity: 0.69;
}
.cls-11,
.cls-12,
.cls-13,
.cls-14,
.cls-15,
.cls-16,
.cls-9 {
fill: #2d284f;
}
.cls-10 {
opacity: 0.49;
}
.cls-11 {
opacity: 0.96;
}
.cls-12 {
opacity: 0.92;
}
.cls-13 {
opacity: 0.9;
}
.cls-14 {
opacity: 0.62;
}
.cls-15 {
opacity: 0.58;
}
.cls-16 {
opacity: 0.56;
}
.cls-17 {
fill: #141023;
}
.cls-18 {
fill: url(#gradiant2);
}
.cls-19 {
filter: url(#blur);
}
.cls-20 {
fill: url(#gradiant3);
}
.cls-21 {
opacity: 0;
}
</style>
<linearGradient id="gradiant1" x1="500" y1="10.35" x2="500" y2="710.44" gradientUnits="userSpaceOnUse">
<stop offset="0.2" stop-color="#000000" />
<stop offset="0.42" stop-color="#4d3870" />
<stop offset="1" stop-color="#ff83a7" />
</linearGradient>
<radialGradient id="gradiant2" cx="500" cy="591.82" r="280.24" gradientUnits="userSpaceOnUse">
<stop offset="0.13" stop-color="#f4457b" stop-opacity="0.5" />
<stop offset="0.58" stop-color="#f2387b" stop-opacity="0.3" />
<stop offset="0.98" stop-color="#f4377f" stop-opacity="0" />
</radialGradient>
<filter id="blur" name="blur">
<feGaussianBlur stdDeviation="2" in="SourceGraphic" />
</filter>
<linearGradient id="gradiant3" x1="500" y1="357.2" x2="500" y2="257.62" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" stop-opacity="0" />
<stop offset="0.2" stop-color="#fff" stop-opacity="0.5" />
<stop offset="1" stop-color="#fff" />
</linearGradient>
<symbol id="star" data-name="star" viewBox="0 0 6.29 6.29">
<path class="cls-1" d="M6.29,3.14A7.21,7.21,0,0,0,3.14,6.29,5.76,5.76,0,0,0,0,3.14,5.34,5.34,0,0,0,3.14,0C3.41,1,4.4,2.08,6.29,3.14Z" />
</symbol>
</defs>
<g id="sky">
<polygon class="cls-2" points="0 0 0 250 0 811.21 1000 811.21 1000 250 1000 0 0 0" />
<use width="6.29" height="6.29" transform="translate(926.11 321.87) scale(0.58)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(824.93 322.03) scale(0.42)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(566.38 251.11) scale(0.79)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(430.44 304.1) scale(0.3)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(318.23 362.89) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(295.31 381.01) scale(0.22)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(292.33 388.81) scale(0.25)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(595.61 254.47) scale(0.68)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(815.69 237.29) scale(0.61)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(350.54 343.5) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(398.14 317.17) scale(0.18)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(497.55 212.97) scale(0.27)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(314.79 350.86) scale(0.39)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(454.16 294.69) scale(0.13)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(466.22 203.67) scale(0.35)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(265.46 277.6) scale(0.52)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(369.38 124.26) scale(0.45)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(333.22 286.4) scale(0.62)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(443.53 332.31) scale(0.35)" xlink:href="#star" />
<g class="cls-3">
<path class="cls-4" d="M532.8-89.8a4.82,4.82,0,0,0-2.13,2.13,3.88,3.88,0,0,0-2.13-2.13,3.66,3.66,0,0,0,2.13-2.13C530.85-91.23,531.52-90.52,532.8-89.8Z" transform="translate(0 250)" />
</g>
<use width="6.29" height="6.29" transform="translate(421.12 327.87) scale(0.28)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(495.32 223.56) scale(0.28)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(482.4 285.5) scale(0.14)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(223.75 356.41) scale(0.57)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(566.29 91.7) scale(0.36)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(506.9 268.62) scale(0.27)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(495.13 82.69) scale(0.58)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(320.91 140.14) scale(0.61)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(207.65 164.9) scale(0.02)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(349.66 74.71) scale(0.27)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(112.44 151.25) scale(0.41)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(243.15 49.77) scale(0.52)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(221.64 66.62) scale(0.6)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(119.43 101.2) scale(0.31)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(217.08 32.75) scale(0.61)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(135.55 73.25) scale(0.5)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(65.38 89.77) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(80.82 87.96) scale(0.24)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(80.7 91.04) scale(0.24)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(87.78 87.84) scale(0.26)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(87.65 90.8) scale(0.25)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(163.75 87.04) scale(0.61)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(195.78 92.07) scale(0.17)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(403.84 134.29) scale(0.55)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(610.24 93.51) scale(0.34)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(861.69 123.36) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(851.96 126.62) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(616.92 78.79) scale(0.3)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(540.44 113.79) scale(0.5)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(339.3 140.34) scale(0.67)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(193.91 155.06) scale(0.27)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(142.79 164.64) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(117.36 163.85) scale(0.5)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(167.7 170.85) scale(0.06)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(503.3 182.35) scale(0.36)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(520.65 134.41) scale(0.51)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(579.85 98.71) scale(0.62)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(492.64 168.07) scale(0.47)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(482.35 278.07) scale(0.23)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(161.28 234.41) scale(0.48)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(130.38 241.58) scale(0.47)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(132.21 238.87) scale(0.46)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(136.67 244.4) scale(0.46)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(429.82 334.32) scale(0.1)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(496.23 187.67) scale(0.35)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(889.38 248.44) scale(0.48)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(928.86 247.21) scale(0.8)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(863.74 239.93) scale(0.39)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(862.72 234.8) scale(0.6)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(617.99 87.83) scale(0.32)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(491.9 226.46) scale(0.26)" xlink:href="#star" />
<use width="6.29" height="6.29" transform="translate(395.85 289.41) scale(0.51)&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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