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" transform="matrix(1.01445,0.585693,1.85848e-17,0.597989,-20.2258,113.705)">
<rect x="112" y="218.238" width="12" height="22.517" style="fill:url(#_Linear4);"></rect>
</g>
</g>
</g>
</g>
<g id="rainbow-stubs" transform="matrix(1,0,0,1,3.65131,-4.10809)">
<g id="purple-stub" class="stub" transform="matrix(0.866025,-0.5,5.88773e-17,1.29639,-5.61684e-14,-46.1412)">
<rect x="92.178" data-origin="50% 100%" y="322.025" width="17.514" height="5.145" style="fill:url(#_Linear5);"></rect>
</g>
<g id="blue-stub" class="stub" transform="matrix(0.866025,-0.5,5.72615e-17,1.29639,-6.00223e-14,-46.1412)">
<rect data-origin="50% 100%" x="77.113" y="322.025" width="15.842" height="5.145" style="fill:url(#_Linear6);"></rect>
</g>
<g id="green-stub" class="stub" transform="matrix(0.862173,-0.497776,5.33241e-17,1.25088,0.232912,-31.6199)">
<rect data-origin="50% 100%" x="60.463" y="322.025" width="17.537" height="5.333" style="fill:url(#_Linear7);"></rect>
</g>
<g id="yellow-stub" class="stub" transform="matrix(0.865552,-0.499726,5.90601e-17,1.29639,0.0215063,-46.1536)">
<rect data-origin="50% 100%" x="45.399" y="322.025" width="15.889" height="5.145" style="fill:url(#_Linear8);"></rect>
</g>
<g id="orange-stub" class="stub" transform="matrix(0.875715,-0.505594,6.20837e-17,1.25088,-0.278557,-31.3246)">
<rect data-origin="50% 100%" x="28.749" y="322.025" width="17.251" height="5.333" style="fill:url(#_Linear9);"></rect>
</g>
<g id="red-stub" class="stub" transform="matrix(0.840053,-0.485005,1.00554e-17,0.350115,0.355424,258.331)">
<rect data-origin="50% 100%" x="13.685" y="322.161" width="16.315" height="19.053" style="fill:url(#_Linear10);"></rect>
</g>
</g>
<g id="rainbow-mask" transform="matrix(0.68386,-0.394827,3.79619e-17,0.777778,15.8463,141.073)">
<mask id="red-mask"><path d="M10,280c0,-74.5 26.367,-138.133 79.1,-190.9c52.767,-52.733 117.159,-81.671 191.659,-81.671c74.533,0 137.223,26.981 189.957,79.714c33.166,33.167 56.084,72.59 68.384,114.357" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:36px;"/></mask>
<mask id="orange-mask"><path d="M30,280c0,-68.967 24.417,-127.883 73.25,-176.75c48.867,-48.833 107.783,-73.25 176.75,-73.25c69,0 126.686,21.167 175.519,70c43.567,43.6 68.931,98.433 73.631,158" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
<mask id="yellow-mask"><path d="M50,280c0,-63.467 22.467,-117.667 67.4,-162.6c44.933,-44.933 99.133,-67.4 162.6,-67.4c63.5,0 117.717,22.467 162.65,67.4c26,26 44.467,55.117 55.4,87.35" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
<mask id="green-mask"><path d="M70.05,280c0,-57.933 20.5,-107.417 61.5,-148.45c41.033,-41 90.517,-61.5 148.45,-61.5c57.967,0 107.467,20.5 148.5,61.5c34.467,34.5 55.45,74.983 62.95,121.45" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
<mask id="blue-mask"><path d="M90.05,280c0,-52.4 18.55,-97.167 55.65,-134.3c37.133,-37.1 81.917,-55.65 134.35,-55.65c52.467,0 97.25,18.55 134.35,55.65c17.833,17.833 31.383,37.433 40.65,58.8" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:36.09px;"/></mask>
<mask id="purple-mask"><path d="M110.1,280c0.033,-46.867 16.633,-86.9 49.8,-120.1c33.233,-33.2 73.3,-49.8 120.2,-49.8c46.933,0 87,16.6 120.2,49.8c24.333,24.367 41.121,52.4 47.621,84.1" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
</g>
<g id="rainbow" transform="matrix(1,0,0,1,-95.3487,-22.8919)">
<g id="purple" class="bow" mask="url(#purple-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M434.05,184.25c5.533,8.7 10.233,17.767 14.1,27.2l0.45,1.15l0.4,1l1.1,2.9l0.35,0.9l0.3,0.8l0,0.05l2.4,7.25l0.15,0.45l0.05,0.1l0.1,0.4l0.9,3.15l0.15,0.55l0.05,0.3l0,0.7c0,3.067 -1.067,5.7 -3.2,7.9l-0.05,0.05c-2.2,2.1 -4.817,3.15 -7.85,3.15c-3.067,0 -5.683,-1.05 -7.85,-3.15l0,-0.05c-1.267,-1.267 -2.15,-2.683 -2.65,-4.25l0,-0.05l-0.25,-0.8c-5.133,-17.5 -13.367,-33.7 -24.7,-48.6c-4.667,-6.133 -9.85,-12.05 -15.55,-17.75c-31.033,-31.033 -68.5,-46.55 -112.4,-46.55c-43.933,0 -81.417,15.517 -112.45,46.55c-31.033,31.033 -46.55,68.5 -46.55,112.4l-22.05,0c0,-49.967 17.667,-92.633 53,-128c35.367,-35.333 78.033,-53 128,-53c49.967,0 92.617,17.667 127.95,53c10.133,10.133 18.833,20.867 26.1,32.2l0,0.05" style="fill:#9b59b6;fill-rule:nonzero;"></path>
</g>
<g id="blue" class="bow" mask="url(#blue-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M433.2,184.75c-7.2,-11.267 -15.85,-21.95 -25.95,-32.05c-35.133,-35.133 -77.55,-52.7 -127.25,-52.7c-49.7,0 -92.133,17.567 -127.3,52.7c-35.133,35.167 -52.7,77.6 -52.7,127.3l-20,0c0,-55.2 19.517,-102.35 58.55,-141.45c39.1,-39.033 86.25,-58.55 141.45,-58.55c55.2,0 102.333,19.517 141.4,58.55c14.3,14.333 25.983,29.733 35.05,46.2c3.967,7.233 7.45,14.683 10.45,22.35l-1.75,-2.35c-2,-2 -4.4,-3 -7.2,-3c-2.767,0 -5.133,1 -7.1,3c-2,1.967 -3,4.333 -3,7.1l0.05,1.1l0.15,1l-0.4,-1l-0.45,-1.1c-3.833,-9.4 -8.5,-18.433 -14,-27.1" style="fill:#3498db;fill-rule:nonzero;"></path>
</g>
<g id="green" class="bow" mask="url(#green-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M479.95,184.35c4.5,9.267 8.283,18.85 11.35,28.75l0.25,0.9l0.7,2.35l0.05,0.1l0,0.1l0.1,0.3l0.05,0.05l0.2,0.75l-0.05,0l0.7,2.25l0,0.2l0.05,1.1l0,0.1c0,2.667 -0.8,5.017 -2.4,7.05c2.1,0.4 3.983,1.433 5.65,3.1c0.967,0.967 1.7,2.017 2.2,3.15l0,-0.05l0.3,0.85l0.35,0.8l0.1,0.25l0.3,1.85l0,1c0,3.1 -1.067,5.767 -3.2,8l-0.05,0.05c-2.233,2.1 -4.883,3.15 -7.95,3.15c-3.067,0 -5.7,-1.05 -7.9,-3.15l0,-0.05l-1.2,-1.5l-0.05,0l-0.65,-1.05l-0.05,-0.1l-0.0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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