zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    psp4
    一维循环数组最大子数组求解
    psp3
    psp2
    求二维数组最大连续子数组
    计算连续最大子数组问题
    psp1
    关于30道题目问题
    Java 文件操作
    java iterator
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/8303780.html
Copyright © 2011-2022 走看看