SOURCE

console 命令行工具 X clear

                    
>
console
<div class="music active">
    <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>
    <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>
    <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>
    <i></i>
    <i></i>
    <i></i>
</div>
* {
	margin:0;
	padding:0;
}
body {
	background-color:#ffffff
}
.music {
	width:100%px;
	height:1px;
	margin:100px auto;
	position:relative;
}
.music i {
	width:12px;
	height:8px;
	position:absolute;
	bottom:0;
	background-color:#ffffff;
}
.music i:nth-of-type(1) {
	left:20px;
}
.music i:nth-of-type(2) {
	left:40px;
}
.music i:nth-of-type(3) {
	left:60px;
}
.music i:nth-of-type(4) {
	left:80px;
}
.music i:nth-of-type(5) {
	left:100px;
}
.music i:nth-of-type(6) {
	left:120px;
}
.music i:nth-of-type(7) {
	left:140PX;
}
.music i:nth-of-type(8) {
	left:160px;
}
.music i:nth-of-type(9) {
	left:180px;
}
.music i:nth-of-type(10) {
	left:200px;
}
.music i:nth-of-type(11) {
	left:220px;
}
.music i:nth-of-type(12) {
	left:240px;
}
.music i:nth-of-type(13) {
	left:260px;
}
.music i:nth-of-type(14) {
	left:280px;
}
.music i:nth-of-type(15) {
	left:300px;
}
.music i:nth-of-type(16) {
	left:320px;
}
.music i:nth-of-type(17) {
	left:340px;
}
.music i:nth-of-type(18) {
	left:360px;
}
.music i:nth-of-type(19) {
	left:380PX;
}
.music i:nth-of-type(20) {
	left:400px;
}
.music i:nth-of-type(21) {
	left:420px;
}
.music i:nth-of-type(22) {
	left:440px;
}
.music i:nth-of-type(23) {
	left:460px;
}
.music i:nth-of-type(24) {
	left:480px;
}
.music i:nth-of-type(25) {
	left:500px;
}
.music i:nth-of-type(26) {
	left:520px;
}
.music i:nth-of-type(27) {
	left:540px;
}
.music i:nth-of-type(28) {
	left:560px;
}
.music i:nth-of-type(29) {
	left:580px;
}
.music i:nth-of-type(30) {
	left:600px;
}
.music i:nth-of-type(31) {
	left:620PX;
}
.music i:nth-of-type(32) {
	left:640px;
}
.music i:nth-of-type(33) {
	left:660px;
}
.music i:nth-of-type(34) {
	left:680px;
}
.music i:nth-of-type(35) {
	left:700px;
}
.music i:nth-of-type(36) {
	left:720px;
}
.music i:nth-of-type(37) {
	left:740px;
}
.music i:nth-of-type(38) {
	left:760px;
}
.music i:nth-of-type(39) {
	left:780px;
}
.music i:nth-of-type(40) {
	left:800px;
}
.music i:nth-of-type(41) {
	left:820px;
}
.music i:nth-of-type(42) {
	left:840px;
}
.music i:nth-of-type(43) {
	left:860PX;
}
.music i:nth-of-type(44) {
	left:880px;
}
.music i:nth-of-type(45) {
	left:900px;
}
.music i:nth-of-type(46) {
	left:920px;
}
.music i:nth-of-type(47) {
	left:940px;
}
.music i:nth-of-type(48) {
	left:960px;
}
.music.active i:nth-of-type(1) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#fdeff2;
}
.music.active i:nth-of-type(2) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#e4d2d8;
}
.music.active i:nth-of-type(3) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#f6bfbc;
}
.music.active i:nth-of-type(4) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#f5b199;
}
.music.active i:nth-of-type(5) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#f0908d;
}
.music.active i:nth-of-type(6) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#f4b3c2;
}
.music.active i:nth-of-type(7) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#e8d3c7;
}
.music.active i:nth-of-type(8) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#e6cde3;
}
.music.active i:nth-of-type(9) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#e597b2;
}
.music.active i:nth-of-type(10) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#ede4cd;
}
.music.active i:nth-of-type(11) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#f8e58c;
}
.music.active i:nth-of-type(12) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#fddea5;
}
.music.active i:nth-of-type(13) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#f7bd8f;
}
.music.active i:nth-of-type(14) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#dccb18;
}
.music.active i:nth-of-type(15) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#c3d825;
}
.music.active i:nth-of-type(16) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#d8e698;
}
.music.active i:nth-of-type(17) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#b0ca71;
}
.music.active i:nth-of-type(18) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#c8d5bb;
}
.music.active i:nth-of-type(19) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#c1e4e9;
}
.music.active i:nth-of-type(20) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#a0d8ef;
}
.music.active i:nth-of-type(21) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#83ccd2;
}
.music.active i:nth-of-type(22) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#59b9c6;
}
.music.active i:nth-of-type(23) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#5383c3;
}
.music.active i:nth-of-type(24) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#8491c3;
}
.music.active i:nth-of-type(25) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#a59aca;
}
.music.active i:nth-of-type(26) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#c0a2c7;
}
.music.active i:nth-of-type(27) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#d3cfd9;
}
.music.active i:nth-of-type(28) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#a69abd;
}
.music.active i:nth-of-type(29) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#d4dcda;
}
.music.active i:nth-of-type(30) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#eae5e3;
}
.music.active i:nth-of-type(31) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#dcdddd;
}
.music.active i:nth-of-type(32) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#bed2c3;
}
.music.active i:nth-of-type(33) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#68be8d;
}
.music.active i:nth-of-type(34) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#3eb370;
}
.music.active i:nth-of-type(35) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#028760;
}
.music.active i:nth-of-type(36) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#3a5b52;
}
.music.active i:nth-of-type(37) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#00a381;
}
.music.active i:nth-of-type(38) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#5c9291;
}
.music.active i:nth-of-type(39) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#80989b;
}
.music.active i:nth-of-type(40) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#5b7e91;
}
.music.active i:nth-of-type(41) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#698aab;
}
.music.active i:nth-of-type(42) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#0094c8;
}
.music.active i:nth-of-type(43) {
	-webkit-animation:wave 0.66s linear infinite;
	animation:wave 0.66s linear infinite;
	background-color:#007bbb;
}
.music.active i:nth-of-type(44) {
	-webkit-animation:wave 0.8s linear infinite;
	animation:wave 0.8s linear infinite;
	background-color:#bbc8e6;
}
.music.active i:nth-of-type(45) {
	-webkit-animation:wave 0.7s linear infinite;
	animation:wave 0.7s linear infinite;
	background-color:#8491c3;
}
.music.active i:nth-of-type(46) {
	-webkit-animation:wave 0.5s linear infinite;
	animation:wave 0.5s linear infinite;
	background-color:#4d5aaf;
}
.music.active i:nth-of-type(47) {
	-webkit-animation:wave 0.9s linear infinite;
	animation:wave 0.9s linear infinite;
	background-color:#867ba9;
}
.music.active i:nth-of-type(48) {
	-webkit-animation:wave 1.2s linear infinite;
	animation:wave 1.2s linear infinite;
	background-color:#dbd0e6;
}
@-webkit-keyframes wave {
	0% {
	height:8px
}
50% {
	height:100px
}
100% {
	height:12px
}
}@keyframes wave {
	0% {
	height:8px
}
50% {
	height:100px
}
100% {
	height:12px
}
}