本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:【css进阶】伪元素的妙用--单标签之美,奇思妙想
(1、normal)(2、hover)(3、active)
/*建立一个带圆角矩形*/
.pesudo{
position: relative;
margin-top:80px;
width: 120px;
height:120px;
border-radius:1em;
background:#00aabb;
cursor:pointer;
}
/*用before设置好一个hover的状态*/
.pesudo:before{
position: absolute;
display:block;
top:; right:; bottom:; left:;
z-index:;
border-radius:1em;
background:rgba(0,0,0,.1);
}
/*当元素hover的时候就出现设置好的before*/
.pesudo:hover:before{
content:"";
}
/*用after设置好一个active的状态*/
.pesudo:after{
position: absolute;
top:; right:; bottom:; left:;
z-index:;
border-radius:1em;
background:rgba(255,255,255,.2);
}
/*当元素active得而时候就出现设置好的after*/
.pesudo:active:after{
content:"";
}
ok,然后就轻松实现了
Css-深入学习之单个颜色实现 hover 和 active 时的明暗变化效果的更多相关文章
-
转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更 ...
-
纯css3实现按钮的 hover 和 active 时颜色的明暗变化效果
效果:在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下: <!DOCTYPE html> <html ...
-
CSS选择器,属性前缀,长度单位,变形效果,过渡效果,动画效果
CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...
-
DIV+CSS系统学习:转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
-
CSS入门级学习
css入门学习1:认识CSS 1.1:css简介,css全称是层叠样式表,Cascading style sheets 1.2:css的作用,主要是用于定义html内容在浏览器内的显示样式,如文字大小 ...
-
CSS基础学习笔记
一. CSS介绍 1. CSS概述:CSS(Cascading Style Sheets)指层叠样式表,极大提高了工作效率. 2. 基础语法: 属性大于1个之后,属性之间用分号隔开 如果大于1个单词, ...
-
CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式
最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...
-
common.css 值得学习的css样式布局
正常的项目当中,应当有一个common.css,就是把一些常用的样式,写入其中. 然后再结合一些特性的css,构造漂亮的页面. 下面欣赏一些海盗商城的common.css. /***样式初始化***/ ...
-
HTML&;CSS基础学习笔记1.30-颜色的表达
颜色的表述 在网页中的颜色设置是非常重要,CSS的属性有字体颜色(color).背景颜色(background-color).边框颜色(border)等,设置颜色的方法也有很多种: 1.英文命令颜色 ...
随机推荐
-
1800: [Ahoi2009]fly 飞行棋
#include<cstdio> #include<iostream> using namespace std; ],n,ans; int main() { scanf(&qu ...
-
app图标和启动页设置
弄了一下午,终于把iOS中图标的设置和启动页的设置弄明白了.我想以后再也不会浑了. 进入正题: 一:apple 1).iPhone4s 3.5寸屏,也就是640*960,但在模拟器上正常用的是320* ...
-
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
-
使用MongoDB的开源项目(转)
根据谷歌的搜索结果筛选出来的. 统计应用 counlty https://count.ly/ mongopress 开源CMS系统 http://www.mongopress.org/ Rubedo ...
-
[C#].Net Core 获取 HttpContext.Current 以及 AsyncLocal 与 ThreadLocal
在 DotNetCore 当中不再像 MVC5 那样可以通过 HttpContext.Current 来获取到当前请求的上下文. 不过微软提供了一个 IHttpContextAccessor 来让我们 ...
-
步步为营-87-imageAreaSelect插件使用(图片剪切)
1 引用文件 jquery.imgareaselect.min.cs imgareaselect-default.js 2 代码 <%@ Page Language="C#" ...
-
Gitlab安装与备份恢复
GitHub是2008年由Ruby on Rails编写而成,与业界闻名的Github类似;但要将代码上传到GitHub上面,而且将项目设为私有还要收费.GitLab是一个用于仓库管理系统的开源项目, ...
-
雷林鹏分享:jQuery EasyUI 窗口 - 窗口与布局
jQuery EasyUI 窗口 - 窗口与布局 Layout 组件可以内嵌在窗口(window)中.我们可以创建一个复杂的布局窗口,甚至不需要写任何的 js 代码.jquery-easyui 框架帮 ...
-
ASP.NET Core 2 学习笔记(八)URL重写
路由跟URL 重写的功能性略有不同.路由是将Request 找到对应的服务,而URL 重写是为了推卸责任转送Request.本篇将简单介绍下ASP.NET Core的URL重写(URL Rewrite ...
-
用BeanUtilsDate类型值为空报错的解决方法
除BeanUtils外还有一个名为PropertyUtils的工具类,它也提供copyProperties()方法,作用与BeanUtils的同名方法十分相似,主要的区别在于后者提供类型转换功能,即发 ...