转载利用伪元素单个颜色实现 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 ...
随机推荐
- Atitit图像处理的用途
Atitit图像处理的用途 1.1. 分类识别 (人脸检测,肤色识别,人类检测:1 1.2. 炫丽的动态按钮生成:色相旋转+自己的草书等图片合成,图片自动裁剪1 1.3. 集成调用自绘gui接口:识别 ...
- js事件（event）的运行原理
昨天写click事件时候突然脑袋抽筋想了想浏览器是怎么执行click事件的,为什么我们可以用e或者window.event这个对象获取一些事件的属性呐?以下是我的理解.如果您有更好的理解,欢迎评论!! ...
- java中集合类中Collection接口中的Set接口的常用方法熟悉
1:Set集合由Set接口和Set接口的实现类组成,Set接口继承了Collection接口,因为包含Collection接口的所有方法. 2:由于Set接口中不允许存在重复值,因此可以使用Set集合 ...
- C#设计模式系列：策略模式（Strategy）
1.策略模式简介 1.1>.定义 策略是为达到某一目的而采取的手段或方法,策略模式的本质是目标与手段的分离,手段不同而最终达成的目标一致.客户只关心目标而不在意具体的实现方法,实现方法要根据具体 ...
- OpenCASCADE Root-Finding Algorithm
OpenCASCADE Root-Finding Algorithm eryar@163.com Abstract. A root-finding algorithm is a numerical m ...
- 简单java在线测评程序
简单java程序在线测评程序 一．前言 大家过年好!今年的第一篇博客啊!家里没有网,到处蹭无线!日子过得真纠结!因为毕设的需求,简单写了一个java程序在线测评程序,当然也可以在本地测试. 二．思路 ...
- AngularJS之初级Route【一】（六）
前言 这一节我们来讲讲AngularJS中的路由以及利用AngularJS在WebAPi中进行CRUD.下面我们一起来看看. 话题 当我们需要进行路由映射时即用到$route服务,在AngularJS ...
- java中hashMap的排序
hashMap排序,示例: private void test(){ Map<String, List<String>> unSupportedDatesMap=new Has ...
- Oracle数据库全球化
一.自定义数据库和各个会话的语言相关行为 1.1 全球化功能 1.2 使用全球化支持功能 二.使用数据库和NLS字符集 2.1 语言排序与选择 2.2 Locale Builder 2.3 使用时区 ...
- 相克军_Oracle体系_随堂笔记012-undo
undo表空间中undo段是自动生成的,oracle自动使用undo表空间的undo段. 作为高级DBA,需要了解Oracle是如何使用undo段的.这样出了性能问题才能够解决. 1.Undo表空 ...