<!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. nginx 配置 单页面应用的解决方案

    server { listen 80; server_name example.com; root /var/www/example.com; gzip_static on;  location / ...

  2. 【angular5项目积累总结】表单复杂校验

    view code form.css :host { display: flex; width: 100%; height:100%; border-left:1px solid #ccc; } .i ...

  3. 报错The VMware Authorization Service is not running

    今天上linux课程的时候,开启虚拟机报错: The VMware Authorization Service is not running 解决方案里面各种提供: 1.以管理员身份运行虚拟机,治标不 ...

  4. angular1的 伪MVC

    以下的代码是自己对angular1的一些理解.如果非要按照mvc的这种模式开发..可以用以下的这种方式理解. //userFactorys.js 这是服务方法 return 的方法取得json数据里的 ...

  5. 微信WeUI入门

    为帮助网页开发者实现与微信客户端一致的视觉体验,并降低设计和开发成本,微信团队推出了网页设计样式库:WeUI. 该样式库目前包含 button (按钮).cell (单元格).toast (浮层提示) ...

  6. VS中特殊的注释——TODO/UNDONE/HACK的使用

    在代码的后面添加形如下面注释: //TODO: (未实现)…… //UNDONE:(没有做完)…… //HACK:(修改)…… 等到再次打开VS的时候,找到 :视图>任务列表 即可显示所有带有T ...

  7. java 基础 --- 动态代理和静态代理

    问题  : 代理的应用场景是什么 动态代理的底层原理是什么,为什么只能继承接口 概述 代理模式是设计模式的一种,简单地说就是调用代理类的方法实际就是调用真实类的方法.这种模式在AOP (切面编程)中非 ...

  8. node错误集合

    1.端口被占用 node .\app.js events.js:167 throw er; // Unhandled 'error' even 解决办法:8888端口被占用了,更改一个端口就好 2. ...

  9. 5 springboot 集成dubbo

    Apache Dubbo 是一款高性能Java RPC框架 由阿里巴巴开源并进入Apache孵化器,官网 http://dubbo.apache.org 提供服务化基础功能: 接口远程调用,智能负载均 ...

  10. mysql随机查询符合条件的几条记录

    随机查询,方法可以有很多种.比如,查询出所有记录,然后随机从列表中取n条记录.使用程序便可实现.可是程序实现必须查询出所有符合条件的记录(至少是所有符合条件的记录id),然后再随机取出n个id,查询数 ...