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>

原文地址：https://www.cnblogs.com/dongxiaolei/p/8303780.html

时间： 2025-01-18 01:10:46

css计数器 及 鼠标经过从中间扩散一个矩形（正方形长方形均可）的相关文章

[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解及实例演示

一.挖坟不可耻 CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到(见下图),不过当时是作为其中一员介绍.就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员.很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象. 然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相.就像我,说不定某年某月,当年像驴子一样被溜的

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

by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4303 一.挖坟不可耻 CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到(见下图),不过当时是作为其中一员介绍.就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员.很自然,个把月之

CSS实现的鼠标悬浮整行背景变色代码

CSS实现的鼠标悬浮整行背景变色代码:在新闻列表形式的不居中,为了清晰的分辨每一行,一般当鼠标悬浮在一行上的时候,能够实现当前行整行变色,下面就通过代码实例简单介绍一下如何实现此效果,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/

CSS实现的鼠标滑过改变链接文字实例代码

CSS实现的鼠标滑过改变链接文字实例代码: 鼠标滑过的时候,有时候需要改变链接中的文本,这个如果使用js就比较好实现,当然使用CSS也并不难,下面就是一段这样的代码实例,下面就做一下介绍,希望对需要的朋友带来一定的帮助. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

CSS如何规定鼠标指针的形状

CSS如何规定鼠标指针的形状: 鼠标指针在不同元素黄总的形状,往往能够说明此元素的功能,通过cursor属性可以设置鼠标指针的形状. 罗列如下: auto:标准光标 default:标准箭头 hand:手形光标 wait:等待光标 text:I形光标 vertical-text:水平I形光标 no-drop:不可拖动光标 not-allowed:无效光标 help:?帮助光标 all-scroll:三角方向标 move:移动标 crosshair:十字标 原文地址是:http://www.51t

CSS改网页鼠标指针、改指定元素指针（1）——代码部分

要实现CSS改网页鼠标指针.改指定元素指针,我们应该首先了解以下内容: 所有主流浏览器都支持 cursor 属性. 注释:Opera 9.3 和 Safari 3 不支持 url 值. 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 默认值: aut

CSS实例：鼠标滑过超级链接文字时改变背景颜色

先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FFFF} /* 已访问的链接 */ a:hover {color: #0000FF} /* 鼠标移动到链接上 */ a:active {color: #00FF00} /* 选定的链接 */ </style> <ul id="content"> <li&g

CSS计数器:counter

如何对元素进行计数?在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了counter这一新属性,配合伪元素:before.:after中的content使用,便可以对指定的元素进行排序了. CSS计数器包括了counter-reset.counter-increment.content三个属性.counter() 函数 以及伪元素:before.:after. 语法说明: counter-reset:identifier [integer] 默认值为none indet

css 计数器

早上浏览starof的::before和::after伪元素的用法时,看到提出的第四点,故着重研究了下,并对照张鑫旭前辈的demo的写了个测试例子. 首先,还是先来介绍下css计数器counter()是个什么东西,参考网址为http://www.w3cplus.com/css3/css-counters.html. CSS Counters用到的属性 使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果.使用的到属性包括: *