【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】计数器的更多相关文章
- css计数器详解
什么是css计数器 体验更佳排版请戳原文链接:http://blog.liuxianan.com/css-counters.html 就是采用css给一些html元素自动生成编号,比如类似1.3.2这 ...
- CSS计数器
使用CSS计数器就像使用变量一样. 它有以下几个属性: counter-reset 创建或重置计数器 counter-increment 增长计数器 content 生成内容 counter() 将计 ...
- 转载：CSS计数器的趣味时光之css计算数据
CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...
- CSS计数器的趣味时光
CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...
- 排行榜妙用——CSS计数器
碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?
- CSS计数器妙用
做web的经常会遇到类似排行榜的需求, 特别是要求前n名的样式和后面人不一样. 通常大多数人对于这个需求的做法都是在后端处理好排名名次, 在前端填入内容, 然后针对前n名做特殊的样式处理. 但是这样有 ...
- CSS计数器(序列数字字符自动递增)详解———张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...
- css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）
<!DOCTYPE html> <html> <head> <title>css计数器--兼容IE8</title> <meta ch ...
- CSS计数器:counter
最近的需求,明星字体销售排行榜中,需要对字体的销售情况进行排序. 在早期,只有ol和ul可以对子元素li进行排序:如果不使用这两个标签,就由前台开发去手动填写序号. 当然,在这个需求中,数据不是实时更 ...
- CSS 计数器详解
在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过 ...
随机推荐
- 类加载机制+JVM调优实战+代码优化
类加载机制 Java源代码经过编译器编译成字节码之后,最终都需要加载到虚拟机之后才能运行.虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直 ...
- Adobe ColdFusion 反序列化漏洞（CVE-2017-3066）
影响版本 以下版本受到影响:Adobe ColdFusion (2016 release) Update 3及之前的版本,ColdFusion 11 Update 11及之前的版本,ColdFusio ...
- js 调用json
url = "/plus/API/"; try { // 此处是可能产生例外的语句 } catch(error) { // 此处是负责例外处理的语句 } finally { // ...
- 论文笔记：（CVPR2017）PointNet: Deep Learning on Point Sets for 3D Classification and Segmentation
目录 一. 存在的问题 二. 解决的方案 1.点云特征 2.解决方法 三. 网络结构 四. 理论证明 五.实验效果 1.应用 (1)分类: ModelNet40数据集 (2)部件分割:ShapeNet ...
- SimpleDateFormat类的线程安全问题和解决方案
摘要:我们就一起看下在高并发下SimpleDateFormat类为何会出现安全问题,以及如何解决SimpleDateFormat类的安全问题. 本文分享自华为云社区<SimpleDateForm ...
- anyRTC 重磅推出在线实时 K 歌解决方案
在线音乐领域一直是各大资本巨头投资的热点,从抢占版权到现在的"云上之争", 主流平台的战火从版权资源转向创新领域扩延.而如今,在线K歌正在成为抢占"云音乐"市场 ...
- 使用 C++ WinRT 组件
创建 C++ WinRT 组件 通过 Cpp/WinRT 项目模板创建一个 WinRT 组件工程 CppWinrtComponent.vcxproj,主要接口定义如下: namespace CppWi ...
- 重返MySQL之MySQL基础
重返MySQL之MySQL基础 本章详细介绍了,什么是数据库,常见的关系型数据库有哪些,什么是MySQL,及MySQL中DDL操作表,DML操作表记录. 1.0 数据库概述 1.1 数据存储的方式 目 ...
- 剑指 Offer 29. 顺时针打印矩阵
剑指 Offer 29. 顺时针打印矩阵 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字. 示例 1: 输入:matrix = [[1,2,3],[4,5,6],[7,8,9]] 输出: ...
- POJ 1190 生日蛋糕题解
题目地址:http://poj.org/problem?id=1190 一道很有趣的搜索题--主要是剪枝-- 我弄了5个剪枝: 1.当前剩余层数>=上层半径,剪掉 2.当前剩余层数>=上层 ...