css布局实现一个大数据大屏看板效果代码
代码语言：html
所属分类：图表
代码描述：css+div布局实现一个大数据大屏看板动态展销效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin:0;
padding:0
}
ol,ul,li {
list-style:none
}
html,body {
width:100%;
height:100%;
overflow:hidden
}
body {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/background.png) no-repeat center;
background-size:100%
}
.header {
width:75%;
height:10%;
margin:auto
}
.header>div {
float:left
}
.header .title {
height:100%;
width:40%;
text-align:center;
color:#fff;
font-size:1.4rem;
display:table;
opacity:0;
animation:zoomIn .5s linear forwards .8s
}
.header .title span {
display:table-cell;
vertical-align:middle
}
.header .left,.header .right {
width:30%;
height:100%;
float:left
}
.header .left li,.header .right li {
width:3.5rem;
height:1rem;
background-color:#02b687;
opacity:0;
margin:0 2%;
float:left;
border-radius:1rem;
margin-top:10%
}
.header .left li:nth-of-type(1) {
animation:show1 .2s linear forwards
}
.header .left li:nth-of-type(2) {
animation:show2 .2s linear forwards .2s
}
.header .left li:nth-of-type(3) {
animation:show3 .2s linear forwards .4s
}
.header .left li:nth-of-type(4) {
animation:show4 .2s linear forwards .6s
}
.header .right li {
float:right
}
.header .right li:nth-of-type(1) {
animation:show1 .2s linear forwards
}
.header .right li:nth-of-type(2) {
animation:show2 .2s linear forwards .2s
}
.header .right li:nth-of-type(3) {
animation:show3 .2s linear forwards .4s
}
.header .right li:nth-of-type(4) {
animation:show4 .2s linear forwards .6s
}
.main {
width:100%;
height:60%
}
.main>div {
float:left
}
.main .main-left {
width:22.5%;
height:100%
}
.main .main-left .completion {
width:100%;
height:30%;
position:relative
}
.main .main-left .completion .completion-content {
width:7rem;
height:7rem;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/border.png) no-repeat center;
background-size:contain;
position:absolute;
left:-50%;
top:50%;
transform:translate(-50%,-50%);
animation:animate1 1s linear forwards 7s
}
.main .main-left .completion .completion-content .rate {
width:4rem;
height:4rem;
position:absolute;
left:17%;
top:51%;
transform:translateY(-50%);
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/cricle.png) no-repeat center;
background-size:contain;
animation:rotate1 5s ease infinite
}
.main .main-left .completion .completion-content .rate h5 {
text-align:center;
height:50%;
width:100%;
color:#fff;
display:table
}
.main .main-left .completion .completion-content .rate h5 span {
display:table-cell;
vertical-align:bottom;
font-size:.8rem
}
.main .main-left .completion .completion-content .rate p {
text-align:center;
height:50%;
width:100%;
color:#fff;
display:table
}
.main .main-left .completion .completion-content .rate p span {
display:table-cell;
vertical-align:middle
}
.main .main-left .lightning {
width:100%;
height:40%
}
.main .main-left .lightning .lightning1,.main .main-left .lightning .lightning2 {
width:100%;
height:50%
}
.main .main-left .lightning .lightning1>div {
float:left
}
.main .main-left .lightning .lightning1 .sd1 {
width:55%;
height:100%
}
.main .main-left .lightning .lightning1 .jd1 {
width:45%;
height:100%
}
.main .main-left .lightning .lightning1 .jd1>div {
float:left
}
.main .main-left .lightning .lightning1 .jd1 ul {
float:left;
margin-top:30%
}
.main .main-left .lightning .lightning1 .jd1 ul li {
float:left;
margin-right:.15rem;
background-color:#00e4c8;
border-radius:50%;
opacity:0
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(1) {
width:.5rem;
height:.5rem;
animation:show4 .1s linear forwards 2.5s
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(2) {
width:.54rem;
height:.54rem;
animation:show4 .1s linear forwards 2.6s
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(3) {
width:.58rem;
height:.58rem;
animation:show4 .1s linear forwards 2.7s
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(4) {
width:.62rem;
height:.62rem;
animation:show4 .1s linear forwards 2.8s
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(5) {
width:.66rem;
height:.66rem;
animation:show4 .1s linear forwards 2.9s
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(6) {
width:.7rem;
height:.7rem;
animation:show4 .1s linear forwards 3s
}
.main .main-left .lightning .lightning1 .jd1 ul li:nth-of-type(7) {
width:.74rem;
height:.74rem;
animation:show4 .1s linear forwards 3.1s
}
.main .main-left .lightning .lightning1 .jd1 .box1 {
width:.8rem;
height:40%;
background-color:#00e4c8;
margin-left:5%;
margin-top:20%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.2s
}
.main .main-left .lightning .lightning1 .jd1 .box2 {
width:.8rem;
height:60%;
background-color:#00e4c8;
margin-top:15%;
margin-left:5%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.3s
}
.main .main-left .lightning .lightning2>div {
float:left
}
.main .main-left .lightning .lightning2 .sd2 {
width:55%;
height:100%
}
.main .main-left .lightning .lightning2 .jd2 {
width:45%;
height:100%
}
.main .main-left .lightning .lightning2 .jd2>div {
float:left
}
.main .main-left .lightning .lightning2 .jd2 ul {
float:left;
margin-top:30%
}
.main .main-left .lightning .lightning2 .jd2 ul li {
float:left;
margin-right:.15rem;
background-color:#00e4c8;
border-radius:50%;
opacity:0
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(1) {
width:.5rem;
height:.5rem;
animation:show4 .1s linear forwards 2.5s
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(2) {
width:.54rem;
height:.54rem;
animation:show4 .1s linear forwards 2.6s
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(3) {
width:.58rem;
height:.58rem;
animation:show4 .1s linear forwards 2.7s
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(4) {
width:.62rem;
height:.62rem;
animation:show4 .1s linear forwards 2.8s
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(5) {
width:.66rem;
height:.66rem;
animation:show4 .1s linear forwards 2.9s
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(6) {
width:.7rem;
height:.7rem;
animation:show4 .1s linear forwards 3s
}
.main .main-left .lightning .lightning2 .jd2 ul li:nth-of-type(7) {
width:.74rem;
height:.74rem;
animation:show4 .1s linear forwards 3.1s
}
.main .main-left .lightning .lightning2 .jd2 .box1 {
width:.8rem;
height:40%;
background-color:#00e4c8;
margin-left:5%;
margin-top:20%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.2s
}
.main .main-left .lightning .lightning2 .jd2 .box2 {
width:.8rem;
height:60%;
background-color:#00e4c8;
margin-top:15%;
margin-left:5%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.3s
}
.main .main-left .top3 {
width:100%;
height:30%;
position:relative
}
.main .main-left .top3 ul {
width:60%;
height:100%;
position:absolute;
left:-50%;
top:0;
transform:translateX(-50%);
animation:animate1 1s linear forwards 7s
}
.main .main-left .top3 ul li {
float:left;
width:30%;
height:100%;
margin:0 1.5%
}
.main .main-left .top3 ul li:nth-of-type(1) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/1.png) no-repeat center bottom;
background-size:70%
}
.main .main-left .top3 ul li:nth-of-type(1) .title {
width:100%;
text-align:center;
color:#ff7a9a;
font-size:.8rem;
margin-top:-5%
}
.main .main-left .top3 ul li:nth-of-type(1) .content {
width:100%;
text-align:center;
color:#fff;
margin-top:10%
}
.main .main-left .top3 ul li:nth-of-type(1) .content p {
font-size:.3rem
}
.main .main-left .top3 ul li:nth-of-type(1) .content span {
font-size:.5rem;
display:block
}
.main .main-left .top3 ul li:nth-of-type(2) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/2.png) no-repeat center bottom;
background-size:70%
}
.main .main-left .top3 ul li:nth-of-type(2) .title {
width:100%;
text-align:center;
color:#01c793;
font-size:.8rem;
margin-top:20%
}
.main .main-left .top3 ul li:nth-of-type(2) .content {
width:100%;
text-align:center;
color:#fff;
margin-top:10%
}
.main .main-left .top3 ul li:nth-of-type(2) .content p {
font-size:.3rem
}
.main .main-left .top3 ul li:nth-of-type(2) .content span {
font-size:.5rem;
display:block
}
.main .main-left .top3 ul li:nth-of-type(3) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/3.png) no-repeat center bottom;
background-size:70%
}
.main .main-left .top3 ul li:nth-of-type(3) .title {
width:100%;
text-align:center;
color:#01c2aa;
font-size:.8rem;
margin-top:43%
}
.main .main-left .top3 ul li:nth-of-type(3) .content {
width:100%;
text-align:center;
color:#fff;
margin-top:10%
}
.main .main-left .top3 ul li:nth-of-type(3) .content p {
font-size:.3rem
}
.main .main-left .top3 ul li:nth-of-type(3) .content span {
font-size:.3rem;
display:block
}
.main .main-middle {
width:55%;
height:100%;
position:relative
}
.main .main-middle .external1 {
width:15%;
height:100%;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/border1.png) no-repeat left;
background-size:contain;
position:absolute;
left:40%;
top:0;
opacity:0;
animation:come1 .5s linear forwards 3.4s
}
.main .main-middle .external2 {
width:15%;
height:100%;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/border2.png) no-repeat right;
background-size:contain;
position:absolute;
right:40%;
top:0;
opacity:0;
animation:come2 .5s linear forwards 3.4s
}
.main .main-middle .external3 {
width:60%;
height:10%;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/border3.png) no-repeat center top;
background-size:contain;
position:absolute;
left:50%;
transform:translateX(-50%);
top:15%;
opacity:0;
animation:come3 .5s linear forwards 3.4s
}
.main .main-middle .external4 {
width:60%;
height:10%;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/border4.png) no-repeat center bottom;
background-size:contain;
position:absolute;
left:50%;
transform:translateX(-50%);
opacity:0;
bottom:10%;
animation:come4 .5s linear forwards 3.4s
}
.main .main-middle .jz1,.main .main-middle .jz2 {
opacity:0;
animation:show4 .1s linear forwards 3.8s
}
.main .main-middle .jz1 ul,.main .main-middle .jz2 ul {
width:30%;
height:38%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
overflow:hidden
}
.main .main-middle .jz1 ul li,.main .main-middle .jz2 ul li {
width:100%;
height:8%;
margin:40% 0;
background-color:#ff7a9a
}
.main .main-middle .jz1 {
width:4%;
height:100%;
background-color:red;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/jz.png) no-repeat center;
background-size:contain;
position:absolute;
left:5%;
top:0
}
.main .main-middle .jz2 {
width:4%;
height:100%;
background-color:red;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/jz.png) no-repeat center;
background-size:contain;
position:absolute;
right:5%;
top:0
}
.main .main-middle .inner1 {
width:10%;
height:100%;
position:absolute;
left:10%;
top:0;
opacity:0;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/leftBorder.png) no-repeat center;
background-size:100%;
animation:inner1 .3s linear forwards 3.9s
}
.main .main-middle .inner2 {
width:10%;
height:100%;
position:absolute;
right:10%;
top:0;
opacity:0;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/rightBorder.png) no-repeat center;
background-size:100%;
animation:inner2 .3s linear forwards 3.9s
}
.main .main-middle .arrow-l {
position:absolute;
width:10%;
height:20%;
left:15%;
top:40%;
opacity:0;
animation:arrow1 1.5s linear infinite 4s
}
.main .main-middle .arrow-l ol {
width:100%;
height:100%
}
.main .main-middle .arrow-l ol li {
width:33%;
height:100%;
float:left;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/yuan.png) no-repeat center;
background-size:60%
}
.main .main-middle .arrow-l ol li:nth-of-type(3) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/arrow-l.png) no-repeat center;
background-size:80%
}
.main .main-middle .arrow-r {
position:absolute;
width:10%;
height:20%;
right:15%;
top:40%;
opacity:0;
animation:arrow2 1.5s linear infinite 4s
}
.main .main-middle .arrow-r ol {
width:100%;
height:100%
}
.main .main-middle .arrow-r ol li {
width:33%;
height:100%;
float:right;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/yuan.png) no-repeat center;
background-size:60%
}
.main .main-middle .arrow-r ol li:nth-of-type(3) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/arrow-r.png) no-repeat center;
background-size:80%
}
.main .main-middle .meter {
width:50%;
height:60%;
background-color:rgba(255,255,255,0.2);
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/huan.png) no-repeat center;
background-size:100%;
position:absolute;
left:50%;
top:50%;
opacity:0;
transform:translate(-50%,-50%);
animation:meter 3s linear forwards 4.1s
}
.main .main-middle .animate {
width:70%;
height:70%;
z-index:-1;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
opacity:0;
animation:animate 1s linear forwards 6s
}
.main .main-middle .animate canvas {
transform-origin:0 0;
position:absolute;
left:0;
top:0;
border-radius:40%
}
.main .main-middle .sale {
width:16rem;
height:16rem;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/cicle.png) no-repeat center;
background-size:contain;
position:absolute;
left:50%;
top:50%;
margin-left:-8rem;
margin-top:-8rem;
opacity:0;
animation:sale 1s linear forwards 8s
}
.main .main-middle .sale p {
width:100%;
height:20%;
text-align:center;
color:#fff;
display:table;
font-size:1.7rem
}
.main .main-middle .sale p span {
display:table-cell;
vertical-align:middle
}
.main .main-middle .sale p:nth-of-type(1) {
margin-top:30%
}
.main .main-middle .sale p:nth-of-type(2) {
font-family:'液晶数字字体';
font-size:2rem
}
.main .main-right {
width:22.5%;
height:100%
}
.main .main-right .compare {
width:100%;
height:30%;
position:relative
}
.main .main-right .compare .compare-content {
width:7rem;
height:7rem;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/border02.png) no-repeat center;
background-size:contain;
position:absolute;
left:150%;
top:50%;
transform:translate(-50%,-50%);
animation:animate2 1s linear forwards 7s
}
.main .main-right .compare .compare-content .rate2 {
width:4rem;
height:4rem;
position:absolute;
left:27%;
top:51%;
transform:translateY(-50%);
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/cricle.png) no-repeat center;
background-size:contain;
animation:rotate1 5s ease infinite
}
.main .main-right .compare .compare-content .rate2 h5 {
text-align:center;
height:50%;
width:100%;
color:#fff;
display:table
}
.main .main-right .compare .compare-content .rate2 h5 span {
display:table-cell;
vertical-align:bottom;
font-size:.8rem
}
.main .main-right .compare .compare-content .rate2 p {
text-align:center;
height:50%;
width:100%;
color:#fff;
display:table
}
.main .main-right .compare .compare-content .rate2 p span {
display:table-cell;
vertical-align:middle
}
.main .main-right .lightning {
width:100%;
height:40%
}
.main .main-right .lightning .lightning3,.main .main-right .lightning .lightning4 {
width:100%;
height:50%
}
.main .main-right .lightning .lightning3>div {
float:left
}
.main .main-right .lightning .lightning3 .jd3 {
width:45%;
height:100%
}
.main .main-right .lightning .lightning3 .jd3>div {
float:right
}
.main .main-right .lightning .lightning3 .jd3 ul {
float:right;
margin-top:30%
}
.main .main-right .lightning .lightning3 .jd3 ul li {
float:right;
margin-left:.15rem;
background-color:#00e4c8;
border-radius:50%;
opacity:0
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(1) {
width:.5rem;
height:.5rem;
animation:show4 .1s linear forwards 2.5s
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(2) {
width:.54rem;
height:.54rem;
animation:show4 .1s linear forwards 2.6s
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(3) {
width:.58rem;
height:.58rem;
animation:show4 .1s linear forwards 2.7s
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(4) {
width:.62rem;
height:.62rem;
animation:show4 .1s linear forwards 2.8s
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(5) {
width:.66rem;
height:.66rem;
animation:show4 .1s linear forwards 2.9s
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(6) {
width:.7rem;
height:.7rem;
animation:show4 .1s linear forwards 3s
}
.main .main-right .lightning .lightning3 .jd3 ul li:nth-of-type(7) {
width:.74rem;
height:.74rem;
animation:show4 .1s linear forwards 3.1s
}
.main .main-right .lightning .lightning3 .jd3 .box1 {
width:.8rem;
height:40%;
background-color:#00e4c8;
margin-right:5%;
margin-top:20%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.2s
}
.main .main-right .lightning .lightning3 .jd3 .box2 {
width:.8rem;
height:60%;
background-color:#00e4c8;
margin-top:15%;
margin-right:5%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.3s
}
.main .main-right .lightning .lightning3 .sd3 {
width:55%;
height:100%
}
.main .main-right .lightning .lightning4>div {
float:left
}
.main .main-right .lightning .lightning4 .jd4 {
width:45%;
height:100%
}
.main .main-right .lightning .lightning4 .jd4>div {
float:right
}
.main .main-right .lightning .lightning4 .jd4 ul {
float:right;
margin-top:30%
}
.main .main-right .lightning .lightning4 .jd4 ul li {
float:right;
margin-left:.15rem;
background-color:#00e4c8;
border-radius:50%;
opacity:0
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(1) {
width:.5rem;
height:.5rem;
animation:show4 .1s linear forwards 2.5s
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(2) {
width:.54rem;
height:.54rem;
animation:show4 .1s linear forwards 2.6s
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(3) {
width:.58rem;
height:.58rem;
animation:show4 .1s linear forwards 2.7s
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(4) {
width:.62rem;
height:.62rem;
animation:show4 .1s linear forwards 2.8s
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(5) {
width:.66rem;
height:.66rem;
animation:show4 .1s linear forwards 2.9s
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(6) {
width:.7rem;
height:.7rem;
animation:show4 .1s linear forwards 3s
}
.main .main-right .lightning .lightning4 .jd4 ul li:nth-of-type(7) {
width:.74rem;
height:.74rem;
animation:show4 .1s linear forwards 3.1s
}
.main .main-right .lightning .lightning4 .jd4 .box1 {
width:.8rem;
height:40%;
background-color:#00e4c8;
margin-right:5%;
margin-top:20%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.2s
}
.main .main-right .lightning .lightning4 .jd4 .box2 {
width:.8rem;
height:60%;
background-color:#00e4c8;
margin-top:15%;
margin-right:5%;
border-radius:.8rem;
opacity:0;
animation:show4 .1s linear forwards 3.3s
}
.main .main-right .lightning .lightning4 .sd4 {
width:55%;
height:100%
}
.main .main-right .top6 {
width:100%;
height:30%;
position:relative
}
.main .main-right .top6 ul {
width:60%;
height:100%;
position:absolute;
left:150%;
top:0;
transform:translateX(-50%);
animation:animate2 1s linear forwards 7s
}
.main .main-right .top6 ul li {
float:left;
width:30%;
height:100%;
margin:0 1.5%
}
.main .main-right .top6 ul li:nth-of-type(1) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/4.png) no-repeat center bottom;
background-size:70%
}
.main .main-right .top6 ul li:nth-of-type(1) .title {
width:100%;
text-align:center;
color:#cab636;
font-size:.8rem;
margin-top:60%
}
.main .main-right .top6 ul li:nth-of-type(1) .content {
width:100%;
text-align:center;
color:#fff;
margin-top:10%
}
.main .main-right .top6 ul li:nth-of-type(1) .content p {
font-size:.3rem
}
.main .main-right .top6 ul li:nth-of-type(1) .content span {
font-size:.5rem;
display:block
}
.main .main-right .top6 ul li:nth-of-type(2) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/5.png) no-repeat center bottom;
background-size:70%
}
.main .main-right .top6 ul li:nth-of-type(2) .title {
width:100%;
text-align:center;
color:#028e4f;
font-size:.8rem;
margin-top:78%
}
.main .main-right .top6 ul li:nth-of-type(2) .content {
width:100%;
text-align:center;
color:#fff;
margin-top:10%
}
.main .main-right .top6 ul li:nth-of-type(2) .content p {
font-size:.3rem
}
.main .main-right .top6 ul li:nth-of-type(2) .content span {
font-size:.5rem;
display:block
}
.main .main-right .top6 ul li:nth-of-type(3) {
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/6.png) no-repeat center bottom;
background-size:70%
}
.main .main-right .top6 ul li:nth-of-type(3) .title {
width:100%;
text-align:center;
color:#01a893;
font-size:.8rem;
margin-top:95%
}
.main .main-right .top6 ul li:nth-of-type(3) .content {
width:100%;
text-align:center;
color:#fff;
margin-top:10%
}
.main .main-right .top6 ul li:nth-of-type(3) .content p {
font-size:.3rem
}
.main .main-right .top6 ul li:nth-of-type(3) .content span {
font-size:.3rem;
display:block
}
.bottom {
width:100%;
height:30%;
position:relative;
overflow:hidden
}
.bottom .ul-box {
width:200%;
height:100%;
position:relative;
animation:move 10s linear infinite 12s
}
.bottom .ul-box ul {
float:left;
width:50%;
height:100%
}
.bottom .ul-box ul li {
width:30%;
height:100%;
margin:0 1.5%;
background:url(//repo.bfw.wiki/bfwrepo/images/bigdata/2/di.png) no-repeat center bottom;
background-size:50%;
float:left
}
.bottom .ul-box ul li .li-content {
opacity:0;
position:relative;
width:100%;
height:60%;
background:url(//repo.bf.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0