前端开发炫酷动画波浪效果
摘要： 前端开发怎么让各大浏览器兼容 web前端开发怎么学知乎 怎么进4399前端开发 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=̶……
| 前端开发怎么让各大浏览器兼容 |
| 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
近期评论