TweenMax实现一个404页面动画效果代码
代码语言：html
所属分类：布局界面
代码描述：TweenMax实现一个404页面动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700'>
<style>
body {
height: 100vh;
background: #88DCD5;
display: grid;
font-family: 'Roboto Condensed', sans-serif;
}
.container {
position: relative;
height: 600px;
width: 750px;
margin: auto;
}
.container svg {
height: 100%;
}
p, a {
margin: 0;
position: absolute;
text-decoration: none;
text-transform: uppercase;
color: #032C3F;
font-size: 24px;
}
.textA {
top: 169px;
left: 257px;
transform: rotate(-3deg);
}
.textB {
font-weight: 700;
font-size: 135px;
top: 209px;
left: 273px;
transform: rotate(-2deg);
}
.textC {
top: 370px;
left: 428px;
font-size: 30px;
transform: rotate(1deg);
}
</style>
</head>
<body >
<div class="container">
<p class="textA">Page Not Found</p>
<p class="textB">404</p>
<a class="textC" href="#">Go Back</a>
<svg class="page-not-found" viewBox="0 0 1280 1024">
<title>Page Not Found</title>
<g class="hide tri-dots">
<circle cx="406.1" cy="890.7" r="3.5" transform="translate(-361.3 283) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="426.2" cy="878.8" r="3.7" transform="translate(-353.7 290.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="424.4" cy="861.8" r="3.7" transform="translate(-346.1 288.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="445.8" cy="867.7" r="3.7" transform="translate(-346.5 298.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="438.3" cy="851.8" r="3.7" transform="translate(-340.1 293.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="453.8" cy="845.8" r="3.7" transform="translate(-335.6 299.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="465.2" cy="859" r="3.7" transform="translate(-340.4 306.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="483" cy="849.2" r="3.7" transform="translate(-333.9 313.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="500.6" cy="840.2" r="3.7" transform="translate(-327.9 320.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="517.7" cy="831.5" r="3.7" transform="translate(-322 327.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="502.8" cy="821" r="3.7" transform="translate(-318.9 319.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="486" cy="829.6" r="3.7" transform="translate(-324.7 312.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="469.6" cy="837.8" r="3.7" transform="translate(-330.2 306.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="455.3" cy="825.5" r="3.7" transform="translate(-326.2 298.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="471.5" cy="817.7" r="3.7" transform="translate(-320.9 304.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="487.9" cy="810.2" r="3.7" transform="translate(-315.6 311.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="489.8" cy="791.1" r="3.7" transform="translate(-306.7 310.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="473.1" cy="798.2" r="3.7" transform="translate(-311.8 303.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="456.9" cy="805.7" r="3.7" transform="translate(-317 296.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="440.5" cy="813.7" r="3.7" transform="translate(-322.5 290.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="442.4" cy="793.8" r="3.7" transform="translate(-313.2 288.9) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="458.6" cy="786" r="3.7" transform="translate(-307.8 295.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="475" cy="779.1" r="3.7" transform="translate(-302.9 302.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="491.8" cy="772.4" r="3.7" transform="translate(-298 309) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="506.6" cy="784" r="3.7" transform="translate(-301.7 317.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="504.6" cy="802.3" r="3.7" transform="translate(-310.2 318.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="519.7" cy="812.9" r="3.7" transform="translate(-313.4 326.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="534.7" cy="822.9" r="3.7" transform="translate(-316.3 334.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="536.8" cy="805.3" r="3.7" transform="translate(-308 333.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="539.2" cy="787.7" r="3.7" transform="translate(-299.8 332.3) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="541.8" cy="770.3" r="3.7" transform="translate(-291.5 331.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="559.9" cy="763.5" r="3.7" transform="translate(-286.4 339.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="556.9" cy="780.7" r="3.7" transform="translate(-294.6 339.6) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="554.5" cy="797.9" r="3.7" transform="translate(-302.7 340.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="552" cy="815.2" r="3.7" transform="translate(-310.9 341.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="570.5" cy="807.2" r="3.7" transform="translate(-305.2 348.7) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="572.5" cy="790.5" r="3.7" transform="translate(-297.3 347.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="589.7" cy="797.2" r="3.7" transform="translate(-298.5 356.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="590" cy="782.3" r="3.7" transform="translate(-291.7 354.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="608.2" cy="784.4" r="3.7" transform="translate(-290.7 363.4) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="612.4" cy="765.8" r="3.7" transform="translate(-281.7 363.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="627.4" cy="776" r="3.7" transform="translate(-284.7 371.2) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="630.6" cy="758.5" r="3.7" transform="translate(-276.4 370.8) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="647" cy="766.1" r="3.7" transform="translate(-278 379) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="664.8" cy="756.4" r="3.7" transform="translate(-271.7 386.1) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="682.7" cy="749.2" r="3.6" transform="translate(-266.4 393.5) rotate(-27.1)" style="fill: #ffe029"/>
<circle cx="662.5&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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