原创 Anymore 随笔工作笔记录 316 阅读 2017-03-03 09:52:39
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- html {
- background: black;
- overflow: hidden;
- }
- .container,
- .sea,
- .sky,
- .sun,
- .light,
- .bird,
- .birdr1,
- .birdr,
- .fin,
- .wave {
- position: absolute;
- }
- .container {
- width: 100%;
- height: 400px;
- overflow: hidden;
- top: 50%;
- left: 50%;
- margin-left: -50%;
- margin-top: -200px;
- }
- .sky {
- opacity: .8;
- width: 100%;
- height: 50%;
- top: 0;
- background: radial-gradient(at 50% 70%, #820, #610, #400, #100);
- z-index: 30;
- }
- .sea {
- width: 100%;
- height: 50%;
- top: 50%;
- background: radial-gradient(at 50% 0%, #007, #004);
- z-index: 60;
- }
- .sun {
- width: 100px;
- height: 100px;
- border-radius: 50%;
- left: 45%;
- z-index: 40;
- background: linear-gradient(#ff0, #d00);
- box-shadow: 0 0 40px 6px #f20, 0 0 150px 10px #f33;
- animation: rise 24s ease forwards;
- }
- @keyframes rise {
- 0% {
- top: 50%;
- }
- 100% {
- top: 15%;
- }
- }
- .light {
- opacity: .5;
- left: 0%;
- width: 100%;
- height: 100%;
- background: radial-gradient(at 50% 0%, #ff0, transparent);
- z-index: 60;
- animation: over 12s ease forwards;
- }
- @keyframes over {
- 0% {
- opacity: 0
- }
- ;
- 100% {
- opacity: .2
- }
- ;
- }
- .bird {
- opacity: 1;
- top: 50px;
- left: 00px;
- width: 10px;
- height: 8px;
- border: 2px solid black;
- border-radius: 50%;
- border-top-color: transparent;
- border-left-color: transparent;
- border-bottom-color: transparent;
- transform: rotateZ(-75deg);
- animation: move 25s linear infinite, flap .5s linear alternate infinite;
- z-index: 70;
- }
- .birdr {
- z-index: 70;
- opacity: 1;
- top: 50px;
- width: 10px;
- height: 8px;
- border: 2px solid black;
- border-radius: 50%;
- border-bottom-color: transparent;
- border-right-color: transparent;
- border-top-color: transparent;
- transform: rotateZ(75deg);
- margin: 0px 8px;
- animation: mover 25s linear infinite, flap .5s linear alternate infinite;
- }
- .bird1 {
- opacity: 1;
- top: 45px;
- left: 0px;
- width: 10px;
- height: 8px;
- border: 2px solid black;
- border-radius: 50%;
- border-top-color: transparent;
- border-left-color: transparent;
- border-bottom-color: transparent;
- transform: rotateZ(-90deg);
- animation: move 25s linear infinite 1.5s, flap .5s linear alternate infinite 1.5s;
- z-index: 70;
- }
- .birdr1 {
- z-index: 70;
- opacity: 1;
- top: 45px;
- width: 10px;
- height: 8px;
- border: 2px solid black;
- border-radius: 50%;
- border-bottom-color: transparent;
- border-right-color: transparent;
- border-top-color: transparent;
- transform: rotateZ(90deg);
- margin: 0px 8px;
- animation: mover 25s linear infinite 1.5s, flap .5s linear alternate infinite 1.5s;
- }
- .fin {
- border: 30px solid black;
- top: 90%;
- left: 100%;
- z-index: 100;
- border-left: 30px solid transparent;
- border-top: 0px solid transparent;
- border-right: 10px solid transparent;
- border-radius: 0px 0px 2px 10px;
- animation: swim 30s linear forwards 10s;
- }
- .wave {
- margin: 26px 7px;
- border-left: 3px solid transparent;
- border-top: 6px solid rgba(50, 50, 140, .3);
- border-right: 50px solid transparent;
- transform: rotatez(6deg);
- z-index: 60;
- }
- @keyframes swim {
- 0% {
- left: 100%;
- }
- 100% {
- left: -25%
- }
- ;
- }
- @keyframes move {
- 0% {
- left: 0px;
- }
- 100% {
- left: 100%;
- }
- }
- @keyframes mover {
- 0% {
- left: -0px;
- }
- 100% {
- left: 100%;
- }
- }
- @keyframes flap {
- 0% {
- border-radius: 90%;
- }
- 100% {
- border-radius: 10%;
- }
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="sky"></div>
- <div class="sea">
- <div class="light"></div></div>
- <div class="sun"></div>
- <div class="bird1"></div>
- <div class="birdr1"></div>
- <div class="bird"></div>
- <div class="birdr"></div>
- <div class="fin">
- <div class="wave"></div></div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/16201/84498bee2e04ca314d82129189734c24.html