原创

CSS-设置div或者其他控件按下的反馈效果-渐变带过渡效果-带星和带冒号

.fbt {
    width: 50%;
    height: 100%;
    background-color: #FFCC33;
    float: left;
    }
.fbt:active {//针对移动端
        -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
    }

.fbt:hover {{//针对PC端 特别注意移动端不要加这条
    background-color: #ccc;
}

<div id="btCancel" class="fbt" onclick="scanSwitch()">暂　停</div>

//特别注意实际效果和顺序有关
a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF}   /* 被选择的链接 */
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！

移动端举例
.touchedFeedback{//设置默认情况
    color: dodgerblue;
}
 <!--移动端不能加,导致点击后不能恢复颜色
.touchedFeedback:hover {
    color: #727171
}-->

.touchedFeedback:active {
    color: #727171
}


直接使用点击反馈（active 用于移动端）
.clickFeedBack:active {
                -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
                box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5);
 }

特别注意
表示只选择所有子类，不带*表示只选择自身,并且:必须和类名之间没有空格

.hover-text-red:hover,
.hover-text-red:active {
    color: red;
    cursor: pointer;
}

.hover-text-red-all-child *:hover,
.hover-text-red-all-child *:active {
    color: red;
    cursor: pointer;
}


另外 渐变带过渡效果
.hover-text-red-all-child :hover {
    background: #ccc;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

//这种写法没有:hover
.hover-text-red-all-child {
    text-align: center;
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image: linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
    border-top: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

正文到此结束

所属分类：前端基础

本文标签： CSS
本文链接： https://code.jiangjiesheng.cn/article/76
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

CSS-设置div或者其他控件按下的反馈效果-渐变带过渡效果-带星和带冒号

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息