说明:
1)nth-child() = 数字 代表第几个 li 也就是旋转向上的正方形
2) 可以自己增加 li 并设置大小, 延迟多少秒开始向上旋转移动 (animation-delay), 多少秒移动完成 (animation-duration)
3) 兼容主流浏览器 + 手机, 兼容, 兼容
4) 需要学习视频 + Q 280034684
html 代码
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <link rel="stylesheet" href="CSS/css.css">
- <style>
- * {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
- font-weight: 300;
- }
- .wrapper {
- background: #50a3a2;
- background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
- background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- z-index:998;
- }
- .wrapper.form-success .container h1 {
- -webkit-transform: translateY(85px);
- transform: translateY(85px);
- }
- .container h1 {
- font-size: 40px;
- -webkit-transition-duration: 1s;
- transition-duration: 1s;
- -webkit-transition-timing-function: ease-in-put;
- transition-timing-function: ease-in-put;
- font-weight: 200;
- }
- .bg-bubbles {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
- .bg-bubbles li {
- position: absolute;
- list-style: none;
- display: block;
- width: 40px;
- height: 40px;
- background-color: rgba(255, 255, 255, 0.15);
- bottom: -160px;
- -webkit-animation: square 35s infinite;
- animation: square 35s infinite;
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- }
- .bg-bubbles li:nth-child(1) {
- left: 10%;
- }
- .bg-bubbles li:nth-child(2) {
- left: 20%;
- width: 80px;
- height: 80px;
- -webkit-animation-delay: 2s;
- animation-delay: 2s;
- -webkit-animation-duration: 17s;
- animation-duration: 17s;
- }
- .bg-bubbles li:nth-child(3) {
- left: 25%;
- -webkit-animation-delay: 4s;
- animation-delay: 4s;
- }
- .bg-bubbles li:nth-child(4) {
- left: 40%;
- width: 60px;
- height: 60px;
- -webkit-animation-duration: 22s;
- animation-duration: 22s;
- background-color: rgba(255, 255, 255, 0.25);
- }
- .bg-bubbles li:nth-child(5) {
- left: 70%;
- }
- .bg-bubbles li:nth-child(6) {
- left: 80%;
- width: 120px;
- height: 120px;
- -webkit-animation-delay: 3s;
- animation-delay: 3s;
- background-color: rgba(255, 255, 255, 0.2);
- }
- .bg-bubbles li:nth-child(7) {
- left: 32%;
- width: 160px;
- height: 160px;
- -webkit-animation-delay: 7s;
- animation-delay: 7s;
- }
- .bg-bubbles li:nth-child(8) {
- left: 55%;
- width: 20px;
- height: 20px;
- -webkit-animation-delay: 15s;
- animation-delay: 15s;
- -webkit-animation-duration: 40s;
- animation-duration: 40s;
- }
- .bg-bubbles li:nth-child(9) {
- left: 25%;
- width: 10px;
- height: 10px;
- -webkit-animation-delay: 2s;
- animation-delay: 2s;
- -webkit-animation-duration: 40s;
- animation-duration: 40s;
- background-color: rgba(255, 255, 255, 0.3);
- }
- .bg-bubbles li:nth-child(10) {
- left: 90%;
- width: 160px;
- height: 160px;
- -webkit-animation-delay: 11s;
- animation-delay: 11s;
- }
- @-webkit-keyframes square {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 100% {
- /*-1080px 代表从下向上移动多少 600deg 代表从下向上移动过程中旋转 600 度 */
- -webkit-transform: translateY(-1080px) rotate(600deg);
- transform: translateY(-1080px) rotate(600deg);
- }
- }
- @keyframes square {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
- 100% {
- -webkit-transform: translateY(-1080px) rotate(600deg);
- transform: translateY(-1080px) rotate(600deg);
- }
- }
- </style>
- </head>
- <body>
- <div class="wrapper">
- <ul class="bg-bubbles">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/34064/7dba9a157d77f4f1934fb70a1d22f400.html