gsap实现波纹放大成像动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap实现波纹放大成像动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* hsl(62, 100%, 50%); */
/* hsl(159, 65%, 53%); */
:root {
--background-color: #161426;
--fill-color: #252140;
--stroke-color: none;
--hue-1: 210;
--sat-1: 80;
--hue-2: 240;
--sat-2: 100;
}
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
flex-direction: column;
}
svg {
width: 90vw;
max-width: 620px;
margin: 0 auto;
overflow: visible;
}
rect {
fill: var(--fill-color);
stroke: var(--stroke-color);
stroke-width: 2;
opacity: 0;
}
button {
cursor: pointer;
-webkit-appearance: none;
transition: all 0.3s ease;
border: none;
background: hsl(100, 0%, 20%);
color: hsl(100, 0%, 78%);
width: auto;
margin: 48px auto 0;
padding: 8px 16px;
font-size: 1rem;
font-family: "Helvetica Neue", "Helvetica", "Roboto", "Segoe UI", "Arial", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
outline: none;
}
button:disabled {
opacity: 0.5;
}
button:hover:not(:disabled) {
background: hsl(100, 0%, 26%);
}
</style>
</head>
<body >
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
<rect x="0" y="0" width="18" height="18"></rect>
<rect x="0" y="22" width="18" height="18"></rect>
<rect x="0" y="44" width="18" height="18"></rect>
<rect x="0" y="66" width="18" height="18"></rect>
<rect x="0" y="88" width="18" height="18"></rect>
<rect x="0" y="110" width="18" height="18"></rect>
<rect x="0" y="132" width="18" height="18"></rect>
<rect x="0" y="154" width="18" height="18"></rect>
<rect x="0" y="176" width="18" height="18"></rect>
<rect x="0" y="198" width="18" height="18"></rect>
<rect x="0" y="220" width="18" height="18"></rect>
<rect x="0" y="242" width="18" height="18"></rect>
<rect x="0" y="264" width="18" height="18"></rect>
<rect x="0" y="286" width="18" height="18"></rect>
<rect x="0" y="308" width="18" height="18"></rect>
<rect x="0" y="330" width="18" height="18"></rect>
<rect x="0" y="352" width="18" height="18"></rect>
<rect x="0" y="374" width="18" height="18"></rect>
<rect x="0" y="396" width="18" height="18"></rect>
<rect x="22" y="0" width="18" height="18"></rect>
<rect x="22" y="22" width="18" height="18"></rect>
<rect x="22" y="44" width="18" height="18"></rect>
<rect x="22" y="66" width="18" height="18"></rect>
<rect x="22" y="88" width="18" height="18"></rect>
<rect x="22" y="110" width="18" height="18"></rect>
<rect x="22" y="132" width="18" height="18"></rect>
<rect x="22" y="154" width="18" height="18"></rect>
<rect x="22" y="176" width="18" height="18"></rect>
<rect x="22" y="198" width="18" height="18"></rect>
<rect x="22" y="220" width="18" height="18"></rect>
<rect x="22" y="242" width="18" height="18"></rect>
<rect x="22" y="264" width="18" height="18"></rect>
<rect x="22" y="286" width="18" height="18"></rect>
<rect x="22" y="308" width="18" height="18"></rect>
<rect x="22" y="330" width="18" height="18"></rect>
<rect x="22" y="352" width="18" height="18"></rect>
<rect x="22" y="374" width="18" height="18"></rect>
<rect x="22" y="396" width="18" height="18"></rect>
<rect x="44" y="0" width="18" height="18"></rect>
<rect x="44" y="22" width="18" height="18"></rect>
<rect x="44" y="44" width="18" height="18"></rect>
<rect x="44" y="66" width="18" height="18"></rect>
<rect x="44" y="88" width="18" height="18"></rect>
<rect x="44" y="110" width="18" height="18"></rect>
<rect x="44" y="132" width="18" height="18"></rect>
<rect x="44" y="154" width="18" height="18"></rect>
<rect x="44" y="176" width="18" height="18"></rect>
<rect x="44" y="198" width="18" height="18"></rect>
<rect x="44" y="220" width="18" height="18"></rect>
<rect x="44" y="242" width="18" height="18"></rect>
<rect x="44" y="264" width="18" height="18"></rect>
<rect x="44" y="286" width="18" height="18"></rect>
<rect x="44" y="308" width="18" height="18"></rect>
<rect x="44" y="330" width="18" height="18"></rect>
<rect x="44" y="352" width="18" height="18"></rect>
<rect x="44" y="374" width="18" height="18"></rect>
<rect x="44" y="396" width="18" height="18"></rect>
<rect x="66" y="0" width="18" height="18"></rect>
<rect x="66" y="22" width="18" height="18"></rect>
<rect x="66" y="44" width="18" height="18"></rect>
<rect x="66" y="66" width="18" height="18"></rect>
<rect x="66" y="88" width="18" height="18"></rect>
<rect x="66" y="110" width="18" height="18"></rect>
<rect x="66" y="132" width="18" height="18"></rect>
<rect x="66" y="154" width="18" height="18"></rect>
<rect x="66" y="176" width="18" height="18"></rect>
<rect x="66" y="198" width="18" height="18"></rect>
<rect x="66" y="220" width="18" height="18"></rect>
<rect x="66" y="242" width="18" height="18"></rect>
<rect x="66" y="264" width="18" height="18"></rect>
<rect x="66" y="286" width="18" height="18"></rect>
<rect x="66" y="308" width="18" height="18"></rect>
<rect x="66" y="330" width="18" height="18"></rect>
<rect x="66" y="352" width="18" height="18"></rect>
<rect x="66" y="374" width="18" height="18"></rect>
<rect x="66" y="396" width="18" height="18"></rect>
<rect x="88" y="0" width="18" height="18"></rect>
<rect x="88" y="22" width="18" height="18"></rect>
<rect x="88" y="44" width="18" height="18"></rect>
<rect x="88" y="66" width="18" height="18"></rect>
<rect x="88" y="88" width="18" height="18"></rect>
<rect x="88" y="110" width="18" height="18"></rect>
<rect x="88" y="132" width="18" height="18"></rect>
<rect x="88" y="154" width="18" height="18"></rect>
<rect x="88" y="176" width="18" height="18"></rect>
<rect x="88" y="198" width="18" height="18"></rect>
<rect x="88" y="220" width="18" height="18"></rect>
<rect x="88" y="242" width="18" height="18"></rect>
<rect x="88" y="264" width="18" height="18"></rect>
<rect x="88" y="286" width="18" height="18"></rect>
<rect x="88" y="308" width="18" height="18"></rect>
<rect x="88" y="330" width="18" height="18"></rect>
<rect x="88" y="352" width="18" height="18"></rect>
<rect x="88" y="374" width="18" height="18"></rect>
<rect x="88" y="396" width="18" height="18"></rect>
<rect x="110" y="0" width="18" height="18"></rect>
<rect x="110" y="22" width="18" height="18"></rect>
<rect x="110" y="44" width="18" height="18"></rect>
<rect x="110" y="66" width="18" height="18"></rect>
<rect x="110" y="88" width="18" height="18"></rect>
<rect x="110" y="110" width="18" height="18"></rect>
<rect x="110" y="132" width="18" height="18"></rect>
<rect x="110" y="154" width="18" height="18"></rect>
<rect x="110" y="176" width="18" height="18"></rect>
<rect x="110" y="198" width="18" height="18"></rect>
<rect x="110" y="220" width="18" height="18"></rect>
<rect x="110" y="242" width="18" height="18"></rect>
<rect x="110" y="264" width="18" height="18"></rect>
<rect x="110" y="286" width="18" height="18"></rect>
<rect x="110" y="308" width="18" height="18"></rect>
<rect x="110" y="330" width="18" height="18"></rect>
<rect x="110" y="352" width="18" height="18"></rect>
<rect x="110" y="374" width="18" height="18"></rect>
<rect x="110" y="396" width="18" height="18"></rect>
<rect x="132" y="0" width="18" height="18"></rect>
<rect x="132" y="22" width="18" height="18"></rect>
<rect x="132" y="44" width="18" height="18"></rect>
<rect x="132" y="66" width="18" height="18"></rect>
<rect x="132" y="88" width="18" height="18"></rect>
<rect x="132" y="110" width="18" height="18"></rect>
<rect x="132" y="132" width="18" height="18"></rect>
<rect x="132" y="154" width="18" height="18"></rect>
<rect x="132" y="176" width="18" height="18"></rect>
<rect x="132" y="198" width="18" height="18"></rect>
<rect x="132" y="220" width="18" height="18"></rect>
<rect x="132" y="242" width="18" height="18"></rect>
<rect x="132" y="264" width="18" height="18"></rect>
<rect x="132" y="286" width="18" height="18"></rect>
<rect x="132" y="308" width="18" height="18"></rect>
<rect x="132" y="330" width="18" height="18"></rect>
<rect x="132" y="352" width="18" height="18"></rect>
<rect x="132" y="374" width="18" height="18"></rect>
<rect x="132" y="396" width="18" height="18"></rect>
<rect x="154" y="0" width="18" height="18"></rect>
<rect x="154" y="22" width="18" height="18"></rect>
<rect x="154" y="44" width="18" height="18"></rect>
<rect x="154" y="66" width="18" height="18"></rect>
<rect x="154" y="88" width="18" height="18"></rect>
<rect x="154" y="110" width="18" height="18"></rect>
<rect x="154" y="132" width="18" height="18"></rect>
<rect x="154" y="154" width="18" height="18"></rect>
<rect x="154" y="176" width="18" height="18"></rect>
<rect x="154" y="198" width="18" height="18"></rect>
<rect x="154" y="220" width="18" height="18"></rect>
<rect x="154" y="242" width="18" height="18"></rect>
<rect x="154" y="264" width="18" height="18"></rect>
<rect x="154" y="286" width="18" height="18"></rect>
<rect x="154" y="308" width="18" height="18"></rect>
<rect x="154" y="330" width="18" height="18"></rect>
<rect x="154" y="352" width="18" height="18"></rect>
<rect x="154" y="374" width="18" height="18"></rect>
<rect x="154" y="396" width="18" height="18"></rect>
<rect x="176" y="0" width="18" height="18"></rect>
<rect x="176" y="22" width="18" height="18"></rect>
<rect x="176" y="44" width="18" height="18"></rect>
<rect x="176" y="66" width="18" height="18"></rect>
<rect x="176" y="88" width="18" height="18"></rect>
<rect x="176" y="110" width="18" height="18"></rect>
<rect x="176" y="132" width="18" height="18"></rect>
<rect x="176" y="154" width="18" height="18"></rect>
<rect x="176" y="176" width="18" height="18"></rect>
<rect x="176" y="198" width="18" height="18"></rect>
<rect x="176" y="220" width="18" height="18"></rect>
<rect x="176" y="242" width="18" height="18"></rect>
<rect x="176" y="264" width="18" height="18"></rect>
<rect x="176" y="286" width="18" height="18"></rect>
<rect x="176" y="308" width="18" height="18"></rect>
<rect x="176" y="330" width="18" height="18"></rect>
<rect x="176" y="352" width="18" height="18"></rect>
<rect x="176" y="374" width="18" height="18"></rect>
<rect x="176" y="396" width="18" height="18"></rect>
<rect x="198" y="0" width="18" height="18"></rect>
<rect x="198" y="22" width="18" height="18"></rect>
<rect x="198" y="44" width="18" height="18"></rect>
<rect x="198" y="66" width="18" height="18"></rect>
<rect x="198" y="88" width="18" height="18"></rect>
<rect x="198" y="110" width="18" height="18"></rect>
<rect x="198" y="132" width="18" height="18"></rect>
<rect x="198" y="154" width="18" height="18"></rect>
<rect x="198" y="176" width="18" height="18"></rect>
<rect x="198" y="198" width="18" height="18"></rect>
<rect x="198" y="220" width="18" height="18"></rect>
<rect x="198" y="242" width="18" height="18"></rect>
<rect x="198" y="264" width="18" height="18"></rect>
<rect x="198" y="286" width="18" height="18"></rect>
<rect x="198" y="308" width="18" height="18"></rect>
<rect x="198" y="330" width="18" height="18"></rect>
<rect x="198" y="352" width="18" height="18"></rect>
<rect x="198" y="374" width="18" height="18"></rect>
<rect x="198" y="396" width="18" height="18"></rect>
<rect x="220" y="0" width="18" height="18"></rect>
<rect x="220" y="22" width="18" height="18"></rect>
<rect x="220" y="44" width="18" height="18"></rect>
<rect x="220" y="66" width="18" height="18"></rect>
<rect x="220" y="88" width="18" height="18"></rect>
<rect x="220" y="110" width="18" height="18"></rect>
<rect x="220" y="132" width="18" height="18"></rect>
<rect x="220" y="154" width="18" height="1.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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