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.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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