css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）
<!DOCTYPE html>
<html>
<head>
<title>css计数器--兼容IE8</title>
<meta charset="utf-8"/>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style: none;
counter-reset: list;
}
li{
position: relative;
width: 100px;
height: 100px;
border:1px solid #ccc;
counter-increment: item;
}
li:after{
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transition:all .3s linear;
opacity: 0;
background: #000;
}
li:hover:after{
width: 100%;
height: 100%;
top: 0;
left:0;
opacity: 0.3;
}
li:before{
content: counter(item)".";
display: inline-block;
}
</style>
</head> <body>
<ul>
<li>
aaa
</li>
<li>
aaa
</li>
<li>
aaa
</li>
</ul>
</body>
</html>
css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）的更多相关文章
- CSS计数器(序列数字字符自动递增)详解———张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...
- 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计数器:counter
最近的需求,明星字体销售排行榜中,需要对字体的销售情况进行排序. 在早期,只有ol和ul可以对子元素li进行排序:如果不使用这两个标签,就由前台开发去手动填写序号. 当然,在这个需求中,数据不是实时更 ...
- CSS 计数器详解
在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过 ...
随机推荐
- Generic-Host 快速使用指南
.NETCORE 中的 Generic Host 本文以自己在工作中学习和使用.net core generic-host 作一个总结. 前言 在创建的ASPNETCORE项目中,我们可以在Main( ...
- redis 绑定任意ip
vi /etc/redis.conf 修改bind语句为 bind 0.0.0.0
- JavaScript迭代
定义: 指的是按照某种顺序逐个访问列表中的每一项. 迭代在数学中的定义: 在循环的基础上, 每一次循环, 都比上一次更为接近结果. 循环定义:指的是在满足条件的情况下,重复执行同一段代码. 迭代方法: ...
- 十四、curator recipes之DistributedAtomicLong
简介 和Java的AtomicLong没有太大的不同DistributedAtomicLong旨在分布式场景中维护一个Long类型的数据,你可以像普通单机环境一样来使用它. 官方文档:http://c ...
- 一、window下zookeeper独立部署
zookeeper是一个分布式协调应用,用于管理大型主机.通俗地说,分布式应用相对于单体应用存在着很多要处理的问题,而这些问题通常是不太好处理的.比如,典型的一致性问题,而zookeeper可以很简单 ...
- js数组的forEach方法能不能修改数组的值
如果要使用数组的forEach()方法对其改值时,需要直接通过arr[i]这种方式来更改. 请看下面代码: // 数组改值 let arr = [1,3,5,7,9]; arr.forEach(fun ...
- hololens DEP2220: 无法删除目标计算机“127.0.0.1”上的文件夹
Hololens开发调试的过程中,可能会出现 “DEP2220: 无法删除目标计算机“127.0.0.1”上的文件夹“ 的错误导致无法部署,解决办法是进入项目属性页——调试——启动选项,勾选“卸载并重 ...
- Codeforces Round #417 B. Sagheer, the Hausmeister
B. Sagheer, the Hausmeister time limit per test 1 second memory limit per test 256 megabytes Som ...
- ArcGIS最权威、最专业的技术分享网站：积思园（www.iarcgis.com)
你对iArcGIS.com说点什么 为什么会有该网站的产生 在这个所谓的“大数据”的时代,每个人都深陷于海量信息无法自拔,因为过多碎片化的数据只会让自己的思维更加迷离,快餐式的阅读只会让自己变得虚胖. ...
- 《ArcGIS Runtime SDK for Android开发笔记》——（4）、基于Android Studio构建ArcGIS Android开发环境
1.前言 2015年1月15日,发布ArcGIS Runtime SDK for Android v10.2.5版本.从该版本开始默认支持android studio开发环境,示例代码的默认开发环境也 ...