找回密码
当前位置：前端开发者 > 更多 > 正文

前端开发炫酷动画波浪效果

2019-01-22 21:05:00 分类：更多 阅读(355) 评论(0)
前端开发怎么让各大浏览器兼容
web前端开发怎么学知乎
怎么进4399前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                background: lightblue;
            }
            .button {
                /*display: block;*/
                position: absolute;
                top: 15%;
                left: 50%;
                width: 200px;
                margin: 0 0 0 -100px;
                border: 3px solid red;
                color: red;
                text-align: center;
                line-height: 20px;
                padding: 8px 0;
                z-index: 100;
                font-size: 20px;
                font-weight: bold;
                text-decoration: none;
                /*文本的修饰,去掉下划线*/
                transition: all 0.5s;
            }
            .button:hover {
                border-color: orange;
                color: orange;
            }
            .button.hide {
                opacity: 0;
            }
            .particles {
                perspective: 200px;
                /*相当于某一平面平铺所延长的距离，值越小，延展的越长*/
                perspective-origin: 50% 20%;
                /*第一个值理解为延Z轴进行旋转的程度，第二个值表示绕旋转的程度*/
                width: 1000px;
                height: 500px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin: -50px 0 0 -500px;
                text-align: center;
                transform-style: preserve-3d;
            }
            .particles i {
                display: inline-block;
                margin: 20px 25px;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                box-shadow: 0 0 15px rgba(255, 0, 0, 0.9);
                background-color: #ff0;
            }
            .particles .row-1 {
                transform: translate3d(0, -50px, 0px);
            }
            .particles .row-2 {
                transform: translate3d(0, -100px, -100px);
            }
            .particles .row-3 {
                transform: translate3d(0, -150px, -200px);
            }
            .particles .row-4 {
                transform: translate3d(0, -200px, -300px);
            }
            .particles .row-5 {
                transform: translate3d(0, -250px, -400px);
            }
            .particles .row-6 {
                transform: translate3d(0, -50px, 0px);
            }
            .particles .row-7 {
                transform: translate3d(0, -100px, -100px);
            }
            .particles .row-8 {
                transform: translate3d(0, -150px, -200px);
            }
            .particles .row-9 {
                transform: translate3d(0, -200px, -300px);
            }
            .particles .row-10 {
                transform: translate3d(0, -250px, -400px);
            }
            .particles.animate .row-1 i:nth-child(1) {
                animation: waving 3s 0.3s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(2) {
                animation: waving 3s 0.5s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(3) {
                animation: waving 3s 0.7s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(4) {
                animation: waving 3s 0.9s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(5) {
                animation: waving 3s 1.1s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(6) {
                animation: waving 3s 1.3s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(7) {
                animation: waving 3s 1.5s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(8) {
                animation: waving 3s 1.7s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(9) {
                animation: waving 3s 1.9s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(10) {
                animation: waving 3s 2.1s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(11) {
                animation: waving 3s 2.2s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(12) {
                animation: waving 3s 2.4s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(13) {
                animation: waving 3s 2.6s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(14) {
                animation: waving 3s 2.8s ease-in-out infinite;
            }
            .particles.animate .row-1 i:nth-child(15) {
                animation: waving 3s 3s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(1) {
                animation: waving 3s 0.4s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(2) {
                animation: waving 3s 0.6s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(3) {
                animation: waving 3s 0.8s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(4) {
                animation: waving 3s 1s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(5) {
                animation: waving 3s 1.2s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(6) {
                animation: waving 3s 1.4s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(7) {
                animation: waving 3s 1.6s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(8) {
                animation: waving 3s 1.8s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(9) {
                animation: waving 3s 2s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(10) {
                animation: waving 3s 2.2s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(11) {
                animation: waving 3s 2.4s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(12) {
                animation: waving 3s 2.6s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(13) {
                animation: waving 3s 2.8s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(14) {
                animation: waving 3s 3s ease-in-out infinite;
            }
            .particles.animate .row-2 i:nth-child(15) {
                animation: waving 3s 3.2s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(1) {
                animation: waving 3s 0.5s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(2) {
                animation: waving 3s 0.7s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(3) {
                animation: waving 3s 0.9s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(4) {
                animation: waving 3s 1.1s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(5) {
                animation: waving 3s 1.3s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(6) {
                animation: waving 3s 1.5s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(7) {
                animation: waving 3s 1.7s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(8) {
                animation: waving 3s 1.9s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(9) {
                animation: waving 3s 2.1s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(10) {
                animation: waving 3s 2.3s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(11) {
                animation: waving 3s 2.5s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(12) {
                animation: waving 3s 2.7s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(13) {
                animation: waving 3s 2.9s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(14) {
                animation: waving 3s 3.1s ease-in-out infinite;
            }
            .particles.animate .row-3 i:nth-child(15) {
                animation: waving 3s 3.3s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(1) {
                animation: waving 3s 0.6s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(2) {
                animation: waving 3s 0.8s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(3) {
                animation: waving 3s 1s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(4) {
                animation: waving 3s 1.2s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(5) {
                animation: waving 3s 1.4s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(6) {
                animation: waving 3s 1.6s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(7) {
                animation: waving 3s 1.8s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(8) {
                animation: waving 3s 2s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(9) {
                animation: waving 3s 2.2s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(10) {
                animation: waving 3s 2.4s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(11) {
                animation: waving 3s 2.6s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(12) {
                animation: waving 3s 2.8s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(13) {
                animation: waving 3s 3s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(14) {
                animation: waving 3s 3.2s ease-in-out infinite;
            }
            .particles.animate .row-4 i:nth-child(15) {
                animation: waving 3s 3.4s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(1) {
                animation: waving 3s 0.7s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(2) {
                animation: waving 3s 0.9s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(3) {
                animation: waving 3s 1.1s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(4) {
                animation: waving 3s 1.3s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(5) {
                animation: waving 3s 1.5s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(6) {
                animation: waving 3s 1.7s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(7) {
                animation: waving 3s 1.9s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(8) {
                animation: waving 3s 2.1s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(9) {
                animation: waving 3s 2.3s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(10) {
                animation: waving 3s 2.5s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(11) {
                animation: waving 3s 2.7s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(12) {
                animation: waving 3s 2.9s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(13) {
                animation: waving 3s 3.1s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(14) {
                animation: waving 3s 3.3s ease-in-out infinite;
            }
            .particles.animate .row-5 i:nth-child(15) {
                animation: waving 3s 3.5s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(1) {
                animation: waving 3s 0.3s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(2) {
                animation: waving 3s 0.5s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(3) {
                animation: waving 3s 0.7s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(4) {
                animation: waving 3s 0.9s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(5) {
                animation: waving 3s 1.1s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(6) {
                animation: waving 3s 1.3s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(7) {
                animation: waving 3s 1.5s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(8) {
                animation: waving 3s 1.7s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(9) {
                animation: waving 3s 1.9s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(10) {
                animation: waving 3s 2.1s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(11) {
                animation: waving 3s 2.2s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(12) {
                animation: waving 3s 2.4s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(13) {
                animation: waving 3s 2.6s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(14) {
                animation: waving 3s 2.8s ease-in-out infinite;
            }
            .particles.animate .row-6 i:nth-child(15) {
                animation: waving 3s 3s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(1) {
                animation: waving 3s 0.4s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(2) {
                animation: waving 3s 0.6s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(3) {
                animation: waving 3s 0.8s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(4) {
                animation: waving 3s 1s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(5) {
                animation: waving 3s 1.2s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(6) {
                animation: waving 3s 1.4s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(7) {
                animation: waving 3s 1.6s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(8) {
                animation: waving 3s 1.8s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(9) {
                animation: waving 3s 2s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(10) {
                animation: waving 3s 2.2s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(11) {
                animation: waving 3s 2.4s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(12) {
                animation: waving 3s 2.6s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(13) {
                animation: waving 3s 2.8s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(14) {
                animation: waving 3s 3s ease-in-out infinite;
            }
            .particles.animate .row-7 i:nth-child(15) {
                animation: waving 3s 3.2s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(1) {
                animation: waving 3s 0.5s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(2) {
                animation: waving 3s 0.7s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(3) {
                animation: waving 3s 0.9s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(4) {
                animation: waving 3s 1.1s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(5) {
                animation: waving 3s 1.3s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(6) {
                animation: waving 3s 1.5s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(7) {
                animation: waving 3s 1.7s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(8) {
                animation: waving 3s 1.9s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(9) {
                animation: waving 3s 2.1s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(10) {
                animation: waving 3s 2.3s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(11) {
                animation: waving 3s 2.5s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(12) {
                animation: waving 3s 2.7s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(13) {
                animation: waving 3s 2.9s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(14) {
                animation: waving 3s 3.1s ease-in-out infinite;
            }
            .particles.animate .row-8 i:nth-child(15) {
                animation: waving 3s 3.3s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(1) {
                animation: waving 3s 0.6s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(2) {
                animation: waving 3s 0.8s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(3) {
                animation: waving 3s 1s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(4) {
                animation: waving 3s 1.2s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(5) {
                animation: waving 3s 1.4s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(6) {
                animation: waving 3s 1.6s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(7) {
                animation: waving 3s 1.8s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(8) {
                animation: waving 3s 2s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(9) {
                animation: waving 3s 2.2s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(10) {
                animation: waving 3s 2.4s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(11) {
                animation: waving 3s 2.6s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(12) {
                animation: waving 3s 2.8s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(13) {
                animation: waving 3s 3s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(14) {
                animation: waving 3s 3.2s ease-in-out infinite;
            }
            .particles.animate .row-9 i:nth-child(15) {
                animation: waving 3s 3.4s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(1) {
                animation: waving 3s 0.7s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(2) {
                animation: waving 3s 0.9s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(3) {
                animation: waving 3s 1.1s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(4) {
                animation: waving 3s 1.3s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(5) {
                animation: waving 3s 1.5s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(6) {
                animation: waving 3s 1.7s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(7) {
                animation: waving 3s 1.9s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(8) {
                animation: waving 3s 2.1s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(9) {
                animation: waving 3s 2.3s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(10) {
                animation: waving 3s 2.5s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(11) {
                animation: waving 3s 2.7s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(12) {
                animation: waving 3s 2.9s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(13) {
                animation: waving 3s 3.1s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(14) {
                animation: waving 3s 3.3s ease-in-out infinite;
            }
            .particles.animate .row-10 i:nth-child(15) {
                animation: waving 3s 3.5s ease-in-out infinite;
            }
            @keyframes waving {
                0% {
                    transform: translate3d(0, 0, 0);
                }
                50% {
                    transform: translate3d(0, 200px, 0);
                }
                100% {
                    transform: translate3d(0, 0, 0);
                }
            }
        </style>
    </head>
    <body>
        <a href=”javascript:startAnimation()” class=”button”>开始</a>
        <div class=”particles”>
            <div class=”row-1″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-2″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-3″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-4″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-5″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-6″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-7″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-8″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-9″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <div class=”row-10″>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
                <i></i> <i></i> <i></i> <i></i> <i></i> <i></i> <i></i>
            </div>
            <!–<div class=”row-11″>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class=”row-12″>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class=”row-13″>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class=”row-14″>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
<div class=”row-15″>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>–>
        </div>
        <script>
            function startAnimation() {
                var wave = document.querySelector(‘.particles’)
                wave.setAttribute(‘class’, ‘particles animate’)
                var btn = document.querySelector(‘.button’)
                btn.setAttribute(
                    ‘class’,
                    ‘button hide’,
                ) /*设置按钮的类型属性,并为其赋指定的值*/
                // var chil = wave.getElementsByTagName(‘i’);
                var row1 = document.querySelector(‘.row-1’)
                var row2 = document.querySelector(‘.row-2’)
                var row3 = document.querySelector(‘.row-3’)
                var row4 = document.querySelector(‘.row-4’)
                var row5 = document.querySelector(‘.row-5’)
                var row6 = document.querySelector(‘.row-6’)
                var row7 = document.querySelector(‘.row-7’)
                var row8 = document.querySelector(‘.row-8’)
                var row9 = document.querySelector(‘.row-9’)
                var row10 = document.querySelector(‘.row-10’)
                // var row11 = document.querySelector(“.row-11”);
                // var row12 = document.querySelector(“.row-12”);
                // var row13 = document.querySelector(“.row-13”);
                // var row14 = document.querySelector(“.row-14”);
                // var row15 = document.querySelector(“.row-15”);
                var chil1 = row1.children
                var chil2 = row2.children
                var chil3 = row3.children
                var chil4 = row4.children
                var chil5 = row5.children
                var chil6 = row6.children
                var chil7 = row7.children
                var chil8 = row8.children
                var chil9 = row9.children
                var chil10 = row10.children
                // var chil11 = row11.children;
                // var chil12 = row12.children;
                // var chil13 = row13.children;
                // var chil14 = row14.children;
                // var chil15 = row15.children;
                var arr = [‘green’, ‘blue’, ‘orange’, ‘red’, ‘black’, ‘pink’]
                var time = setInterval(change, 1000)
                function change() {
                    for (var i = 0; i < chil1.length; i++) {
                        var j = parseInt(Math.random() * arr.length – 1)
                        chil1[i].style.background = arr[j]
                    }
                    var t = setInterval(run2, 2000)
                    function run2() {
                        changecolor(chil2)
                    }
                    var t = setInterval(run3, 3000)
                    function run3() {
                        changecolor(chil3)
                    }
                    var t = setInterval(run4, 4000)
                    function run4() {
                        changecolor(chil4)
                    }
                    var t = setInterval(run5, 5000)
                    function run5() {
                        changecolor(chil5)
                    }
                    var t = setInterval(run6, 6000)
                    function run6() {
                        changecolor(chil6)
                    }
                    var t = setInterval(run7, 7000)
                    function run7() {
                        changecolor(chil7)
                    }
                    var t = setInterval(run8, 8000)
                    function run8() {
                        changecolor(chil8)
                    }
                    var t = setInterval(run9, 9000)
                    function run9() {
                        changecolor(chil9)
                    }
                    var t = setInterval(run10, 10000)
                    function run10() {
                        changecolor(chil10)
                    }
                    // var t = setInterval(run11,11000);
                    // function run11()
                    // {
                    // changecolor(chil11);
                    // }
                    // var t = setInterval(run12,12000);
                    // function run12()
                    // {
                    // changecolor(chil12);
                    // }
                    // var t = setInterval(run13,13000);
                    // function run13()
                    // {
                    // changecolor(chil13);
                    // }
                    // var t = setInterval(run14,14000);
                    // function run14()
                    // {
                    // changecolor(chil14);
                    // }
                    // var t = setInterval(run15,15000);
                    // function run15()
                    // {
                    // changecolor(chil15);
                    // }
                }
                change()
                function changecolor(ele) {
                    for (var i = 0; i < ele.length; i++) {
                        var j = parseInt(Math.random() * arr.length – 1)
                        ele[i].style.background = arr[j]
                    }
                }
            }
        </script>
    </body>
</html>
怎么学习前端开发
dw怎么做web前端开发
ico在前端开发中怎么用
» 本文来自：前端开发者 » 《前端开发炫酷动画波浪效果》
» 本文链接地址：https://www.rokub.com/7938.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论