<!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. IOS TableView实现省市联动

    之前用UIPickerView实现了省市联动,上个月网友让用UITableView给他实现了下.今天也把这些贴出来. // // ViewController.m // doubleTable // ...

  2. Lambda表达式&匿名方法

    “Lambda表达式“(lambda Expression)就是一个匿名函数(匿名方法),lambda表达式基于数学中的入演算得名. lambda运算符:所有的lambda表达式都是用新的lambda ...

  3. JS实现二叉树的创建和遍历

    1.先说二叉树的遍历,遍历方式: 前序遍历:先遍历根结点,然后左子树,再右子树 中序遍历:先遍历左子树,然后根结点,再右子树 后续遍历:先遍历左子树,然后右子树,再根结点   上代码:主要还是利用递归 ...

  4. Winform截图小程序

    今天闲时做的一个Demo,做得并不好,只是实现了最基本的截图功能 主要的思路就是 先打开一个主窗体,点击"截图按钮" 会出现一个半透明的小窗体(可以拉伸放大缩小) 然后利用Grap ...

  5. [PHP] 通用网关接口CGI 的运行原理

    CGI 的运行原理:1.客户端访问某个 URL 地址之后,通过 GET/POST/PUT 等方式提交数据,并通过 HTTP 协议向 Web 服务器发出请求.2.服务器端的 HTTP Daemon(守护 ...

  6. log4j2配置文件

    项目里面经常用到日志,Java开发一般用log4j.slf4j这些框架,看着配置文件有点懵.这几天看公司代码的时候,也有用到log4j,感觉要复杂一点.在本地打log,也有打到hive里面存的.看了一 ...

  7. 【C++并发实战】（三） std::future和std::promise

    std::future和std::promise std::future std::future期待一个返回,从一个异步调用的角度来说,future更像是执行函数的返回值,C++标准库使用std::f ...

  8. MySQL B+树索引和哈希索引的区别（转 JD二面）

    导读 在MySQL里常用的索引数据结构有B+树索引和哈希索引两种,我们来看下这两种索引数据结构的区别及其不同的应用建议. 二者区别 备注:先说下,在MySQL文档里,实际上是把B+树索引写成了BTRE ...

  9. BZOJ1149 [CTSC2007]风玲

    Description Input Output 输出仅包含一个整数.表示最少需要多少次交换能使风铃满足Ike的条件.如果不可能满足,输出-1. Sample Input 6 2 3 -1 4 5 6 ...

  10. Maven学习总结（一）：基本概念

    一.Maven的基本概念 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1. ...