gsap+svg实现视觉差异滚动效果代码
代码语言：html
所属分类：视觉差异
代码描述：gsap+svg实现视觉差异滚动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
:root {
--sunset: #cae5f7;
}
body {
margin: 0;
padding: 0;
background: #fff;
height: 200vh;
}
p {
position: fixed;
bottom: 2rem;
width: 100%;
text-align: center;
font-family: sans-serif;
opacity: 0.8;
}
svg {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
max-width: 700px;
background: #182f3e;
border: solid 1px #c5cace;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
border-radius: 4px;
}
</style>
</head>
<body >
<svg id="parallax" preserveAspectRatio="xMidYMax slice" viewBox="0 0 553.54 369.03">
<defs>
<linearGradient id="linear-gradient" x1="276.77" y1="369.03" x2="276.77" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="var(--sunset)" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="236.91" y1="253.58" x2="236.91" y2="199.66" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#afaaaf" />
<stop offset="0.27" stop-color="#cfc7cc" />
<stop offset="0.54" stop-color="#e6dce0" />
<stop offset="0.79" stop-color="#f4e9ed" />
<stop offset="1" stop-color="#f9edf1" />
</linearGradient>
<linearGradient id="linear-gradient-3" x1="220.86" y1="253.58" x2="220.86" y2="199.73" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.05" stop-color="#b4afb4" />
<stop offset="0.12" stop-color="#cab4b9" />
<stop offset="0.21" stop-color="#dbb8be" />
<stop offset="0.31" stop-color="#e6bbc1" />
<stop offset="0.46" stop-color="#edbdc3" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-4" x1="271.14" y1="245.34" x2="271.14" y2="199.67" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.11" stop-color="#b4afb4" />
<stop offset="0.29" stop-color="#ceb5bb" />
<stop offset="0.47" stop-color="#e0b9bf" />
<stop offset="0.66" stop-color="#ebbcc2" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-5" x1="431.65" y1="261.67" x2="431.65" y2="160.17" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.04" stop-color="#acadb2" />
<stop offset="0.14" stop-color="#c4b3b8" />
<stop offset="0.25" stop-color="#d7b7bd" />
<stop offset="0.39" stop-color="#e5bbc0" />
<stop offset="0.55" stop-color="#edbcc2" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-6" x1="463.46" y1="251.08" x2="463.46" y2="167.54" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.08" stop-color="#b4b0b5" />
<stop offset="0.22" stop-color="#ceb8bd" />
<stop offset="0.36" stop-color="#e0bec3" />
<stop offset="0.51" stop-color="#ebc1c6" />
<stop offset="0.67" stop-color="#efc2c7" />
</linearGradient>
<linearGradient id="linear-gradient-7" x1="136.56" y1="265.76" x2="136.56" y2="164.35" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.87" stop-color="#efbdc3" />
</linearGradient>
<linearGradient id="linear-gradient-8" x1="186.99" y1="264.18" x2="186.99" y2="173.72" xlink:href="#linear-gradient-4" />
<linearGradient id="linear-gradient-9" x1="356.59" y1="305.44" x2="356.59" y2="199.57" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#a1aaaf" />
<stop offset="0.22" stop-color="#a9aaaf" />
<stop offset="0.55" stop-color="#beaaaf" />
<stop offset="0.96" stop-color="#e2aaaf" />
<stop offset="1" stop-color="#e5aaaf" />
</linearGradient>
<linearGradient id="linear-gradient-10" x1="298.67" y1="303.58" x2="298.67" y2="204.25" xlink:href="#linear-gradient-9" />
<linearGradient id="linear-gradient-11" x1="464.42" y1="304.19" x2="464.42" y2="199.57" gradientUnits="userSpaceOnUse">
<stop offset="0.37" stop-color="#bdaaaf" />
<stop offset="0.6" stop-color="#c0aaaf" />
<stop offset="0.77" stop-color="#c9aaaf" />
<stop offset="0.92" stop-color="#d9aaaf" />
<stop offset="1" stop-color="#e5aaaf" />
</linearGradient>
<linearGradient id="linear-gradient-12" x1="435.67.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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