CSS计数器
Posted wosperry
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS计数器相关的知识，希望对你有一定的参考价值。
抄自B站Up主CodingStartup起码课
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="number-input">
<button @click="subtract">-</button>
<span :class="{before:isBefore, after:isAfter}" :data-before="countBefore"
:data-after="countAfter">{{count}}</span>
<button @click="add">+</button>
</div>
</body>
</html>
<script>
new Vue({
el: \'#number-input\',
data: {
count: 6,
isBefore: false,
isAfter: false,
},
computed: {
countBefore: function () { return this.count - 1; },
countAfter: function () { return this.count + 1; }
},
methods: {
add() {
if (!this.isAfter) {
this.isAfter = true;
setTimeout(() => {
this.count ++;
this.isAfter = false;
}, 200);
}
},
subtract() {
if (!this.isBefore) {
this.isBefore = true;
setTimeout(() => {
this.count--;
this.isBefore = false;
}, 200);
}
},
}
});
</script>
<style>
:root {
font-size: 100px;
font-size: 700;
font-family: \'Microsoft YaHei\';
}
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#number-input {
width: 5rem;
height: 1rem;
background-color: #000;
border-radius: .2rem;
display: flex;
overflow: hidden;
padding: 0.3rem 0;
position: relative;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.6);
}
#number-input::after {
content: \'\';
position: absolute;
top: 0;
left: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.9) 100%);
width: 100%;
height: 100%;
}
#number-input span {
color: #fff;
display: block;
flex: 1 1 5rem;
line-height: 1rem;
text-align: center;
transform: translateY(-1rem);
}
#number-input span.before {
transform: translateY(0rem);
transition: transform .2s ease-in;
}
#number-input span.after {
transform: translateY(-2rem);
transition: transform .2s ease-in;
}
#number-input span::before {
display: block;
content: attr(data-before);
}
#number-input span::after {
display: block;
content: attr(data-after);
}
#number-input button {
border: none;
flex: 0 0 1.2rem;
background: none;
color: #fff;
font-size: .6rem;
line-height: 1rem;
padding: 0;
margin: 0;
width: 1rem;
height: 1rem;
position: relative;
z-index: 100;
}
</style>
以上是关于CSS计数器的主要内容，如果未能解决你的问题，请参考以下文章