TweenMax+svg新年快乐动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg新年快乐动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Sail" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
background: #0b0b0c;
overflow: hidden;
}
svg {
width: 100vw;
height: 100vh;
position: absolute;
}
h2 {
position: absolute;
top: 20vh;
color: white;
width: 100%;
text-align: center;
font-family: "Sail", cursive;
font-weight: normal;
font-size: 40px;
}
.text, #frame, #confetti, #fireworks, button {
visibility: hidden;
}
@media screen and (min-width: 600px) and (min-height: 500px) {
h2 {
font-size: 80px !important;
}
}
button {
position: absolute;
bottom: 7vmin;
left: 50%;
transform: translateX(-70px);
background: #1b5e0c;
color: white;
font-family: Courier, sans-serif;
font-size: 18px;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
outline: none;
}
button .arrow {
display: inline-block;
}
</style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="406.6mm" height="389.4mm" viewBox="0 0 1152.5 1103.7">
<defs>
<linearGradient id="linear-gradient" x1="-1644.59" y1="-676.47" x2="-1650.19" y2="-680.68" gradientTransform="matrix(1 .1 -.1 1 1995.52 1900.11)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#e1c7e1" />
<stop offset="0.41" stop-color="#eddded" />
<stop offset="0.93" stop-color="#fff" />
</linearGradient>
<linearGradient id="linear-gradient-2" x1="-1643.66" y1="-677.69" x2="-1649.26" y2="-681.91" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-3" x1="-1643.91" y1="-677.36" x2="-1649.51" y2="-681.58" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-4" x1="-1643.53" y1="-677.87" x2="-1649.13" y2="-682.1" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-5" x1="-1643.63" y1="-677.73" x2="-1649.23" y2="-681.95" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-7" x1="-1644.28" y1="-676.87" x2="-1649.88" y2="-681.09" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-9" x1="1599.66" y1="815.68" x2="1594.06" y2="811.46" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-10" x1="1600.59" y1="814.45" x2="1594.99" y2="810.23" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-11" x1="1600.72" y1="814.28" x2="1595.1" y2="810.04" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-12" x1="1600.34" y1="814.78" x2="1594.75" y2="810.56" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-13" x1="1600.62" y1="814.41" x2="1595.02" y2="810.19" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-15" x1="1599.98" y1="815.27" x2="1594.38" y2="811.05" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-17" x1="-1404.79" y1="3347.77" x2="-1410.39" y2="3343.55" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-18" x1="-1403.85" y1="3346.52" x2="-1409.44" y2="3342.32" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-19" x1="-1404.11" y1="3346.86" x2="-1409.71" y2="3342.65" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-20" x1="-1403.75" y1="3346.38" x2="-1409.35" y2="3342.16" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-21" x1="-1403.84" y1="3346.51" x2="-1409.43" y2="3342.3" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-23" x1="-1404.47" y1="3347.34" x2="-1410.07" y2="3343.12" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-25" x1="1549.24" y1="1874.54" x2="1543.64" y2="1870.32" gradientTransform="rotate(-133.2 679.38 1734.56)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-26" x1="1550.17" y1="1873.31" x2="1544.57" y2="1869.09" gradientTransform="rotate(-133.2 679.38 1734.56)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-27" x1="1550.3" y1="1873.13" x2="1544.72" y2="1868.92" gradientTransform="rotate(-133.2 679.38 1734.56)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-28" x1="1549.92" y1="1873.64" x2="1544.32" y2="1869.42" gradientTransform="rotate(-133.2 679.38 1734.56)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-29" x1="1550.2" y1="1873.27" x2="1544.6" y2="1869.05" gradientTransform="rotate(-133.2 679.38 1734.56)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-31" x1="1549.55" y1="1874.12" x2="1543.95" y2="1869.91" gradientTransform="rotate(-133.2 679.38 1734.56)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-33" x1="-91.47" y1="-188.97" x2="-97.07" y2="-193.19" gradientTransform="rotate(-50.4 1387.98 -2.92)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-34" x1="-90.53" y1="-190.22" x2="-96.13" y2="-194.44" gradientTransform="rotate(-50.4 1387.98 -2.92)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-35" x1="-90.42" y1="-190.37" x2="-96.02" y2="-194.59" gradientTransform="rotate(-50.4 1387.98 -2.92)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-36" x1="-90.79" y1="-189.87" x2="-96.39" y2="-194.09" gradientTransform="rotate(-50.4 1387.98 -2.92)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-37" x1="-90.52" y1="-190.24" x2="-96.1" y2="-194.45" gradientTransform="rotate(-50.4 1387.98 -2.92)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-39" x1="-91.15" y1="-189.4" x2="-96.75" y2="-193.62" gradientTransform="rotate(-50.4 1387.98 -2.92)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-41" x1="1066.98" y1="898.02" x2="1061.38" y2="893.8" gradientTransform="rotate(-97.8 675.77 1203.72)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-42" x1="1067.92" y1="896.78" x2="1062.32" y2="892.56" gradientTransform="rotate(-97.8 675.77 1203.72)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-43" x1="1067.66" y1="897.13" x2="1062.06" y2="892.91" gradientTransform="rotate(-97.8 675.77 1203.72)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-44" x1="1068.05" y1="896.6" x2="1062.46" y2="892.39" gradientTransform="rotate(-97.8 675.77 1203.72)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-45" x1="1067.94" y1="896.74" x2="1062.35" y2="892.53" gradientTransform="rotate(-97.8 675.77 1203.72)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-47" x1="1067.3" y1="897.6" x2="1061.7" y2="893.39" gradientTransform="rotate(-97.8 675.77 1203.72)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-49" x1="1679.21" y1="1545.02" x2="1673.61" y2="1540.8" gradientTransform="rotate(-151.4 734.7 1255.82)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-50" x1="1680.15" y1="1543.77" x2="1674.55" y2="1539.56" gradientTransform="rotate(-151.4 734.7 1255.82)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-51" x1="1680.25" y1="1543.63" x2="1674.65" y2="1539.41" gradientTransform="rotate(-151.4 734.7 1255.82)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-52" x1="1679.89" y1="1544.11" x2="1674.29" y2="1539.89" gradientTransform="rotate(-151.4 734.7 1255.82)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-53" x1="1680.15" y1="1543.76" x2="1674.57" y2="1539.56" gradientTransform="rotate(-151.4 734.7 1255.82)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-55" x1="1679.53" y1="1544.59" x2="1673.93" y2="1540.37" gradientTransform="rotate(-151.4 734.7 1255.82)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-57" x1="-683.79" y1="-1402.74" x2="-689.39" y2="-1406.96" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-58" x1="-682.86" y1="-1403.97" x2="-688.46" y2="-1408.19" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-59" x1="-682.73" y1="-1404.15" x2="-688.34" y2="-1408.38" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-60" x1="-683.11" y1="-1403.64" x2="-688.71" y2="-1407.86" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-61" x1="-682.83" y1="-1404.01" x2="-688.42" y2="-1408.22" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-63" x1="-683.48" y1="-1403.15" x2="-689.08" y2="-1407.37" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-65" x1="-1690.8" y1="-1219.82" x2="-1696.41" y2="-1224.05" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-66" x1="2022.66" y1="1157.73" x2="2017.06" y2="1153.51" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-67" x1="2023.58" y1="1156.5" x2="2017.99" y2="1152.28" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-68" x1="2023.71" y1="1156.33" x2="2018.1" y2="1152.09" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-69" x1="2023.34" y1="1156.83" x2="2017.74" y2="1152.61" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-70" x1="2023.61" y1="1156.46" x2="2018.03" y2="1152.25" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-72" x1="2022.97" y1="1157.32" x2="2017.37" y2="1153.1" gradientTransform="rotate(-129 864.44 1135.75)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-74" x1="2079.91" y1="1264.78" x2="2074.31" y2="1260.56" gradientTransform="rotate(-106.1 745.81 1408.06)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-75" x1="2080.84" y1="1263.55" x2="2075.25" y2="1259.34" gradientTransform="rotate(-106.1 745.81 1408.06)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-76" x1="2080.97" y1="1263.37" x2="2075.37" y2="1259.15" gradientTransform="rotate(-106.1 745.81 1408.06)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-77" x1="2080.59" y1="1263.89" x2="2074.99" y2="1259.67" gradientTransform="rotate(-106.1 745.81 1408.06)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-78" x1="2080.87" y1="1263.51" x2="2075.27" y2="1259.29" gradientTransform="rotate(-106.1 745.81 1408.06)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-80" x1="2080.22" y1="1264.37" x2="2074.62" y2="1260.15" gradientTransform="rotate(-106.1 745.81 1408.06)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-82" x1="-2276.47" y1="2925.66" x2="-2282.07" y2="2921.44" gradientTransform="rotate(72.5 932.97 3415.57)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-83" x1="-2275.54" y1="2924.42" x2="-2281.13" y2="2920.21" gradientTransform="rotate(72.5 932.97 3415.57)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-84" x1="-2275.8" y1="2924.77" x2="-2281.39" y2="2920.55" gradientTransform="rotate(72.5 932.97 3415.57)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-85" x1="-2275.4" y1="2924.24" x2="-2281.01" y2="2920.02" gradientTransform="rotate(72.5 932.97 3415.57)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-86" x1="-2275.51" y1="2924.39" x2="-2281.12" y2="2920.16" gradientTransform="rotate(72.5 932.97 3415.57)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-88" x1="-2276.16" y1="2925.24" x2="-2281.76" y2="2921.02" gradientTransform="rotate(72.5 932.97 3415.57)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-90" x1="-1204.38" y1="182.9" x2="-1209.98" y2="178.68" gradientTransform="rotate(20.4 -134.61 3977.78)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-91" x1="-1203.45" y1="181.66" x2="-1209.05" y2="177.44" gradientTransform="rotate(20.4 -134.61 3977.78)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-92" x1="-1203.7" y1="181.99" x2="-1209.3" y2="177.77" gradientTransform="rotate(20.4 -134.61 3977.78)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-93" x1="-1203.32" y1="181.49" x2="-1208.92" y2="177.27" gradientTransform="rotate(20.4 -134.61 3977.78)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-94" x1="-1203.43" y1="181.62" x2="-1209.02" y2="177.41" gradientTransform="rotate(20.4 -134.61 3977.78)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-96" x1="-1204.07" y1="182.48" x2="-1209.67" y2="178.26" gradientTransform="rotate(20.4 -134.61 3977.78)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-98" x1="-779.21" y1="-1938.3" x2="-784.8" y2="-1942.52" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-99" x1="-778.28" y1="-1939.53" x2="-783.88" y2="-1943.75" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-100" x1="-778.15" y1="-1939.71" x2="-783.77" y2="-1943.95" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-101" x1="-778.53" y1="-1939.2" x2="-784.13" y2="-1943.42" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-102" x1="-778.25" y1="-1939.57" x2="-783.83" y2="-1943.78" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-104" x1="-778.89" y1="-1938.72" x2="-784.49" y2="-1942.94" gradientTransform="rotate(10.1 -13478 4014.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-106" x1="562.08" y1="2163.94" x2="556.48" y2="2159.72" gradientTransform="rotate(105 1304.02 1091.37)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-107" x1="563.01" y1="2162.71" x2="557.4" y2="2158.49" gradientTransform="rotate(105 1304.02 1091.37)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-108" x1="563.14" y1="2162.53" x2="557.57" y2="2158.33" gradientTransform="rotate(105 1304.02 1091.37)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-109" x1="562.75" y1="2163.05" x2="557.15" y2="2158.83" gradientTransform="rotate(105 1304.02 1091.37)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-110" x1="563.03" y1="2162.68" x2="557.44" y2="2158.46" gradientTransform="rotate(105 1304.02 1091.37)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-112" x1="562.39" y1="2163.53" x2="556.79" y2="2159.31" gradientTransform="rotate(105 1304.02 1091.37)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-114" x1="-1693.64" y1="676.76" x2="-1699.23" y2="672.54" gradientTransform="rotate(56.3 -622.59 3096.74)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-115" x1="-1692.71" y1="675.53" x2="-1698.31" y2="671.31" gradientTransform="rotate(56.3 -622.59 3096.74)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-116" x1="-1692.58" y1="675.36" x2="-1698.18" y2="671.14" gradientTransform="rotate(56.3 -622.59 3096.74)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-117" x1="-1692.96" y1="675.85" x2="-1698.56" y2="671.63" gradientTransform="rotate(56.3 -622.59 3096.74)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-118" x1="-1692.68" y1="675.49" x2="-1698.27" y2="671.28" gradientTransform="rotate(56.3 -622.59 3096.74)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-120" x1="-1693.33" y1="676.35" x2="-1698.92" y2="672.13" gradientTransform="rotate(56.3 -622.59 3096.74)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-122" x1="-1673.79" y1="2874.95" x2="-1679.39" y2="2870.73" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
<linearGradient id="linear-gradient-123" x1="-1672.85" y1="2873.7" x2="-1678.45" y2="2869.48" gradientTransform="rotate(119.6 253.75 2698.25)" xlink:href="#linear-gradient" />
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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