<!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. 使用PowerShell为SSAS Role添加Membership

    PowerShell, SSAS, Role, Membership 上篇随笔使用PowerShell创建SSAS Role贴出了如何使用PowerShell批量创建Role,由于个人项目需求,创建R ...

  2. Python——基本的方法

    格式化 我们经常会输出类似'亲爱的xxx你好!你xx月的话费是xx,余额是xx'之类的字符串,而xxx的内容都是根据变量变化的,所以,需要一种简便的格式化字符串的方式 >>> 'He ...

  3. jquery里正则的使用方法及常用的正则验证

    本文是一篇关于jquery使用正则来验证输入,及一些常用验证规则的基础文章,适合新手. 假设我们的网页里有这样的一个表单: <input id="aijquery" type ...

  4. Visual Studio for Mac 安装无响应或者无法连接网络等解决方法

    1.无法连接到网络 2.点击安装和更新无响 这两种情况造成的原因都是由于被墙的原因,第一种情况有部分可以通过fq解决,第二种情况是我遇到过的 反正我全局也失败 这里给出一个我自己用过的解决方案 查看控 ...

  5. .net core mvc 类库读取配置文件

      appsettings.json,给类库项目引入 Microsoft.Extensions.Configuration 和 Microsoft.Extensions.Configuration.J ...

  6. Dapper扩展

    using Dapper; using MySql.Data.MySqlClient; using System; using System.Collections.Generic; using Sy ...

  7. windows上memecache添加多个端口命令

    sc create "Memcached Server1" start= auto binPath= "D:\01_Soft\memcached\memcached.ex ...

  8. 最大行走路线问题（DP）

    在一个NxN的棋盘上,每个格子里有若干个棋子,假设起点为左上角的格子,且每次只能向下或向右走一格,问怎样走才能得到最多的棋子. 这是很简单的递推题了. 因为只能向下或者向右,所以其实我们可以把棋盘看成 ...

  9. 解决全站字符乱码（POST和GET中文编码问题）

    1 说明 乱码问题: 获取请求参数中的乱码问题: POST请求:request.setCharacterEncoding(“utf-8”): GET请求:new String(request.getP ...

  10. python学习之老男孩python全栈第九期_day022作业

    1. 写一个求正方形周长和面积的类 class Square: def __init__(self, length): self.length = length def area(self): ret ...