gsap实现猫咪睡在窗台日夜交替效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现猫咪睡在窗台日夜交替效果代码，点击猫咪有惊喜哦
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap");
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: "Ubuntu", sans-serif;
}
// html[data-theme='dark'] {
// }
body {
background: #d7edee;
width: 800px;
.box {
width: 80%;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 3vw;
color: #556f80;
}
p {
color: #98aebe;
font-size: 2vw;
line-height: 1.8em;
margin-top: 10px;
}
svg #window {
cursor: pointer;
}
}
</style>
</head>
<body >
<div class="box">
<h1>点击猫咪发现惊喜</h1>
<p></p>
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
<g id="window">
<path id="window__frame__outside" fill="#556f80" d="M297.762 168.842h204.444v235.735H297.762z" />
<path id="outside__bg" fill="#d7edee" d="M314.593 179.677h172.094v211.138H314.593z" />
<clipPath id="_clip1">
<path d="M314.593 179.677h172.094v211.138H314.593z" />
</clipPath>
<g clip-path="url(#_clip1)">
<g id="sunMoon">
<path id="sunMoon__base" d="M400.34 182.186c120.805-.166 219.018 97.778 219.183 218.583.166 120.805-97.778 219.018-218.583 219.183-120.805.166-219.018-97.778-219.183-218.583-.166-120.805 97.778-219.017 218.583-219.183z" fill="none" />
<path id="sun" d="M444.497 194.968c18.422-.025 33.399 14.911 33.425 33.334.025 18.422-14.911 33.399-33.334 33.425-18.422.025-33.399-14.911-33.424-33.334-.026-18.422 14.91-33.399 33.333-33.425z" fill="#f3a683" />
<path id="moon" d="M260.414 257.684c-1.492 3.793-2.309 7.923-2.303 12.243.026 18.423 15.003 33.359 33.425 33.334 3.209-.005 6.313-.463 9.25-1.314-4.869 12.381-16.928 21.162-31.031 21.182-18.422.025-33.399-14.911-33.424-33.334-.021-15.213 10.161-28.077 24.083-32.111z" fill="#ffffff" />
</g>
<g id="window__frame" fill="#556f80">
<path d="M311.283 281.864h178.714v6.764H311.283z" />
<path d="M397.258 175.835h6.764v218.823h-6.764z" />
</g>
<g id="blinds" fill="#303853">
<path d="M307.102 175.835h185.274v11.748H307.102z" />
<path d="M307.102 190.626h185.274v11.748H307.102z" />
<path d="M307.102 205.417h185.274v11.748H307.102z" />
<path d="M307.102 220.208h185.274v11.748H307.102z" />
<path d="M307.102 234.999h185.274v11.748H307.102z" />
<path d="M307.102 249.79h185.274v11.748H307.102z" />
<path d="M307.102 264.581h185.274v11.748H307.102z" />
<path d="M307.102 279.372h185.274v11.748H307.102z" />
<path d="M307.102 294.163h185.274v11.748H307.102z" />
<path d="M307.102 308.954h185.274v11.748H307.102z" />
<path d="M307.102 323.745h185.274v11.748H307.102z" />
<path d="M307.102 338.536h185.274v11.748H307.102z" />
<path d="M307.102 353.327h185.274v11.748H307.102z" />
<path d="M307.102 368.118h185.274v11.748H307.102z" />
<path d="M307.102 382.91h185.274v11.748H307.102z" />
</g>
</g>
<path id="window__base" fill="#fff" d="M287.918 401.069h224.164v22.23H287.918z" />
<g>
<path id="right-hand" d="M331.488 386.954s-27.273-1.471-26.23 7.167c.766 6.338 8.295 7.357 14.469 7.772 6.174.416 36.055.929 11.761-14.939z" fill="#98aebe" />
<path id="body" d="M352.39 365.252s81.405-40.993 98.905-.68c11.659 26.856-7.929 42.029-43.527 42.029-23.361 0-43.863-1.589-52.67-5.837-8.806-4.248-2.708-35.512-2.708-35.512z" fill="#98aebe" />
<clipPath id="_clip2">
<path d="M352.39 365.252s81.405-40.993 98.905-.68c11.659 26.856-7.929 42.029-43.527 42.029-23.361 0-43.863-1.589-52.67-5.837-8.806-4.248-2.708-35.512-2.708-35.512z" />
</clipPath>
<g clip-path="url(#_clip2)" fill="#556f80">
<ellipse cx="387.298" cy="348.073" rx="6.745" ry="21.523" />
<ellipse cx="405.01" cy="345.617" rx="6.745" ry="21.523" />
<ellipse cx="421.309" cy="342.364" rx="6.745" ry="21.523" />
</g>
<g id="face">
<path d="M364.317 400.424s11.226-4.284 15.647-9.691c6.564-8.027 3.892-15.747 3.892-15.747l-11.031.387-8.508 25.051z" fill="#303853" fill-opacity=".2" />
<path id="head" d="M351 346.994c18.134 0 32.856 12.256 32.856 27.351 0 15.096-5.681 27.352-32.856 27.352s-32.856-12.256-32.856-27.352c0-15.095 14.722-27.351 32.856-27.351z" fill="#98aebe" />
<clipPath id="_clip3">
<path id="head1" d="M351 346.994c18.134 0 32.856 12.256 32.856 27.351 0 15.096-5.681 27.352-32.856 27.352s-32.856-12.256-32.856-27.352c0-15.095 14.722-27.351 32.856-27.351z" />
</clipPath>
<g clip-path="url(#_clip3)">
<ellipse id="head__mark" cx="352.146" cy="341.559" rx="6.738" ry="21.523" fill="#556f80" />
</g>
<g id="ear__left">
<path d="M329.297 344.831c1.229-1.448 3.397-1.633 4.854-.414 5.049 4.184 8.243 8.982 9.656 14.354.415 1.603-.359 3.277-1.849 4-5.62 2.725-11.188 3.166-16.711 1.657-1.627-.446-2.699-1.995-2.544-3.675.628-6.08 2.837-11.38 6.594-15.922z" fill="#98aebe" />
<path d="M329.582 351.25a3.3964 3.3964 0 012.573-1.627c1.066-.106 2.12.298 2.843 1.088 1.11 1.065 1.923 2.266 2.509 3.539a3.4906 3.4906 0 01-2.203 4.826c-1.44.422-2.872.558-4.298.426a3.4897 3.4897 0 01-2.508-1.416 3.4889 3.4889 0 01-.591-2.819c.411-1.425.944-2.769 1.675-4.017z" fill="#d7edee" />
</g>
<g id="ear__right">
<path d="M371.927 344.794c1.657-.929 3.754-.346 4.693 1.305 3.274 5.682 4.595 11.292 4.046 16.819-.17 1.648-1.479 2.947-3.127 3.105-6.218.595-11.591-.934-16.241-4.274-1.369-.985-1.834-2.811-1.103-4.331 2.709-5.48 6.627-9.677 11.732-12.624z" fill="#98aebe" />
<path d="M370.019 350.745a3.3997 3.3997 0 012.96-.605 3.3971 3.3971 0 012.273 1.991c.726 1.497 1.094 3.016 1.194 4.522a3.4903 3.4903 0 01-3.717 3.729c-1.618-.099-3.114-.5-4.498-1.183a3.491 3.491 0 01-1.832-2.189c-.271-.957-.12-1.985.415-2.824.936-1.303 1.984-2.463 3.205-3.441z" fill="#d7edee" />
</g>
<g id="face__details">
<path d="M336.292 387.714s-4.319-1.775-9.465-.34" fill="none" stroke="#556f80" stroke-width="2" />
<path d="M362.652 387.714s4.319-1.775 9.465-.34" fill="none" stroke="#556f80" stroke-width="2" />
<path d="M336.575 390.032s-3.765-.486-8.735 2.944" fill="none" stroke="#556f80" stroke-width="2" />
<path d="M362.369 390.032s3.765-.486 8.735 2.944" fill="none" stroke="#556f80" stroke-width="2" />
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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