知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    css點擊高亮模擬

    作者:佳明媽 來源:web前端開發 2016-10-02 人氣:
    如果你的css重置中禁止了點擊高亮效果,你還可以使用css模擬這個css點擊高亮,點擊高亮效果主要在移動端用處比較大,移動端的按鈕鏈接點擊后如果沒有表現出一些點擊過的效果,會

    如果你的css重置中禁止了點擊高亮效果,你還可以使用css模擬這個css點擊高亮,點擊高亮效果主要在移動端用處比較大,移動端的按鈕鏈接點擊后如果沒有表現出一些點擊過的效果,會讓人懷疑是不是點擊到了。

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css點擊高亮-web前端開發http://www.fsussj.tw/</title>
        <STYLE>
            .active{ position: relative; padding:10px;}
            .active:before{
                content: '';
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background-color:#ddd;
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                opacity: 0;
                pointer-events: none;
                -webkit-transition: opacity 600ms;
                transition: opacity 600ms;   /*加上動畫顯得更自然*/
            }
    
            .active:active:before{
                opacity: 1;
                -webkit-transition: opacity 150ms;
                transition: opacity 150ms;
            }
        </STYLE>
    </head>
    <body>
    <SPAN class="active">點擊試試</SPAN>
    </body>
    </html>
    ↓ 查看全文

    css點擊高亮模擬由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    css點擊高亮模擬-最新評論

    福利彩票排列7走势图