CSS
语言：
CSSSCSS
确定
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
z-index: 2;
padding: 60px;
}
.container {
width: 75px;
height: 105px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 15px;
}
.dot {
background: transparent;
width: 10px;
height: 10px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 5px;
font-size: 8px;
/*
&.red{
background:red;
}*/
}
.bg {
position: absolute;
z-index: 1;
top: 0;
left: 0;
overflow: hidden;
height: calc(100% - 60px);
box-sizing: border-box;
margin: 30px;
-webkit-transition: height 1.3s cubic-bezier(0.86, 0, 0.07, 1);
transition: height 1.3s cubic-bezier(0.86, 0, 0.07, 1);
/* easeInOutQuint */
}
.bg.bg-intro {
height: 0;
}
.bg-dot {
background: rgba(0, 0, 0, 0.07);
width: 10px;
height: 10px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 5px;
position: relative;
top: 0;
}
#c0 .dot:nth-child(2) {
background: red;
}
#c0 .dot:nth-child(3) {
background: red;
}
#c0 .dot:nth-child(4) {
background: red;
}
#c0 .dot:nth-child(6) {
background: red;
}
#c0 .dot:nth-child(10) {
background: red;
}
#c0 .dot:nth-child(11) {
background: red;
}
#c0 .dot:nth-child(14) {
background: red;
}
#c0 .dot:nth-child(15) {
background: red;
}
#c0 .dot:nth-child(16) {
background: red;
}
#c0 .dot:nth-child(18) {
background: red;
}
#c0 .dot:nth-child(20) {
background: red;
}
#c0 .dot:nth-child(21) {
background: red;
}
#c0 .dot:nth-child(22) {
background: red;
}
#c0 .dot:nth-child(25) {
background: red;
}
#c0 .dot:nth-child(26) {
background: red;
}
#c0 .dot:nth-child(30) {
background: red;
}
#c0 .dot:nth-child(32) {
background: red;
}
#c0 .dot:nth-child(33) {
background: red;
}
#c0 .dot:nth-child(34) {
background: red;
}
#c1 .dot:nth-child(2) {
background: red;
}
#c1 .dot:nth-child(3) {
background: red;
}
#c1 .dot:nth-child(8) {
background: red;
}
#c1 .dot:nth-child(13) {
background: red;
}
#c1 .dot:nth-child(18) {
background: red;
}
#c1 .dot:nth-child(23) {
background: red;
}
#c1 .dot:nth-child(28) {
background: red;
}
#c1 .dot:nth-child(33) {
background: red;
}
#c2 .dot:nth-child(2) {
background: red;
}
#c2 .dot:nth-child(3) {
background: red;
}
#c2 .dot:nth-child(4) {
background: red;
}
#c2 .dot:nth-child(6) {
background: red;
}
#c2 .dot:nth-child(10) {
background: red;
}
#c2 .dot:nth-child(15) {
background: red;
}
#c2 .dot:nth-child(17) {
background: red;
}
#c2 .dot:nth-child(18) {
background: red;
}
#c2 .dot:nth-child(19) {
background: red;
}
#c2 .dot:nth-child(21) {
background: red;
}
#c2 .dot:nth-child(26) {
background: red;
}
#c2 .dot:nth-child(31) {
background: red;
}
#c2 .dot:nth-child(32) {
background: red;
}
#c2 .dot:nth-child(33) {
background: red;
}
#c2 .dot:nth-child(34) {
background: red;
}
#c2 .dot:nth-child(35) {
background: red;
}
#c3 .dot:nth-child(2) {
background: red;
}
#c3 .dot:nth-child(3) {
background: red;
}
#c3 .dot:nth-child(4) {
background: red;
}
#c3 .dot:nth-child(6) {
background: red;
}
#c3 .dot:nth-child(10) {
background: red;
}
#c3 .dot:nth-child(15) {
background: red;
}
#c3 .dot:nth-child(17) {
background: red;
}
#c3 .dot:nth-child(18) {
background: red;
}
#c3 .dot:nth-child(19) {
background: red;
}
#c3 .dot:nth-child(25) {
background: red;
}
#c3 .dot:nth-child(26) {
background: red;
}
#c3 .dot:nth-child(30) {
background: red;
}
#c3 .dot:nth-child(32) {
background: red;
}
#c3 .dot:nth-child(33) {
background: red;
}
#c3 .dot:nth-child(34) {
background: red;
}
#c4 .dot:nth-child(4) {
background: red;
}
#c4 .dot:nth-child(8) {
background: red;
}
#c4 .dot:nth-child(9) {
background: red;
}
#c4 .dot:nth-child(12) {
background: red;
}
#c4 .dot:nth-child(14) {
background: red;
}
#c4 .dot:nth-child(16) {
background: red;
}
#c4 .dot:nth-child(19) {
background: red;
}
#c4 .dot:nth-child(21) {
background: red;
}
#c4 .dot:nth-child(22) {
background: red;
}
#c4 .dot:nth-child(23) {
background: red;
}
#c4 .dot:nth-child(24) {
background: red;
}
#c4 .dot:nth-child(25) {
background: red;
}
#c4 .dot:nth-child(29) {
background: red;
}
#c4 .dot:nth-child(34) {
background: red;
}
#c5 .dot:nth-child(1) {
background: red;
}
#c5 .dot:nth-child(2) {
background: red;
}
#c5 .dot:nth-child(3) {
background: red;
}
#c5 .dot:nth-child(4) {
background: red;
}
#c5 .dot:nth-child(5) {
background: red;
}
#c5 .dot:nth-child(6) {
background: red;
}
#c5 .dot:nth-child(11) {
background: red;
}
#c5 .dot:nth-child(16) {
background: red;
}
#c5 .dot:nth-child(17) {
background: red;
}
#c5 .dot:nth-child(18) {
background: red;
}
#c5 .dot:nth-child(19) {
background: red;
}
#c5 .dot:nth-child(25) {
background: red;
}
#c5 .dot:nth-child(26) {
background: red;
}
#c5 .dot:nth-child(30) {
background: red;
}
#c5 .dot:nth-child(32) {
background: red;
}
#c5 .dot:nth-child(33) {
background: red;
}
#c5 .dot:nth-child(34) {
background: red;
}
#c6 .dot:nth-child(2) {
background: red;
}
#c6 .dot:nth-child(3) {
background: red;
}
#c6 .dot:nth-child(4) {
background: red;
}
#c6 .dot:nth-child(6) {
background: red;
}
#c6 .dot:nth-child(10) {
background: red;
}
#c6 .dot:nth-child(11) {
background: red;
}
#c6 .dot:nth-child(16) {
background: red;
}
#c6 .dot:nth-child(17) {
background: red;
}
#c6 .dot:nth-child(18) {
background: red;
}
#c6 .dot:nth-child(19) {
background: red;
}
#c6 .dot:nth-child(21) {
background: red;
}
#c6 .dot:nth-child(25) {
background: red;
}
#c6 .dot:nth-child(26) {
background: red;
}
#c6 .dot:nth-child(30) {
background: red;
}
#c6 .dot:nth-child(32) {
background: red;
}
#c6 .dot:nth-child(33) {
background: red;
}
#c6 .dot:nth-child(34) {
background: red;
}
#c7 .dot:nth-child(1) {
background: red;
}
#c7 .dot:nth-child(2) {
background: red;
}
#c7 .dot:nth-child(3) {
background: red;
}
#c7 .dot:nth-child(4) {
background: red;
}
#c7 .dot:nth-child(5) {
background: red;
}
#c7 .dot:nth-child(10) {
background: red;
}
#c7 .dot:nth-child(15) {
background: red;
}
#c7 .dot:nth-child(19) {
background: red;
}
#c7 .dot:nth-child(23) {
background: red;
}
#c7 .dot:nth-child(27) {
background: red;
}
#c7 .dot:nth-child(31) {
background: red;
}
#c8 .dot:nth-child(2) {
background: red;
}
#c8 .dot:nth-child(3) {
background: red;
}
#c8 .dot:nth-child(4) {
background: red;
}
#c8 .dot:nth-child(6) {
background: red;
}
#c8 .dot:nth-child(10) {
background: red;
}
#c8 .dot:nth-child(11) {
background: red;
}
#c8 .dot:nth-child(15) {
background: red;
}
#c8 .dot:nth-child(17) {
background: red;
}
#c8 .dot:nth-child(18) {
background: red;
}
#c8 .dot:nth-child(19) {
background: red;
}
#c8 .dot:nth-child(21) {
background: red;
}
#c8 .dot:nth-child(25) {
background: red;
}
#c8 .dot:nth-child(26) {
background: red;
}
#c8 .dot:nth-child(30) {
background: red;
}
#c8 .dot:nth-child(32) {
background: red;
}
#c8 .dot:nth-child(33) {
background: red;
}
#c8 .dot:nth-child(34) {
background: red;
}
#c9 .dot:nth-child(2) {
background: red;
}
#c9 .dot:nth-child(3) {
background: red;
}
#c9 .dot:nth-child(4) {
background: red;
}
#c9 .dot:nth-child(6) {
background: red;
}
#c9 .dot:nth-child(10) {
background: red;
}
#c9 .dot:nth-child(11) {
background: red;
}
#c9 .dot:nth-child(15) {
background: red;
}
#c9 .dot:nth-child(17) {
background: red;
}
#c9 .dot:nth-child(18) {
background: red;
}
#c9 .dot:nth-child(19) {
background: red;
}
#c9 .dot:nth-child(20) {
background: red;
}
#c9 .dot:nth-child(25) {
background: red;
}
#c9 .dot:nth-child(26) {
background: red;
}
#c9 .dot:nth-child(30) {
background: red;
}
#c9 .dot:nth-child(32) {
background: red;
}
#c9 .dot:nth-child(33) {
background: red;
}
#c9 .dot:nth-child(34) {
background: red;
}
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
