<!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计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）的更多相关文章

  1. CSS计数器(序列数字字符自动递增)详解———张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 ...

  2. css计数器详解

    什么是css计数器 体验更佳排版请戳原文链接:http://blog.liuxianan.com/css-counters.html 就是采用css给一些html元素自动生成编号,比如类似1.3.2这 ...

  3. CSS计数器

    使用CSS计数器就像使用变量一样. 它有以下几个属性: counter-reset 创建或重置计数器 counter-increment 增长计数器 content 生成内容 counter() 将计 ...

  4. 转载：CSS计数器的趣味时光之css计算数据

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  5. CSS计数器的趣味时光

    CSS计数器是“啊太好了,竟不知道CSS可以做这啊”这类非常有趣的众多特性之一.简言之,用CSS使你持续某增加某个量,而无需JavaScript. 简单计数器 我们从这个简单的分页示例开始: 你见到的 ...

  6. 排行榜妙用——CSS计数器

    碰到的坑 小伙伴你们是否有碰到以下的情况,排行榜前3名的样式不一样,你们是怎么处理的么?

  7. CSS计数器妙用

    做web的经常会遇到类似排行榜的需求, 特别是要求前n名的样式和后面人不一样. 通常大多数人对于这个需求的做法都是在后端处理好排名名次, 在前端填入内容, 然后针对前n名做特殊的样式处理. 但是这样有 ...

  8. CSS计数器:counter

    最近的需求,明星字体销售排行榜中,需要对字体的销售情况进行排序. 在早期,只有ol和ul可以对子元素li进行排序:如果不使用这两个标签,就由前台开发去手动填写序号. 当然,在这个需求中,数据不是实时更 ...

  9. CSS 计数器详解

    在前端开发中总少不了列表项,对于列表项序号,射鸡师一般会列出个1,2,3...序号.在不了解css计数器属性之前,我一般会用精灵图,用类名来区分序列号图片.这样做尽管可以达到目的,但是很不方便,开发过 ...

随机推荐

  1. LINQ-Group子句、Into子句及orderby子句

    1. Group子句 LINQ表达式必须以from子句开头,以select或Group子句结束,所以除了使用select子句也可以使用Group子句来返回元素分组后的结果.Group子句用来查询结果分 ...

  2. 在IIs上部署asp.net core2.1项目

    转自:https://www.cnblogs.com/jasonduan/p/9193702.html 在IIS上部署你的ASP.NET Core 2.1项目   1.在控制面板→程序→启用或关闭Wi ...

  3. Java编程基础知识总结大全（Ⅱ）

    7.类型转换 精度从高到低 double float long int short(char) byte (1)自动类型转换 将一个低精度---高精度 (2)强制类型转换 将一个高精度---低精度 ...

  4. kinect 深度图像去噪算法

    算法设计思路 (1)读取16位深度图像到待处理图像帧组: (2)ROI区域计算 由于kinect 彩色摄像头和红外深度摄像头是存在视角偏差的,经过视角对齐后,得到的深度图像是有黑边的.此处通过取帧组第 ...

  5. IDEA使用maven建web项目示例

    运行环境:OSX-10.13.3. IDEA-2017.3.3. maven-3.5.2 步骤1:选择maven-webapp模板新建web项目 步骤2:设置项目GroupId等 需从网上下载相关构件 ...

  6. Inside the C++ Object Model：构造语意（chapter5）

    看到构造语意的其中一节“继承体系下的对象构造”(5.2节)的最后,看来原文,发现侯杰的翻译有问题,怪不得读起来不顺. What about when providing an argument for ...

  7. sublime_text3 快速生成xhtml表头手动设置

    1. 在github上手动下载emmet安装插件 https://github.com/sergeche/emmet-sublime#how-to-install 2.把下载的安装插件放到packag ...

  8. 【PyQt5 学习记录】004：简单QThread笔记

    在文本编辑框中每隔几秒添加一行文本,代码如下: #!/usr/bin/python3 # -*- coding:utf-8 -*- import sys from PyQt5.QtWidgets im ...

  9. JavaScript初学

    今天学习了js的基础知识,自我归纳如下: 第一部分:js变量的声明和引入 js声明1-直接声明js代码块,使用<script></script>  2-引入外部声明,即创建一个 ...

  10. 转 ： Apache启动报错：could not bind to address [::]:443 解决办法

    转:Apache启动报错:could not bind to address [::]:443 解决办法 安装Apache服务器的时候,报如下错误: Installing the 'apache' s ...