利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

1.颜色小tip知识

  在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色

  在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色

单个颜色实现 hover 和 active 时的明暗变化效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个颜色实现 hover 和 active 时的明暗变化效果</title>
    <style type="text/css">
        a {
            text-decoration: none;
        }
        .rubby {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            width: 260px;
            text-align: center;
            padding: 40px;
            font-size: 200%;
            font-weight: bolder;
            background-color: #00aabb;
            color: #fff;
            cursor: pointer;
            border-radius: 1em;
        }

        .rubby:before {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            border-radius: 1em;
            background-color: rgba(255,255,255,.2);
            z-index: -1;
        }
        .rubby:hover:before {
            content: "";
        }
        .rubby:after {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.3);
            border-radius: 1em;
            z-index: -1;
        }
        .rubby:active:after {
            content: "";
        }

    </style>
</head>
<body>
    <a href="#none" class="rubby">.Rubby</a>
</body>
</html>

文章转载

【CSS进阶】伪元素的妙用--单标签之美

时间: 2024-10-12 21:30:11

利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果的相关文章

转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位. html代码 <div id="underline"></div> css样式 #underline{ width: 200px

[CSS]利用伪元素实现一些特殊图形

给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS伪元素 css中伪元素有四个,分别是:first-line,:first-letter,:before,:after.其中前两个分别选择的是目标元素内第一行文本和第一个字母,可以为其添加多余样式. 而最常用的就是:before和:after,这两个伪元素与前两个的用法不同,而用处也更大. :before,:a

利用伪元素做蒙层

注意: 1.若该元素为块级元素,则其伪元素的宽高继承自该元素. 2.若想对文字位置调整,可对其设置box-sizing: border-box,再通过padding来调整位置. 3.还可对伪元素设置背景图片,并通过设置background-position为百分数,使背景图片在蒙层内调整位置. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

[CSS]利用伪元素实现一些特殊图形 from baidu校招

最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> -----------------------以上为背景------------------------------ 正方形当然很好做,但是右侧突出来的小角标就得自己想办法了.所以,既然没有到有,自然是用上了CSS中的伪元素. 这个形状跟我们平时经常遇到的小气泡和下拉栏差不多 平常实现我们常是通过添加小的icon来实

利用伪元素:after清除浮动

让页面呈现多列布局时经常会使用  float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面. #content{background:#000;} .left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;} 所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 cl

利用伪元素实现元素居中

效果: 代码: <div class="test"> <div class="testChild">ddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffff d</div> </div> .test{ background:white; height:

纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果

效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .btn{ width: 80px; line-height:

利用伪元素对块级元素应用vetical-align:middle使之垂直居中

vetical-align的功能是使行内元素垂直对齐. 可能的值 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-height&qu

CSS练习-导航栏斜线分隔-利用伪元素

开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div class="header_right fr"> <a href="#" class="link">Home</a> <a href="#" class="link">