LargeScreenVisualization/viewdata-master/新增75套源码/12/3/css/style.css

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  overflow: hidden;
  height: 100%;
}
body {
  background: url(../images/bg.png) no-repeat;
  background-size: 100%;
}
ul,
li {
  list-style: none;
}
@font-face {
  font-family: '汉仪铸字超然体';
  src: url('../fonts/汉仪铸字超然体.TTF');
}
.header {
  width: 100%;
  height: 10%;
}
.header .title {
  float: left;
  width: 35%;
  height: 100%;
  text-align: center;
  font-size: 1.5rem;
  display: table;
  font-family: '汉仪铸字超然体';
  letter-spacing: 0.2rem;
  background-image: -webkit-linear-gradient(bottom, #3aa4ff, #e6e5e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header .title span {
  display: table-cell;
  vertical-align: middle;
}
.header .time {
  width: 25%;
  float: left;
  height: 80%;
  text-align: center;
  background-image: -webkit-linear-gradient(bottom, #3aa4ff, #e6e5e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  display: table;
  font-family: '汉仪铸字超然体';
}
.header .time span {
  display: table-cell;
  vertical-align: middle;
}
.header .company {
  width: 15%;
  height: 100%;
  margin-right: 5%;
  background-color: rgba(255, 255, 255, 0.4);
  float: right;
  text-align: center;
  background-image: -webkit-linear-gradient(bottom, #3aa4ff, #e6e5e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.5rem;
  display: table;
  font-family: '汉仪铸字超然体';
}
.header .company span {
  display: table-cell;
  vertical-align: middle;
}
.main {
  width: 100%;
  height: 85%;
  margin-top: 5%;
  padding: 0 4%;
  box-sizing: border-box;
}
.main > div {
  float: left;
}
.main .animate {
  width: 75%;
  height: 100%;
}
.main .animate .float {
  width: 100%;
  height: 40%;
}
.main .animate .float > div {
  float: left;
}
.main .animate .float .floating1 {
  width: 15%;
  height: 75%;
  background: url(../images/5.png) no-repeat bottom center;
  background-size: 90%;
  animation: float 8s linear infinite;
}
.main .animate .float .floating1 #roate1 {
  width: 100%;
  height: 50%;
  background: url(../images/cicle5.png) no-repeat center;
  background-size: 80%;
  position: relative;
}
.main .animate .float .floating1 #roate1 .roate-item {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  background: url(../images/yuan2-01.png) no-repeat center;
  background-size: 100%;
  transform: translate(-180%, -70%);
  text-align: center;
  padding-top: 25%;
  box-sizing: border-box;
  color: #fff;
}
.main .animate .float .floating1 .pm {
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
}
.main .animate .float .floating2 {
  width: 15%;
  height: 75%;
  margin-top: 10%;
  background: url(../images/3.png) no-repeat bottom center;
  background-size: 90%;
  margin-left: 2%;
  animation: float2 6s linear infinite;
}
.main .animate .float .floating2 #roate2 {
  width: 100%;
  height: 50%;
  background: url(../images/cicle2.png) no-repeat center;
  background-size: 80%;
  position: relative;
}
.main .animate .float .floating2 #roate2 .roate-item2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  background: url(../images/yuan4-01.png) no-repeat center;
  background-size: 100%;
  transform: translate(-180%, -70%);
  text-align: center;
  padding-top: 25%;
  box-sizing: border-box;
  color: #fff;
}
.main .animate .float .floating2 .pm2 {
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
}
.main .animate .float .floating3 {
  width: 15%;
  height: 75%;
  margin-top: 5%;
  background: url(../images/4.png) no-repeat bottom center;
  background-size: 90%;
  margin-left: 2%;
  animation: float3 8s linear infinite;
}
.main .animate .float .floating3 #roate3 {
  width: 100%;
  height: 50%;
  background: url(../images/cicle3.png) no-repeat center;
  background-size: 80%;
  position: relative;
}
.main .animate .float .floating3 #roate3 .roate-item3 {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  background: url(../images/yuan3-01.png) no-repeat center;
  background-size: 100%;
  transform: translate(-180%, -70%);
  text-align: center;
  padding-top: 25%;
  box-sizing: border-box;
  color: #fff;
}
.main .animate .float .floating3 .pm3 {
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
}
.main .animate .float .floating4 {
  width: 15%;
  height: 75%;
  background: url(../images/4.png) no-repeat bottom center;
  background-size: 90%;
  margin-left: 2%;
  animation: float4 8s linear infinite;
}
.main .animate .float .floating4 #roate4 {
  width: 100%;
  height: 50%;
  background: url(../images/cicle3.png) no-repeat center;
  background-size: 80%;
  position: relative;
}
.main .animate .float .floating4 #roate4 .roate-item4 {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  background: url(../images/yuan2-01.png) no-repeat center;
  background-size: 100%;
  transform: translate(-180%, -70%);
  text-align: center;
  padding-top: 25%;
  box-sizing: border-box;
  color: #fff;
}
.main .animate .float .floating4 .pm4 {
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
}
.main .animate .float .floating5 {
  width: 20%;
  height: 75%;
  background: url(../images/5.png) no-repeat bottom center;
  background-size: 85%;
  margin-left: 5%;
  margin-top: 15%;
  animation: float5 6s linear infinite;
}
.main .animate .float .floating5 #roate5 {
  width: 90%;
  height: 30%;
  background: url(../images/cicle1.png) no-repeat center;
  background-size: 80%;
  position: relative;
}
.main .animate .float .floating5 #roate5 .roate-item5 {
  position: absolute;
  left: 0;
  top: 0;
  width: 5rem;
  height: 5rem;
  background: url(../images/yuan1-01.png) no-repeat center;
  background-size: 100%;
  transform: translate(-180%, -50%);
  text-align: center;
  padding-top: 20%;
  box-sizing: border-box;
  color: #fff;
}
.main .animate .float .floating5 .pm5 {
  text-align: center;
  color: #fff;
  font-size: 0.8rem;
  margin-top: 11%;
}
.main .animate .sum {
  position: relative;
  width: 100%;
  height: 50%;
  background: url(../images/big.png) no-repeat center;
  background-size: 80%;
}
.main .animate .sum .data {
  width: 100%;
  height: 20%;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  color: #fff;
}
.main .animate .sum .data span {
  font-family: '汉仪铸字超然体';
  font-size: 1.2rem;
}
.main .animate .sum .cicle1 {
  transform-style: preserve-3d;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12rem 0 0 -15rem;
  width: 30rem;
  height: 30rem;
  background: url(../images/circle.png) no-repeat center;
  background-size: contain;
  transform: rotateX(70deg);
  animation: circle 5s linear infinite;
}
.main .animate .sum #canvas1 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.main .animate .sum #canvas2 {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.main .animate .sum .data1,
.main .animate .sum .data2,
.main .animate .sum .data3,
.main .animate .sum .data4 {
  color: #fff;
  text-align: center;
  position: absolute;
  width: 8rem;
  height: 8rem;
  background: url(../images/di.png) no-repeat bottom center;
  background-size: contain;
  padding-top: 2%;
  box-sizing: border-box;
}
.main .animate .sum .data1 .qiu,
.main .animate .sum .data2 .qiu,
.main .animate .sum .data3 .qiu,
.main .animate .sum .data4 .qiu {
  position: relative;
  width: 4rem;
  height: 4rem;
  margin: auto;
  display: table;
}
.main .animate .sum .data1 .qiu p,
.main .animate .sum .data2 .qiu p,
.main .animate .sum .data3 .qiu p,
.main .animate .sum .data4 .qiu p {
  display: table-cell;
  vertical-align: middle;
}
.main .animate .sum .data1 .qiu::before,
.main .animate .sum .data2 .qiu::before,
.main .animate .sum .data3 .qiu::before,
.main .animate .sum .data4 .qiu::before {
  content: '';
  display: block;
  width: 4rem;
  height: 4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.5);
  animation: scale 2s linear infinite;
}
.main .animate .sum .data1 span,
.main .animate .sum .data2 span,
.main .animate .sum .data3 span,
.main .animate .sum .data4 span {
  font-size: 0.8rem;
}
.main .animate .sum .data1 {
  left: 0%;
  top: 10%;
}
.main .animate .sum .data1 .qiu {
  background: url(../images/cicle04.png) no-repeat center;
  background-size: 100%;
}
.main .animate .sum .data2 {
  right: 5%;
  top: 8%;
}
.main .animate .sum .data2 .qiu {
  background: url(../images/cicle02.png) no-repeat center;
  background-size: 100%;
}
.main .animate .sum .data3 {
  left: 0;
  bottom: 3%;
}
.main .animate .sum .data3 .qiu {
  background: url(../images/cicle03.png) no-repeat center;
  background-size: 100%;
}
.main .animate .sum .data4 {
  right: 6%;
  bottom: 3%;
}
.main .animate .sum .data4 .qiu {
  background: url(../images/cicle01.png) no-repeat center;
  background-size: 100%;
}
.main .charts {
  width: 25%;
  height: 100%;
}
.main .charts > div {
  width: 100%;
  height: 50%;
}
.main .charts > div .charts-title {
  width: 100%;
  height: 10%;
  background: url(../images/title.png) no-repeat;
  display: table;
  padding-left: 5%;
  color: #eee;
  font-weight: 500;
}
.main .charts > div .charts-title span {
  display: table-cell;
  vertical-align: middle;
}
.main .charts > div .content {
  width: 100%;
  height: 80%;
}
.main .charts > div .content table {
  width: 100%;
  margin-top: 5%;
  height: 80%;
  color: #fff;
  text-align: center;
}
.main .charts > div .content table thead {
  font-size: 0.8rem;
}
.main .charts > div .content table tbody {
  font-size: 0.6rem;
}
.main .charts > div .content table tbody tr {
  height: 10%;
}
.main .charts > div .content table tbody tr td span {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  vertical-align: bottom;
}
@keyframes float {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes float2 {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes float3 {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes float4 {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes float5 {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(-60%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes circle {
  0% {
    transform: rotateX(70deg) rotateZ(0);
  }
  100% {
    transform: rotateX(70deg) rotateZ(360deg);
  }
}
@keyframes scale {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}