<!--
|
描述: 司南排名图
|
作者: Jack Chen
|
日期: 2020-04-18
|
-->
|
|
<template>
|
<div class="wrap-container sn-container">
|
<div class="sn-content">
|
<div class="sn-title">司南排名图</div>
|
<div class="sn-body">
|
<div class="wrap-container">
|
<div class="pd-main">
|
<div id="chart1" class="chart-1">
|
<div class="compass">
|
<div class="compass-bg-1"></div>
|
<div class="compass-bg-2"></div>
|
<div class="compass-bg-3"></div>
|
<div class="compass-bg-4"></div>
|
<div class="compass-bg-5"></div>
|
<div class="compass-bg-6"></div>
|
<div class="compass-bg-7"></div>
|
|
<div class="compass-bg-c-1"></div>
|
<div class="compass-bg-c-2"></div>
|
<div class="compass-bg-c-3"></div>
|
<div class="compass-bg-c-4"></div>
|
|
<div class="compass-text" :class="[`compass-text-${index + 1}`, {show: number == index}]" v-for="(item, index) in arr" :key="index">
|
<span>事项数：{{ item.itemNum }}</span>
|
<span>数据项：{{ item.dataItem }}</span>
|
<span>数据量：{{ item.dataSize }}</span>
|
</div>
|
<div class="compass-number">
|
<div :title="`${index + 1}`" :class="[`rank-${index + 1}`, {szscale: number == index}]" v-for="(item, index) in arr" :key="index">
|
<span>{{ item.workUnit }}</span>
|
</div>
|
</div>
|
|
<div class="line-sx">
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
<div class="line-fs"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "sinan",
|
data() {
|
return {
|
timer: null,
|
number: null,
|
arr: [{
|
id: 1,
|
itemNum: 258,
|
dataItem: 1288,
|
dataSize: 12306,
|
workUnit: 'JS'
|
},{
|
id: 2,
|
itemNum: 568,
|
dataItem: 5623,
|
dataSize: 12306,
|
workUnit: 'Nodejs'
|
},{
|
id: 3,
|
itemNum: 208,
|
dataItem: 1755,
|
dataSize: 12043,
|
workUnit: 'Vuejs'
|
},{
|
id: 4,
|
itemNum: 358,
|
dataItem: 1812,
|
dataSize: 12306,
|
workUnit: 'CSS3'
|
},{
|
id: 5,
|
itemNum: 128,
|
dataItem: 4718,
|
dataSize: 12580,
|
workUnit: 'jQuery'
|
}]
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.number = 0;
|
this.initData();
|
}, 4000)
|
},
|
methods: {
|
initData() {
|
this.number = this.number == this.arr.length ? 0 : this.number;
|
this.timer = setTimeout(() => {
|
this.number++;
|
this.initData();
|
}, 5000)
|
}
|
},
|
beforeDestroy() {
|
clearTimeout(this.timer);
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.sn-container {
|
left: 50px;
|
top: 110px;
|
.pd-main {
|
position: absolute;
|
height: 100%;
|
width: 100%;
|
[class^=chart] {
|
position: absolute;
|
-webkit-transform-origin: left top;
|
-moz-transform-origin: left top;
|
-ms-transform-origin: left top;
|
-o-transform-origin: left top;
|
transform-origin: left top;
|
}
|
.chart-1 {
|
width: 500px;
|
height: 410px;
|
top:55%;
|
left:50%;
|
-webkit-transform:translate(-50%,-50%);
|
-moz-transform:translate(-50%,-50%);
|
-ms-transform:translate(-50%,-50%);
|
-o-transform:translate(-50%,-50%);
|
transform:translate(-50%,-50%);
|
}
|
|
.compass {
|
width: 100%;
|
height: 100%;
|
-webkit-transform: scale(0.9);
|
-moz-transform: scale(0.9);
|
-ms-transform: scale(0.9);
|
-o-transform: scale(0.9);
|
transform: scale(0.9);
|
[class^=compass-bg-] {
|
position: absolute;
|
bottom: 0;
|
}
|
|
%compass-bg {
|
position: absolute;
|
bottom: 0px;
|
left: 50%;
|
-webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
|
-moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
|
transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
|
}
|
.compass-bg-1 {
|
@extend %compass-bg;
|
margin-left: -250px;
|
bottom: -200px;
|
width: 500px;
|
height: 500px;
|
background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
|
background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
|
background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
|
background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
|
display: none;
|
}
|
.compass-bg-2 {
|
@extend %compass-bg;
|
margin-left: -220px;
|
bottom: -170px;
|
width: 440px;
|
height: 440px;
|
background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
|
background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
|
background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
|
background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
|
display: none;
|
}
|
.compass-bg-3 {
|
@extend %compass-bg;
|
margin-left: -190px;
|
bottom: -140px;
|
width: 380px;
|
height: 380px;
|
background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
|
background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
|
background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
|
background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
|
}
|
.compass-bg-4 {
|
@extend %compass-bg;
|
margin-left: -160px;
|
bottom: -110px;
|
width: 320px;
|
height: 320px;
|
background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
|
background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
|
background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
|
background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
|
}
|
.compass-bg-5 {
|
@extend %compass-bg;
|
margin-left: -130px;
|
bottom: -80px;
|
width: 260px;
|
height: 260px;
|
-webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
|
-moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
|
box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
|
}
|
.compass-bg-6 {
|
@extend %compass-bg;
|
margin-left: -100px;
|
bottom: -50px;
|
width: 200px;
|
height: 200px;
|
background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
|
background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
|
background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
|
background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
|
display: none;
|
}
|
.compass-bg-7 {
|
@extend %compass-bg;
|
margin-left: -70px;
|
bottom: -20px;
|
width: 140px;
|
height: 140px;
|
background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
|
background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
|
background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
|
background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
|
-webkit-animation: bgshadow 3s linear infinite;
|
-moz-animation: bgshadow 3s linear infinite;
|
-o-animation: bgshadow 3s linear infinite;
|
animation: bgshadow 3s linear infinite;
|
}
|
|
.compass-bg-c-1 {
|
width: 100%;
|
height: 100%;
|
background: url(../../assets/img/chart1/compass-bg-1.png) no-repeat 50% 345px;
|
}
|
.compass-bg-c-2 {
|
width: 100%;
|
height: 100%;
|
background: url(../../assets/img/chart1/compass-bg-2.png) no-repeat 65% 146px;
|
opacity: 0.8;
|
-webkit-animation: fadebg 3s linear infinite;
|
-moz-animation: fadebg 3s linear infinite;
|
-o-animation: fadebg 3s linear infinite;
|
animation: fadebg 3s linear infinite;
|
}
|
.compass-bg-c-3 {
|
width: 100%;
|
height: 100%;
|
background: url(../../assets/img/chart1/compass-bg-3.png) no-repeat 50% 227px;
|
}
|
.compass-bg-c-4 {
|
width: 100%;
|
height: 100%;
|
background: url(../../assets/img/chart1/compass-bg-4.png) no-repeat 50% 63px;
|
-webkit-animation: numberfade 5s linear infinite;
|
-moz-animation: numberfade 5s linear infinite;
|
-o-animation: numberfade 5s linear infinite;
|
animation: numberfade 5s linear infinite;
|
}
|
|
.compass-text {
|
position: absolute;
|
overflow: hidden;
|
left: 50%;
|
margin-left: -60px;
|
font-size: 12px;
|
background-color: rgba(0, 71, 157, 0.4);
|
padding: 5px 10px;
|
color: #00c2ff;
|
-webkit-border-radius: 6px;
|
-moz-border-radius: 6px;
|
border-radius: 6px;
|
line-height: 1.5;
|
/*-webkit-transform: scale(0.8);
|
-moz-transform: scale(0.8);
|
-ms-transform: scale(0.8);
|
-o-transform: scale(0.8);
|
transform: scale(0.8);*/
|
display: none;
|
&.compass-text-1 {
|
top: -77px;
|
left: 48px;
|
}
|
&.compass-text-2 {
|
top: -35px;
|
left: 152px;
|
}
|
&.compass-text-3 {
|
top: 5px;
|
left: 250px;
|
}
|
&.compass-text-4 {
|
top: 49px;
|
left: 350px;
|
}
|
&.compass-text-5 {
|
top: 88px;
|
left: 450px;
|
}
|
&.compass-text-6 {
|
color: #d57a31;
|
bottom: -945px;
|
-webkit-animation-delay: 25s;
|
-moz-animation-delay: 25s;
|
-o-animation-delay: 25s;
|
animation-delay: 25s;
|
}
|
&.compass-text-7 {
|
color: #d57a31;
|
bottom: -1150px;
|
-webkit-animation-delay: 30s;
|
-moz-animation-delay: 30s;
|
-o-animation-delay: 30s;
|
animation-delay: 30s;
|
}
|
%span-nth-child {
|
margin-top: 0px;
|
}
|
span {
|
display: block;
|
&:nth-child(1) {
|
@extend %span-nth-child;
|
}
|
&:nth-child(2) {
|
@extend %span-nth-child;
|
}
|
&:nth-child(3) {
|
@extend %span-nth-child;
|
}
|
}
|
&.show {
|
display: block;
|
}
|
}
|
|
.compass-number {
|
position: absolute;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
bottom: 50px;
|
> .szscale {
|
-webkit-transform: scale(1.2);
|
-moz-transform: scale(1.2);
|
-ms-transform: scale(1.2);
|
-o-transform: scale(1.2);
|
transform: scale(1.2);
|
-webkit-transform-origin: center bottom;
|
-moz-transform-origin: center bottom;
|
-ms-transform-origin: center bottom;
|
-o-transform-origin: center bottom;
|
transform-origin: center bottom;
|
}
|
> div {
|
position: absolute;
|
bottom: 0;
|
width: 55px;
|
height: 0;
|
-webkit-animation: sz 1s linear;
|
-moz-animation: sz 1s linear;
|
-o-animation: sz 1s linear;
|
animation: sz 1s linear;
|
-webkit-animation-fill-mode: forwards;
|
-moz-animation-fill-mode: forwards;
|
-o-animation-fill-mode: forwards;
|
animation-fill-mode: forwards;
|
-webkit-transition: 1s;
|
-o-transition: 1s;
|
-moz-transition: 1s;
|
transition: 1s;
|
&:nth-child(1) {
|
left: 5%;
|
color: #ff9232;
|
-webkit-animation-delay: 0s;
|
-moz-animation-delay: 0s;
|
-o-animation-delay: 0s;
|
animation-delay: 0s;
|
&:after {
|
-webkit-animation-delay: 0s;
|
-moz-animation-delay: 0s;
|
-o-animation-delay: 0s;
|
animation-delay: 0s;
|
}
|
}
|
&:nth-child(2) {
|
left: 25%;
|
color: #d5c245;
|
-webkit-animation-delay: 0.2s;
|
-moz-animation-delay: 0.2s;
|
-o-animation-delay: 0.2s;
|
animation-delay: 0.2s;
|
bottom: -10%;
|
&:after {
|
-webkit-animation-delay: 2.85s;
|
-moz-animation-delay: 2.85s;
|
-o-animation-delay: 2.85s;
|
animation-delay: 2.85s;
|
}
|
}
|
&:nth-child(3) {
|
left: 45%;
|
color: #01a455;
|
-webkit-animation-delay: 0.4s;
|
-moz-animation-delay: 0.4s;
|
-o-animation-delay: 0.4s;
|
animation-delay: 0.4s;
|
bottom: -20%;
|
&:after {
|
-webkit-animation-delay: 5.7s;
|
-moz-animation-delay: 5.7s;
|
-o-animation-delay: 5.7s;
|
animation-delay: 5.7s;
|
}
|
}
|
&:nth-child(4) {
|
left: 65%;
|
color: #85adfb;
|
-webkit-animation-delay: 0.6s;
|
-moz-animation-delay: 0.6s;
|
-o-animation-delay: 0.6s;
|
animation-delay: 0.6s;
|
bottom: -30%;
|
&:after {
|
-webkit-animation-delay: 8.55s;
|
-moz-animation-delay: 8.55s;
|
-o-animation-delay: 8.55s;
|
animation-delay: 8.55s;
|
}
|
}
|
&:nth-child(5) {
|
left: 85%;
|
color: #c36885;
|
-webkit-animation-delay: 0.8s;
|
-moz-animation-delay: 0.8s;
|
-o-animation-delay: 0.8s;
|
animation-delay: 0.8s;
|
bottom: -40%;
|
&:after {
|
-webkit-animation-delay: 11.4s;
|
-moz-animation-delay: 11.4s;
|
-o-animation-delay: 11.4s;
|
animation-delay: 11.4s;
|
}
|
}
|
&:nth-child(6) {
|
left: 75%;
|
color: #f674a0;
|
-webkit-animation-delay: 1s;
|
-moz-animation-delay: 1s;
|
-o-animation-delay: 1s;
|
animation-delay: 1s;
|
bottom: -50%;
|
&:after {
|
-webkit-animation-delay: 14.25s;
|
-moz-animation-delay: 14.25s;
|
-o-animation-delay: 14.25s;
|
animation-delay: 14.25s;
|
}
|
}
|
&:nth-child(7) {
|
left: 87.5%;
|
color: #275fcc;
|
-webkit-animation-delay: 1.2s;
|
-moz-animation-delay: 1.2s;
|
-o-animation-delay: 1.2s;
|
animation-delay: 1.2s;
|
bottom: -60%;
|
&:after {
|
-webkit-animation-delay: 17.1s;
|
-moz-animation-delay: 17.1s;
|
-o-animation-delay: 17.1s;
|
animation-delay: 17.1s;
|
}
|
}
|
|
span {
|
display: block;
|
width: 55px;
|
height: 55px;
|
line-height: 55px;
|
text-align: center;
|
/*padding-bottom: 55px;*/
|
-webkit-box-shadow: inset 0 0 15px currentColor;
|
-moz-box-shadow: inset 0 0 15px currentColor;
|
box-shadow: inset 0 0 15px currentColor;
|
-webkit-border-radius: 100%;
|
-moz-border-radius: 100%;
|
border-radius: 100%;
|
}
|
&:before {
|
content: "";
|
position: absolute;
|
height: 100%;
|
border-left: 1px dashed currentColor;
|
height: 500px;
|
top: 55px;
|
left: 50%;
|
margin-left: -1px;
|
}
|
&:after {
|
content: "NO." attr(title);
|
position: absolute;
|
display: inline-block;
|
top: -20px;
|
width: 100%;
|
font-family: "DIGITALDREAMFAT";
|
text-align: center;
|
}
|
}
|
}
|
|
.line-sx {
|
> div {
|
&:nth-child(2) {
|
height: 90%;
|
-webkit-animation-duration: 2s;
|
-moz-animation-duration: 2s;
|
-o-animation-duration: 2s;
|
animation-duration: 2s;
|
-webkit-animation-delay: 1.5s;
|
-moz-animation-delay: 1.5s;
|
-o-animation-delay: 1.5s;
|
animation-delay: 1.5s;
|
bottom: 0;
|
left: 51px;
|
}
|
&:nth-child(3) {
|
height: 100%;
|
-webkit-animation-duration: 3s;
|
-moz-animation-duration: 3s;
|
-o-animation-duration: 3s;
|
animation-duration: 3s;
|
-webkit-animation-delay: 0s;
|
-moz-animation-delay: 0s;
|
-o-animation-delay: 0s;
|
animation-delay: 0s;
|
bottom: 32px;
|
left: 89px;
|
}
|
&:nth-child(4) {
|
height: 100%;
|
-webkit-animation-duration: 2.5s;
|
-moz-animation-duration: 2.5s;
|
-o-animation-duration: 2.5s;
|
animation-duration: 2.5s;
|
-webkit-animation-delay: 1s;
|
-moz-animation-delay: 1s;
|
-o-animation-delay: 1s;
|
animation-delay: 1s;
|
bottom: 3px;
|
left: 179px;
|
-webkit-filter: hue-rotate(180deg);
|
filter: hue-rotate(180deg);
|
}
|
&:nth-child(5) {
|
height: 90%;
|
-webkit-animation-duration: 2s;
|
-moz-animation-duration: 2s;
|
-o-animation-duration: 2s;
|
animation-duration: 2s;
|
-webkit-animation-delay: 2s;
|
-moz-animation-delay: 2s;
|
-o-animation-delay: 2s;
|
animation-delay: 2s;
|
bottom: 42px;
|
left: 229px;
|
}
|
&:nth-child(6) {
|
height: 100%;
|
-webkit-animation-duration: 2.5s;
|
-moz-animation-duration: 2.5s;
|
-o-animation-duration: 2.5s;
|
animation-duration: 2.5s;
|
-webkit-animation-delay: 0.5s;
|
-moz-animation-delay: 0.5s;
|
-o-animation-delay: 0.5s;
|
animation-delay: 0.5s;
|
bottom: 11px;
|
right: 48px;
|
}
|
&:nth-child(7) {
|
height: 90%;
|
-webkit-animation-duration: 3s;
|
-moz-animation-duration: 3s;
|
-o-animation-duration: 3s;
|
animation-duration: 3s;
|
-webkit-animation-delay: 2.5s;
|
-moz-animation-delay: 2.5s;
|
-o-animation-delay: 2.5s;
|
animation-delay: 2.5s;
|
bottom: -22px;
|
right: 174px;
|
-webkit-filter: hue-rotate(180deg);
|
filter: hue-rotate(180deg);
|
}
|
&:nth-child(8) {
|
height: 90%;
|
-webkit-animation-duration: 3s;
|
-moz-animation-duration: 3s;
|
-o-animation-duration: 3s;
|
animation-duration: 3s;
|
-webkit-animation-delay: 1.5s;
|
-moz-animation-delay: 1.5s;
|
-o-animation-delay: 1.5s;
|
animation-delay: 1.5s;
|
bottom: -22px;
|
right: 100px;
|
}
|
&:nth-child(9) {
|
height: 100%;
|
-webkit-animation-duration: 2.5s;
|
-moz-animation-duration: 2.5s;
|
-o-animation-duration: 2.5s;
|
animation-duration: 2.5s;
|
-webkit-animation-delay: 2s;
|
-moz-animation-delay: 2s;
|
-o-animation-delay: 2s;
|
animation-delay: 2s;
|
bottom: -10px;
|
right: 220px;
|
}
|
&:nth-child(10) {
|
height: 95%;
|
-webkit-animation-duration: 2s;
|
-moz-animation-duration: 2s;
|
-o-animation-duration: 2s;
|
animation-duration: 2s;
|
-webkit-animation-delay: 1s;
|
-moz-animation-delay: 1s;
|
-o-animation-delay: 1s;
|
animation-delay: 1s;
|
bottom: -41px;
|
right: 182px;
|
}
|
}
|
.line-fs {
|
width: 14px;
|
height: 100%;
|
background: url(../../assets/img/chart1/line-fs.png) no-repeat;
|
background-position: 50% 150%;
|
position: absolute;
|
z-index: -1;
|
-webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
|
-moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
|
-o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
|
animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
|
}
|
}
|
|
}
|
|
}
|
}
|
|
|
@-webkit-keyframes fs {
|
0% {
|
background-position: 50% 150%;
|
}
|
50% {
|
background-position: 50% -132%;
|
}
|
100% {
|
background-position: 50% -264%;
|
opacity: 0;
|
}
|
}
|
@-moz-keyframes fs {
|
0% {
|
background-position: 50% 150%;
|
}
|
50% {
|
background-position: 50% -132%;
|
}
|
100% {
|
background-position: 50% -264%;
|
opacity: 0;
|
}
|
}
|
@-o-keyframes fs {
|
0% {
|
background-position: 50% 150%;
|
}
|
50% {
|
background-position: 50% -132%;
|
}
|
100% {
|
background-position: 50% -264%;
|
opacity: 0;
|
}
|
}
|
@keyframes fs {
|
0% {
|
background-position: 50% 150%;
|
}
|
50% {
|
background-position: 50% -132%;
|
}
|
100% {
|
background-position: 50% -264%;
|
opacity: 0;
|
}
|
}
|
|
@-webkit-keyframes bgshadow {
|
0%,100% {
|
-webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
}
|
50% {
|
-webkit-box-shadow: 0 0 30em white;
|
box-shadow: 0 0 30em white;
|
}
|
}
|
@-moz-keyframes bgshadow {
|
0%,100% {
|
-moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
}
|
50% {
|
-moz-box-shadow: 0 0 30em white;
|
box-shadow: 0 0 30em white;
|
}
|
}
|
@-o-keyframes bgshadow {
|
0%,100% {
|
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
}
|
50% {
|
box-shadow: 0 0 30em white;
|
}
|
}
|
@keyframes bgshadow {
|
0%,100% {
|
-webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
-moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
box-shadow: 0 0 0 rgba(255, 255, 255, 0);
|
}
|
50% {
|
-webkit-box-shadow: 0 0 30em white;
|
-moz-box-shadow: 0 0 30em white;
|
box-shadow: 0 0 30em white;
|
}
|
}
|
|
|
@-webkit-keyframes sz {
|
0% {
|
height: 0;
|
}
|
100% {
|
height: 70%;
|
}
|
}
|
@-moz-keyframes sz {
|
0% {
|
height: 0;
|
}
|
100% {
|
height: 70%;
|
}
|
}
|
@-o-keyframes sz {
|
0% {
|
height: 0;
|
}
|
100% {
|
height: 70%;
|
}
|
}
|
@keyframes sz {
|
0% {
|
height: 0;
|
}
|
100% {
|
height: 70%;
|
}
|
}
|
</style>
|
