郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

博彩评级专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

博彩评级提供网页素材下载、网站模板
这一切都是免费的!
当前位置:博彩评级 > div+css > css教程 >

css点击高亮模拟

来源:web前端开发 作者: 博彩评级 日期:2016-10-02 人气:
如果你的css重置中禁止了点击高亮效果,你还可以使用css模拟这个css点击高亮,点击高亮效果主要在移动端用处比较大,移动端的按钮链接点击后如果没有表现出一些点击过的效果,会

本文地址:http://www.qqydc.com/html+css/htmlcssjq/1117.html
文章摘要:css点击高亮模拟,联谊活动阁楼忧闷,比试悔之晚矣情况。

如果你的css重置中禁止了点击高亮效果,你还可以使用css模拟这个css点击高亮,点击高亮效果主要在移动端用处比较大,移动端的按钮链接点击后如果没有表现出一些点击过的效果,会让人怀疑是不是点击到了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css点击高亮-web前端开发http://www.qqydc.com/</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点击高亮模拟http://www.qqydc.com/html+css/htmlcssjq/1117.html

css点击高亮模拟由博彩评级收集整理,您可以自由传播,请主动带上本文链接

博彩评级就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

(责任编辑:博彩评级)