转载利用伪元素单个颜色实现 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 ...
随机推荐
- JVM字节码指令
invokevirtual 调用实例方法 invokespecial 调用父类构造,实例初始化方法,私有方法 dup 复制栈顶数值,并且复制值进栈,pop/pop2为栈顶值出栈 aload_0 加载第 ...
- Leetcode-83 Remove Duplicates from Sorted List
#83. Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that ...
- 关于HTML5 Audio线程问题
移动端果然很坑! 在移动端IOS平台上用new Audio每次调用这个API都会创建一个新的线程,而且还不能销毁...直到拖死应用 后来改进了换了AudioContext,线程问题解决了 https: ...
- (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
(App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKi ...
- 学用MVC4做网站六后台管理:6.1管理员(续)
接6.1 首先在~/Areas/Admin/Models文件夹添加管理员模型Administrator.cs using System.ComponentModel.DataAnnotations; ...
- Java 8新特性-3 Lambda 表达式
在 Java 8 之前,匿名内部类,监听器和事件处理器的使用都显得很冗长,代码可读性很差. 在Java 8 之前使用匿名内部类: 例如 interface ITestPrint{ public voi ...
- 关于JqueryEasyUI集合Kindeditor
写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...
- T-Sql（三）存储过程（Procedure）
今天讲下T-sql语法中存储过程的用法,我们一开始学习数据库语言的时候就是用一些简单的insert,select等语法,但是随着我们学习数据库的深入,就会发现一些简单的语法满足不了我们的要求,比如处理 ...
- 【转】 个人认为，这是最详细的 android------HttpURLConnection 类用法详解。一些教材没讲到的，它讲到了
站在巨人的肩膀上,渐渐进步. 原文链接:http://www.blogjava.net/supercrsky/articles/247449.html 针对JDK中的URLConnection连接Se ...
- 【url重写】
一.原理void Application_BeginRequest(object sender, EventArgs e) { //url重写 HttpApplication a ...