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 @@
/* Safari, Android, iOS */
}
.stat-bar {
z-index: 2;
width: 98%;
margin: 0 auto;
margin: 20px auto;
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: -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 @@
margin-left: 10px;
}
.stat-bar .stat-item .scroll-num {
width: var(--width, 36px);
height: var(--height, 48px);
line-height: var(--height, 48px);
width: var(--width, 47px);
height: var(--height, 59px);
line-height: var(--height, 59px);
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: 'DigifaceWide';
border-radius: 3px;
background-image: -webkit-gradient(linear, left bottom, left top, from(#07256a), to(rgba(7, 37, 105, 0)));
background-image: -o-linear-gradient(bottom, #07256a 0%, rgba(7, 37, 105, 0) 100%);
background-image: linear-gradient(0deg, #07256a 0%, rgba(7, 37, 105, 0) 100%);
border: 1px solid #01fff6;
background: url('../images/digital-bg.png') no-repeat 0 0;
background-size: cover;
overflow: hidden;
margin-right: 4px;
}
......@@ -69,14 +66,15 @@
color: #758094;
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 {
-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;
}
.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 {
from {
-webkit-transform: translateY(-90%);
......
src/index.html
View file @ cde98600
......@@ -2,8 +2,8 @@
<head>
<title></title>
<link href="/css/index.css" rel="stylesheet" type="text/css" />
<link href="/css/stat-bar.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" />
</head>
<body>
......@@ -256,5 +256,5 @@
</body>
<script src="https://cdn.ucyber.cn/common/echarts.js"></script>
<script src="/js/index.js"></script>
<script src="./js/index.js"></script>
</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) {
// 创建单个数字
function createSrollNum(num, delay) {
const scrollNumNode = document.createElement('div')
scrollNumNode.className = 'scroll-num border-animate'
scrollNumNode.innerHTML = `<ul class="animate">
scrollNumNode.className = 'scroll-num'
scrollNumNode.innerHTML = `<ul class="scroll-ul">
<li>0</li>
<li>1</li>
<li>2</li>
......@@ -251,18 +251,24 @@ function createSrollNum(num, delay) {
scrollNumNode.style.setProperty('--delay', delay)
const ulNode = scrollNumNode.childNodes[0]
ulNode.classList.add('init')
return scrollNumNode
}
if (isSafari || isWeChat) {
let timer = setTimeout(() => {
ulNode.setAttribute(
'style',
'animation: none;transform: translateY(' + num * -9.09 + '%)'
)
timer = null
}, delay * 1000)
function addDigitAnimate() {
const scrollUl = document.getElementsByClassName('scroll-ul')
for (const ulNode of scrollUl) {
ulNode.classList.add('animate')
if (isSafari || isWeChat) {
let timer = setTimeout(() => {
ulNode.setAttribute(
'style',
'animation: none;transform: translateY(' + num * -9.09 + '%)'
)
timer = null
}, delay * 1000)
}
}
return scrollNumNode
}
window.onload = () => {
......@@ -382,12 +388,13 @@ window.onload = () => {
)
// 数据统计数字滚动
const width = 36
const height = 48
const width = 47
const height = 59
const delay = 1.4
const scrollBox = document.getElementsByClassName('scroll-box')
;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
createMultiSrollNum(scrollBox[i], numStr, width, height, delay)
})
// addDigitAnimate()
}
src/less/stat-bar.less
View file @ cde98600
......@@ -6,9 +6,8 @@
}
.stat-bar {
z-index: 2;
width: 98%;
margin: 0 auto;
margin: 20px auto;
height: 64px;
background-image: linear-gradient(
0deg,
......@@ -37,20 +36,16 @@
margin-left: 10px;
}
.scroll-num {
width: var(--width, 36px);
height: var(--height, 48px);
line-height: var(--height, 48px);
width: var(--width, 47px);
height: var(--height, 59px);
line-height: var(--height, 59px);
text-align: center;
font-size: 41px;
color: #01fff6;
font-family: 'DigifaceWide';
border-radius: 3px;
background-image: linear-gradient(
0deg,
#07256a 0%,
rgba(7, 37, 105, 0) 100%
);
border: 1px solid #01fff6;
background: url('../images/digital-bg.png') no-repeat 0 0;
background-size: cover;
overflow: hidden;
margin-right: 4px;
}
......@@ -61,14 +56,17 @@
}
}
.border-animate {
animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
// .border-animate {
// animation: enhance-bounce-in-down 1s calc(var(--delay) * 1s) forwards;
// }
.animate {
animation: move 1.6s linear infinite,
bounce-in-down 1s calc(var(--delay) * 1s) forwards;
}
.init {
transform: translateY(calc(var(--i) * -9.09%));
}
}
@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