Skip to content

Z
zh_zcb-ems
Commit cde98600 authored by wu.hui's avatar wu.hui
Browse files
Options

feat: css

parent af9a09f9
Hide whitespace changes
Inline Side-by-side
Showing with 47 additions and 44 deletions
src/css/stat-bar.css
View file @ cde98600
...@@ -4,9 +4,8 @@ ...@@ -4,9 +4,8 @@
/* Safari, Android, iOS */ /* Safari, Android, iOS */
} }
.stat-bar { .stat-bar {
z-index: 2;
width: 98%; width: 98%;
margin: 0 auto; margin: 20px auto;
height: 64px; height: 64px;
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 79, 253, 0.2)), color-stop(70%, rgba(12, 80, 252, 0)), to(rgba(12, 80, 252, 0))); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(11, 79, 253, 0.2)), color-stop(70%, rgba(12, 80, 252, 0)), to(rgba(12, 80, 252, 0)));
background-image: -o-linear-gradient(bottom, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%); background-image: -o-linear-gradient(bottom, rgba(11, 79, 253, 0.2) 0%, rgba(12, 80, 252, 0) 70%, rgba(12, 80, 252, 0) 100%);
...@@ -49,18 +48,16 @@ ...@@ -49,18 +48,16 @@
margin-left: 10px; margin-left: 10px;
} }
.stat-bar .stat-item .scroll-num { .stat-bar .stat-item .scroll-num {
width: var(--width, 36px); width: var(--width, 47px);
height: var(--height, 48px); height: var(--height, 59px);
line-height: var(--height, 48px); line-height: var(--height, 59px);
text-align: center; text-align: center;
font-size: 41px; font-size: 41px;
color: #01fff6; color: #01fff6;
font-family: 'DigifaceWide'; font-family: 'DigifaceWide';
border-radius: 3px; border-radius: 3px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#07256a), to(rgba(7, 37, 105, 0))); background: url('../images/digital-bg.png') no-repeat 0 0;
background-image: -o-linear-gradient(bottom, #07256a 0%, rgba(7, 37, 105, 0) 100%); background-size: cover;
background-image: linear-gradient(0deg, #07256a 0%, rgba(7, 37, 105, 0) 100%);
border: 1px solid #01fff6;
overflow: hidden; overflow: hidden;
margin-right: 4px; margin-right: 4px;
} }
...@@ -69,14 +66,15 @@ ...@@ -69,14 +66,15 @@
color: #758094; color: #758094;
font-family: 'Source Han Sans CN'; font-family: 'Source Han Sans CN';
} }
.stat-bar .border-animate {
-webkit-animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
.stat-bar .animate { .stat-bar .animate {
-webkit-animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards; -webkit-animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards; animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
} }
.stat-bar .init {
-webkit-transform: translateY(calc(var(--i) * -9.09%));
-ms-transform: translateY(calc(var(--i) * -9.09%));
transform: translateY(calc(var(--i) * -9.09%));
}
@-webkit-keyframes move { @-webkit-keyframes move {
from { from {
-webkit-transform: translateY(-90%); -webkit-transform: translateY(-90%);
......
src/index.html
View file @ cde98600
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
<head> <head>
<title></title> <title></title>
<link href="/css/index.css" rel="stylesheet" type="text/css" /> <link href="./css/index.css" rel="stylesheet" type="text/css" />
<link href="/css/stat-bar.css" rel="stylesheet" type="text/css" /> <link href="./css/stat-bar.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
...@@ -256,5 +256,5 @@ ...@@ -256,5 +256,5 @@
</body> </body>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script> <script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="/js/index.js"></script> <script src="./js/index.js"></script>
</html> </html>
\ No newline at end of file
src/js/index.js
View file @ cde98600
...@@ -232,8 +232,8 @@ function createMultiSrollNum(box, numString, width, height, delay) { ...@@ -232,8 +232,8 @@ function createMultiSrollNum(box, numString, width, height, delay) {
// 创建单个数字 // 创建单个数字
function createSrollNum(num, delay) { function createSrollNum(num, delay) {
const scrollNumNode = document.createElement('div') const scrollNumNode = document.createElement('div')
scrollNumNode.className = 'scroll-num border-animate' scrollNumNode.className = 'scroll-num'
scrollNumNode.innerHTML = `<ul class="animate"> scrollNumNode.innerHTML = `<ul class="scroll-ul">
<li>0</li> <li>0</li>
<li>1</li> <li>1</li>
<li>2</li> <li>2</li>
...@@ -251,18 +251,24 @@ function createSrollNum(num, delay) { ...@@ -251,18 +251,24 @@ function createSrollNum(num, delay) {
scrollNumNode.style.setProperty('--delay', delay) scrollNumNode.style.setProperty('--delay', delay)
const ulNode = scrollNumNode.childNodes[0] const ulNode = scrollNumNode.childNodes[0]
ulNode.classList.add('init')
return scrollNumNode
}
if (isSafari || isWeChat) { function addDigitAnimate() {
let timer = setTimeout(() => { const scrollUl = document.getElementsByClassName('scroll-ul')
ulNode.setAttribute( for (const ulNode of scrollUl) {
'style', ulNode.classList.add('animate')
'animation: none;transform: translateY(' + num * -9.09 + '%)' if (isSafari || isWeChat) {
) let timer = setTimeout(() => {
timer = null ulNode.setAttribute(
}, delay * 1000) 'style',
'animation: none;transform: translateY(' + num * -9.09 + '%)'
)
timer = null
}, delay * 1000)
}
} }
return scrollNumNode
} }
window.onload = () => { window.onload = () => {
...@@ -382,12 +388,13 @@ window.onload = () => { ...@@ -382,12 +388,13 @@ window.onload = () => {
) )
// 数据统计数字滚动 // 数据统计数字滚动
const width = 36 const width = 47
const height = 48 const height = 59
const delay = 1.4 const delay = 1.4
const scrollBox = document.getElementsByClassName('scroll-box') const scrollBox = document.getElementsByClassName('scroll-box')
;['35345', '83460', '36765', '36465'].forEach((numStr, i) => { ;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
createMultiSrollNum(scrollBox[i], numStr, width, height, delay) createMultiSrollNum(scrollBox[i], numStr, width, height, delay)
}) })
// addDigitAnimate()
} }
src/less/stat-bar.less
View file @ cde98600
...@@ -6,9 +6,8 @@ ...@@ -6,9 +6,8 @@
} }
.stat-bar { .stat-bar {
z-index: 2;
width: 98%; width: 98%;
margin: 0 auto; margin: 20px auto;
height: 64px; height: 64px;
background-image: linear-gradient( background-image: linear-gradient(
0deg, 0deg,
...@@ -37,20 +36,16 @@ ...@@ -37,20 +36,16 @@
margin-left: 10px; margin-left: 10px;
} }
.scroll-num { .scroll-num {
width: var(--width, 36px); width: var(--width, 47px);
height: var(--height, 48px); height: var(--height, 59px);
line-height: var(--height, 48px); line-height: var(--height, 59px);
text-align: center; text-align: center;
font-size: 41px; font-size: 41px;
color: #01fff6; color: #01fff6;
font-family: 'DigifaceWide'; font-family: 'DigifaceWide';
border-radius: 3px; border-radius: 3px;
background-image: linear-gradient( background: url('../images/digital-bg.png') no-repeat 0 0;
0deg, background-size: cover;
#07256a 0%,
rgba(7, 37, 105, 0) 100%
);
border: 1px solid #01fff6;
overflow: hidden; overflow: hidden;
margin-right: 4px; margin-right: 4px;
} }
...@@ -61,14 +56,17 @@ ...@@ -61,14 +56,17 @@
} }
} }
.border-animate { // .border-animate {
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards; // animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
} // }
.animate { .animate {
animation: move 1.6s linear infinite, animation: move 1.6s linear infinite,
bounce-in-down 1s calc(var(--delay) * 1s) forwards; bounce-in-down 1s calc(var(--delay) * 1s) forwards;
} }
.init {
transform: translateY(calc(var(--i) * -9.09%));
}
} }
@keyframes move { @keyframes move {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment