gsap 圣诞快乐 2020滑雪动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap 圣诞快乐 2020滑雪动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
width: 100%;
height: 100vh;
overflow: hidden;
background: #f2adab;
}
.box {
position: fixed;
left: calc(50vw - 50vmin);
top: calc(50vh - 37.5vmin);
width: 100vmin;
height: 75vmin;
}
svg {
overflow: visible;
}
#snow {
pointer-events: none;
}
.snow-clone {
opacity: 0;
}
</style>
</head>
<body >
<div class="box">
<svg viewBox="0 0 800 596.74">
<g id="merry">
<path fill="#f2adab" d="M0 0h800v596.74H0z" />
<path style="mix-blend-mode: multiply" id="shadow" fill="#eaeaea" d="M575.92 325.27L418 234.08l2.67-41.29-43.79 17.55-37.22-21.49a22.2 22.2 0 00-22.24 0L206.34 253c-13.39 2.93-29.72 7.25-32 8.17-3 1.24-40.93 33.92-58.91 37.29-12.35 2.31-28.09 18.51-36.75 28.45a21.87 21.87 0 00-6.43 7.78 22.5 22.5 0 00-2.19 11.89 22 22 0 0011 17.25L317.4 500.22a22 22 0 0014.6 2.69l.35.29 69.07-13.71 1.68-25.93 172.82-99.76a22.25 22.25 0 000-38.53z" />
<g id="box1">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M178.66 204.15l-.8.17c-4-.57-10.11-.87-12.69 1.9a8.76 8.76 0 00-.8 1l-18.18 3.93-4.64 14.11-.64.32c-3.33 1.8-3 5.4-2.15 8.16l-.34 1L133 251.4l9.33 6.19 3.67-.8 1.28.85 30 19.87 19.21-4.15 9.66-2.09 22.85-4.94 5.45-16.64 2.29-7 4.51-13.78-30-19.87-1.24-.82.95-2.87-9.33-6.18z" />
<path fill="#d36666" d="M280.62 236.01l-51.31-22.16V154.6l51.31 29.63v51.78z" />
<path fill="#af5555" d="M177.99 236.03l51.31-22.16v-59.25l-51.31 29.62v51.79z" />
<path fill="#db6a6a" d="M229.31 213.86v51.8l-22.69-13.1-9.59-5.53-19.04-11v-51.8l19.04 11 9.59 5.53 22.68 13.09.01.01z" />
<path fill="#e87979" d="M280.62 184.23v51.79l-51.31 29.63v-51.79l51.31-29.63z" />
<path fill="#e6e6e6" d="M280.62 181.38v9.69l-51.31 29.62v-9.68l51.31-29.63zM229.3 211v9.69l-51.31-29.62v-9.69L229.3 211z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M229.3 218.76l-54.95-31.7v-14.03l22.81-13.13 9.59-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.76 13.17v13.99l-55.26 31.82z" />
<path fill="#ed8e8e" d="M284.56 172.95l-22.87 13.15-9.57 5.53-22.82 13.15-28.54-16.49-6.19-3.57-20.22-11.69 22.81-13.13 9.59-5.52 22.86-13.18 22.61 13.05 9.58 5.53 22.76 13.17z" />
<path fill="#e87979" d="M229.31 218.76l55.25-31.82v-13.99l-55.25 31.82v13.99z" />
<path fill="#db6a6a" d="M174.35 173.06l54.95 31.71v13.99l-54.95-31.7v-14z" />
<path fill="#ffcb8e" d="M261.8 159.81l-55.18 31.86-9.59-5.53 55.19-31.86 9.58 5.53z" />
<path fill="#ffcb8e" d="M261.72 186.14l-9.57 5.53-.03-.01-54.96-31.73 9.59-5.52 54.94 31.72.03.01z" />
<path fill="#ffcb8e" d="M261.72 246.95V186.13l-9.57 5.53V252.47l9.57-5.52zM206.62 191.66v60.9l-9.59-5.53v-60.9l9.59 5.53z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M191.65 183.07a14.58 14.58 0 00-3.68 7.08c6.36-2.5 9.82 5 9.82 5-.17-3 3-6.86 3-6.86 11.92-11.78 20.38-11 20.38-11-7.31-5.7-26.27 3.47-29.52 5.78z" />
<path fill="#ffcb8e" d="M222.65 171.51s-25.62-4.69-38.37 12.72c0 0 8.13-.49 10.22 6.22 0 0 12.9-14.8 27.14-13.07z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M257.94 184.56s6.07 4.86 6.51 8.82c-6.45-1.71-11.56 5.36-11.56 5.36a24.63 24.63 0 00-1.52-6.68c-3.84-10.68-18-16-18-16 7.7-5.06 21.54 5.94 24.57 8.5z" />
<path fill="#ffcb8e" d="M232.32 170.17s24.33-.66 35.56 17.76a13.4 13.4 0 00-12.56 5.45s-6.67-16.25-22.49-17.28z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M233.75 173.68s20.83 4.22 24.41 1c2.22-2 1-17.37-9-14s-15.41 13-15.41 13z" />
<path fill="#ffcb8e" d="M263.09 163.18s-5.84-13.35-13.71-12c-9.63 1.64-20.07 16.23-20.07 16.23l4.44 6.28z" />
<path fill="#eab783" d="M233.75 173.68s25.57-19.82 29.34-10.5c4.68 11.59-29.34 10.5-29.34 10.5z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M225 174.7s-29.38 3.34-30.44.75c-2.69-6.53 2.09-10.24 2.09-10.24s24.78-1.81 28.35 9.49z" />
<path fill="#ffcb8e" d="M195.68 164.2s5.83-13.35 13.7-12c9.63 1.65 20.07 16.23 20.07 16.23L225 174.7z" />
<path fill="#eab783" d="M225 174.7s-25.57-19.81-29.33-10.5C191 175.79 225 174.7 225 174.7z" />
</g>
<g id="box2">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M501.48 170.24l-.79.17c-4-.57-10.12-.87-12.69 1.9a7.8 7.8 0 00-.8 1l-18.2 3.95-4.64 14.11-.65.32c-3.32 1.79-3 5.4-2.14 8.16l-.34 1-5.47 16.61 9.33 6.18 3.67-.79 1.27.85 30 19.87 19.21-4.15 9.67-2.09 22.89-5 5.45-16.64 2.28-7 4.53-13.69-30-19.87-1.24-.82.94-2.87-9.33-6.19z" />
<path fill="#d36666" d="M603.45 202.1l-51.32-22.16v-59.25l51.32 29.62v51.79z" />
<path fill="#af5555" d="M500.81 202.12l51.32-22.16V120.7l-51.32 29.63v51.79z" />
<path fill="#db6a6a" d="M552.14 179.95v51.8l-22.7-13.11-9.58-5.53-19.05-10.99v-51.8l19.05 11 9.58 5.53 22.68 13.09.02.01z" />
<path fill="#e87979" d="M603.45 150.32v51.79l-51.31 29.63v-51.79l51.31-29.63z" />
<path fill="#e6e6e6" d="M603.45 147.47v9.69l-51.31 29.61v-9.67l51.31-29.63zM552.12 177.09v9.68l-51.31-29.61v-9.69l51.31 29.62z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M552.13 184.85l-54.96-31.71v-14.02l22.82-13.14 9.58-5.51 22.87-13.18 22.6 13.04 9.58 5.54 22.77 13.17v13.99l-55.26 31.82z" />
<path fill="#ed8e8e" d="M607.39 139.04l-22.87 13.15-9.57 5.53-22.83 13.15-28.53-16.49-6.2-3.57-20.22-11.69 22.82-13.14 9.58-5.51 22.87-13.18 22.6 13.04 9.58 5.54 22.77 13.17z" />
<path fill="#e87979" d="M552.13 184.85l55.26-31.82v-13.99l-55.26 31.81v14z" />
<path fill="#db6a6a" d="M497.17 139.15l54.96 31.7v14l-54.96-31.71v-13.99z" />
<path fill="#ffcb8e" d="M584.62 125.9l-55.18 31.86-9.58-5.53 55.18-31.87 9.58 5.54z" />
<path fill="#ffcb8e" d="M584.54 152.23l-9.56 5.53-.03-.01-54.96-31.74 9.58-5.51 54.95 31.72.02.01z" />
<path fill="#ffcb8e" d="M584.54 213.03v-60.81l-9.56 5.53v60.8l9.56-5.52zM529.44 157.75v60.89l-9.58-5.53v-60.89l9.58 5.53z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M514.48 149.16a14.56 14.56 0 00-3.69 7.08c6.37-2.5 9.83 5 9.83 5-.17-3 3-6.86 3-6.86 11.91-11.78 20.38-11 20.38-11-7.31-5.71-26.27 3.47-29.52 5.78z" />
<path fill="#ffcb8e" d="M545.47 137.6s-25.61-4.69-38.36 12.72c0 0 8.12-.49 10.22 6.21 0 0 12.9-14.79 27.14-13.06z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M580.77 150.65s6.06 4.86 6.5 8.82c-6.45-1.71-11.56 5.36-11.56 5.36a24.45 24.45 0 00-1.51-6.68c-3.85-10.68-18-16-18-16 7.7-5.08 21.53 5.92 24.57 8.5z" />
<path fill="#ffcb8e" d="M555.15 136.26s24.33-.67 35.56 17.76a13.42 13.42 0 00-12.57 5.45s-6.66-16.26-22.49-17.29z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M556.58 139.77s20.83 4.22 24.41 1c2.22-2 1-17.37-9-14s-15.41 13-15.41 13z" />
<path fill="#ffcb8e" d="M585.91 129.27s-5.83-13.36-13.7-12c-9.63 1.64-20.07 16.22-20.07 16.22l4.44 6.29z" />
<path fill="#eab783" d="M556.58 139.77s25.57-19.82 29.33-10.5c4.69 11.59-29.33 10.5-29.33 10.5z" />
<path fill="#e6e6e6" style="mix-blend-mode: multiply" d="M547.84 140.79s-29.39 3.34-30.45.75c-2.68-6.53 2.09-10.24 2.09-10.24s24.78-1.81 28.36 9.49z" />
<path fill="#ffcb8e" d="M518.5 130.29s5.84-13.35 13.71-12c9.63 1.64 20.07 16.23 20.07 16.23l-4.44 6.28z" />
<path fill="#eab783" d="M547.84 140.79s-25.57-19.79-29.34-10.5c-4.68 11.59 29.34 10.5 29.34 10.5z" />
</g>
<g id="box3">
<path fill="#eaeaea" style="mix-blend-mode: multiply" d="M563.73 216.32l-.73.16c-3.73-.53-9.35-.81-11.73 1.76a7.46 7.46 0 00-.74.94l-16.8 3.63-4.29 13.05c-.21.09-.41.19-.6.29-3.07 1.66-2.79 5-2 7.54l-.32.95-5 15.35 8.62 5.71 3.39-.73 1.18.78 27.71 18.37 17.76-3.84 8.93-1.93 21.16-4.57 5-15.38 2.12-6.44 4.17-12.73-27.7-18.37-1.15-.76.88-2.65-8.59-5.71z" />
<path fill="#d36666" d="M657.98 245.78l-47.43-20.49v-54.77l47.43 27.39v47.87z" />
<path fill="#af5555" d="M563.12 245.79l47.43-20.48v-54.77l-47.43 27.38v47.87z" />
<path fill="#db6a6a" d="M610.55 225.3v47.88l-20.97-12.11-8.86-5.12-17.61-10.16v-47.88l17.61 10.17 8.86 5.11 20.96 12.1.01.01z" />
<path fill="#e87979" d="M657.98 197.91v47.87l-47.43 27.39V225.3l47.43-27.39z" />
<path fill="#e6e6e6" d="M657.98 195.28v8.95l-47.43 27.38v-8.94l47.43-27.39zM610.54 222.66v8.95l-47.43-27.38v-8.95l47.43 27.38z" style="mix-blend-mode: multiply" />
<path fill="#ed8d8d" d="M610.55 229.83l-50.8-29.31V187.56l21.09-12.14 8.86-5.1 21.13-12.18 20.89 12.06 8.86 5.11 21.04 12.18v12.93l-51.07 29.41z" />
<path fill="#ed8e8e" d="M661.62 187.49l-21.14 12.15-8.84 5.11-21.1 12.16-26.38-15.25-5.72-3.29-18.69-10.81 21.09-12.14 8.86-5.1 21.13-12.18 20.89 12.06 8.86 5.11 21.04 12.18z" />
<path fill="#e87979" d="M610.55 229.83l51.07-29.41v-12.93l-51.07 29.4v12.94z" />
<path fill="#db6a6a" d="M559.75 187.59l50.8 29.3v12.94l-50.8-29.31v-12.93z" />
<path fill="#ffcb8e" d="M640.58 175.34l-51 29.45-8.86-5.11 51-29.45 8.86 5.11z" />
<path fill="#ffcb8e" d="M640.51 199.68l-8.85 5.11-.02-.01-50.8-29.33 8.86-5.1 50.78 29.31.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