gsap+svg实现圣诞彩虹屋动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现圣诞彩虹屋动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
min-height: 100vh;
margin: 0;
padding: 1rem;
color: #FFFFFF;
/*background-color: #ED839A;*/
background: -webkit-linear-gradient(180deg, rgba(228,71,113,1) 0%, rgba(237,131,154,1) 100%);
background: linear-gradient(180deg, rgba(228,71,113,1) 0%, rgba(237,131,154,1) 100%);
/*background: -webkit-linear-gradient(180deg, #152966 0%, #522550 100%);
background: linear-gradient(180deg, #152966 0%, #522550 100%);*/
}
.svg-wrapper {
position: relative;
}
svg {
display: block;
max-height: 90vh;
margin: auto;
}
.snowbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.snow {
position: absolute;
width: 0.625rem;
height: 0.625rem;
background-color: #ECF0F1;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body >
<main class="main">
<section class="svg-wrapper">
<svg width="100%" height="100%" viewBox="0 0 418 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<defs>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-9.10111,-25.977,47.7686,0,71.1011,341.023)"><stop offset="0" style="stop-color:#c2576f;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e96985;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-9.10111,-25.977,47.7686,0,71.1011,341.023)"><stop offset="0" style="stop-color:#c2576f;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e96985;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.28571,-22.5167,4.05549,0,119.929,240.755)"><stop offset="0" style="stop-color:#c84965;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e65474;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.79175,-4.58311,5.56692,0,104.883,327.17)"><stop offset="0" style="stop-color:#894fa1;stop-opacity:1"></stop><stop offset="1" style="stop-color:#9b59b6;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.44057,-4.58311,5.54621,0,89.3961,327.17)"><stop offset="0" style="stop-color:#2e87c3;stop-opacity:1"></stop><stop offset="1" style="stop-color:#3498db;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.67101,-4.74986,5.54225,0,72.7269,327.358)"><stop offset="0" style="stop-color:#26aa5e;stop-opacity:1"></stop><stop offset="1" style="stop-color:#2ecc71;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.2057,-4.58311,4.88822,0,57.1797,327.17)"><stop offset="0" style="stop-color:#d3ab0d;stop-opacity:1"></stop><stop offset="1" style="stop-color:#f1c40f;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02737,-4.74986,3.02801,0,40.8921,327.358)"><stop offset="0" style="stop-color:#d87620;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e67e22;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.39935,-16.9702,5.08614,0,25.8742,341.214)"><stop offset="0" style="stop-color:#d44f42;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e85748;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear12" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.05404e-15,110.851,-158.392,0,488,27.7128)"><stop offset="0" style="stop-color:#22bbf7;stop-opacity:1"></stop><stop offset="1" style="stop-color:#056084;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear13" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.68766e-13,110.851,-158.392,0,368,387.979)"><stop offset="0" style="stop-color:#56caf8;stop-opacity:1"></stop><stop offset="1" style="stop-color:#0884b5;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear14" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(27.7128,-16,6.19677,0,249.415,320)"><stop offset="0" style="stop-color:#000;stop-opacity:0.3"></stop><stop offset="1" style="stop-color:#000;stop-opacity:0"></stop></linearGradient>
<linearGradient id="_Linear15" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-31.1769,-18,5.47723,0,471.118,320)"><stop offset="0" style="stop-color:#000;stop-opacity:0.3"></stop><stop offset="1" style="stop-color:#000;stop-opacity:0"></stop></linearGradient>
<linearGradient id="_Linear16" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-18,31.1769,-36,0,366.172,55.3513)"><stop offset="0" style="stop-color:#39a598;stop-opacity:1"></stop><stop offset="1" style="stop-color:#4dccbd;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear18" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16,27.7128,-10.6667,0,464,388.054)"><stop offset="0" style="stop-color:#34b7a7;stop-opacity:1"></stop><stop offset="1" style="stop-color:#91e0d6;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear19" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(32,7.10543e-15,0,27.7128,452,446.869)"><stop offset="0" style="stop-color:#b9eafd;stop-opacity:1"/><stop offset="1" style="stop-color:#d9f4fe;stop-opacity:1"/></linearGradient>
<mask id="house-mask">
<path d="M135.415,291l0,-205.591l221.703,0l0,205.591l-110.851,64l-110.852,-64Z" style="fill:#FFF;"></path>
</mask>
<mask id="side-window-mask">
<g transform="matrix(0.974279,0.5625,-6.245e-17,1.29904,-159.033,-45)">
<rect data-origin="100% 0%" x="352" y="69.282" width="32" height="27.713" style="fill:#FFF;"/>
</g>
</mask>
</defs>
<g id="rainbow-slot-mask" transform="matrix(11.5145,-6.6479,1.60518,0.926751,3679.38,-2354.7)">
<clipPath id="rainbow-slot-mask-path">
<rect data-origin="0% 50%" x="-364.099" y="319.617" width="8.432" height="7.553"></rect>
</clipPath>
<g clip-path="url(#rainbow-slot-mask-path)">
<g id="rainbow-slot" transform="matrix(0.0434235,0.311492,-0.0752117,0.539519,-336.421,123.349)">
<g id="rainbow-slot-bg" transform="matrix(1,-4.44089e-16,-5.55112e-16,1,-3.65131,3.89191)">
<path d="M97.044,305.915l-97.044,56.028l0,16.944l97.044,-56.029l0,-16.943Zm12.173,7.028l-12.173,-7.028l0,13.465l12.173,7.028l0,-13.465Z" style="fill:url(#_Linear2);"></path>
</g>
<g id="rainbow-slot-back" transform="matrix(0.866463,-0.500253,6.36692e-18,0.746277,-3.65131,130.724)">
<rect x="0" y="315.046" width="112" height="22.704" style="fill:url(#_Linear3);"></rect>
</g>
<g id="rainbow-slot-side" tr.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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