转载利用伪元素单个颜色实现 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>
文章转载
转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果的更多相关文章
- Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想 (1.normal)(2.hover)(3.active) / ...
- 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式
最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...
- 利用伪元素和css3实现鼠标移入下划线向两边展开效果
一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的. 二.实现: 1.首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设 ...
- 转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果
原帖地址 https://www.cnblogs.com/yangjunfei/p/6739683.html 感谢分享 一.思路: 将伪元素:before和:after定位到元素底部中间,设置宽度 ...
- 利用伪元素before实现自定义checkbox样式
原理:label标签的for属性可以将文字与复选框进行关联,点击文字可以同时将复选框选中. 隐藏checkbox标签,利用label标签的before伪元素来实现自定义样式.设置before伪元素的 ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- 利用伪元素:after清除浮动
一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果
效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html ...
随机推荐
- js创建与追加元素
用javascript创建元素 : var NewNode = document.creatElement('div'); 结合appendChild与insertBefore插入到DOM树中 ins ...
- SQL Server 通过备份文件初始化复制
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 疑问(Questions) 参考文 ...
- 实战Hybird app：内存溢出与优化
pheongap项目:http://www.nduoa.com/apk/detail/646816 主要的问题: heap过大,内存低性能差的机子上引起奔溃,直接退出 关于web app的优化,不仅仅 ...
- javascript中15种原生对象类型系统综述
前面的话 在编程语言中,能够表示并操作的值的类型称做数据类型,编程语言最基本的特性就是能够支持多种数据类型.javascript拥有强大的类型系统,主要包括原生对象.宿主对象和浏览器拓展对象,本文主要 ...
- AngularJS之高级Route【三】（八）
前言 我们知道默认的路由提供(Route Provider)在复杂的应用程序中是不太适合应用场景,它存在诸多限制,所以在Angular 1.2之后此时我们不得不将路由提供作为一个单独的模块当我们需要使 ...
- .cn根服务器被攻击之后
如果是互联网行业的人员应该知道,8月25日凌晨,大批的“.cn”域名的网站都无法访问,当然包括weibo.cn等大型网站.个人比较奇怪的一件事情是,微博PC网页版是:www.weibo.com,而mo ...
- Android随笔之——闹钟制作铺垫之AlarmManager详解
说实话,之前写的两篇博客Android广播机制Broadcast详解.Android时间.日期相关类和方法以及现在要写的,都算是为之后要写的闹钟应用做铺垫,有兴趣的话,大家可以去看看前两篇博客. 一. ...
- 扩展KMP算法
一 问题定义 给定母串S和子串T,定义n为母串S的长度,m为子串T的长度,suffix[i]为第i个字符开始的母串S的后缀子串,extend[i]为suffix[i]与字串T的最长公共前缀长度.求出所 ...
- ZOJ Problem Set - 1045 HangOver
#include <stdio.h> int main() { float c; int i; while(scanf("%f",&c)!=EOF&&a ...
- 跟我学PHP-第一篇：如何安装Zend Studio 以及汉化和基本准备工作
昨天从早上一直弄到晚上10点,可累死我了,网上的资料都是掺次不齐,所以我写一篇系统点的文章来告诉大家怎么做. 1.如果你想进行一套PHP系统的开发,肯定是要有“尚方宝剑”的,这个尚方宝剑就是PHP工具 ...