TweenMax实现一个404页面动画效果代码-html代码-BFW代码库

代码语言：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".........完整代码请登录后点击上方下载按钮下载查看