转载 【CSS进阶】伪元素的妙用--单标签之美
1.单个颜色实现按钮 hover 、active 的明暗变化
请点击 转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果
2.利用after伪类清除浮动
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
3.增强用户体验，使用伪元素实现增大点击热区。适合用在点击区域较小的移动端,PC端看上去是很奇怪的哦
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>扩大点击热区域</title>
<style>
.click-area {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); /*触发层叠上下文*/
width: 240px;
text-align: center;
line-height: 100px;
background-color: #00aabb;
color: #fff;
font-size: 200%;
border-radius: .5em;
}
.click-area:hover:after {
content: "AAA";
}
.click-area:after {
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
background-color: deeppink;
border-radius: .5em;
z-index: -1;
}
</style>
</head>
<body>
<a class="click-area">click-Area</a>
</body>
</html>
4.利用伪类元素实现换行，替换<br/>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用伪类实现换行,替换br标签</title>
<style>
body {
font: 150%/1.6 Baskerville, Palatino, serif;
}
dt, dd {
display: inline;
margin: 0;
}
dd {
font-weight: 600;
}
dt::after {
content: "\A"; /*换行*/
white-space: pre;
}
dd + dd::before {
content: ', ';
font-weight: normal;
margin-left: -.25em;
}
</style>
</head>
<body>
<dl>
<dt>书籍分类</dt>
<dd>经典著作 · 哲学类 </dd>
<dd>社会科学 · 政治法律 </dd>
<dd>军事科学 · 财经管理</dd>
<dd>历史地理 · 文化教育 </dd>
</dl>
</body>
</html>
5.变形恢复【为了平面图形变形后可以不让文字变形】
菱形diamond
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菱形</title>
<style>
html {
font-family: "microsoft yahei";
}
.diamond {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
color: #FFFFFF;
font-size: 200%;
}
.diamond::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: deeppink;
transform: rotateZ(45deg);
z-index: -1; }
</style>
</head>
<body>
<div class="diamond">.diamond</div>
</body>
</html>
平行四边形 parallelogram
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>平行四边形</title>
<style>
html {
font-family: "microsoft yahei";
}
.parallelogram {
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
width: 280px;
text-align: center;
line-height: 150px;
font-size: 200%;
color: #FFFFFF;
}
.parallelogram::before {
content:"";
position:absolute ;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: #00AABB;
color: orangered;
z-index: -1;
transform: skew(-.07turn);
}
</style>
</head>
<body>
<div class="parallelogram">.parallelogram</div>
</body>
</html>
梯形 trapezoid
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>利用旋转与透视实现</title>
<style>
html {
font-family: "microsoft yahei";
}
.trapezoid {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 160px;
text-align: center;
padding: 60px;
color: #FFF;
font-size: 200%;
}
.trapezoid:after {
content: "";
position: absolute;
left: 0;top: 0;right: 0;bottom: 0;
background-color: #00aabb;
/*perspective 透视 scale缩放 rotateX绕X轴旋转*/
transform:perspective(30px) scale(1.2) rotateX(5deg);
transform-origin: bottom;
z-index: -1;
}
</style>
</head>
<body>
<div class="trapezoid">.trapezoid</div>
</body>
</html>
纯CSS实现hover效果按钮放大背景变暗效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS实现hover效果按钮放大背景变暗效果</title>
<style>
html {
font-family: "microsoft yahei";
}
.spectiveBlur {
position: absolute;
left: 50%;
top: 50%;
width: 220px;
line-height: 160px;
text-align: center;
border-radius: 10px;
transform: translate(-50%, -50%);
background-color: #E91E63;111111
font-size: 200%;
color: #fff;
cursor: pointer;
transition: transform .2s ;
}
.spectiveBlur:hover {
transform: translate(-50%, -50%) scale(1.2);
box-shadow: 0 0 0 1920px rgba(0,0,0,.6);
}
</style>
</head>
<body>
<div class="spectiveBlur">.spectiveBlur</div>
</body>
</html>
文章转载 【CSS进阶】伪元素的妙用--单标签之美
转载 【CSS进阶】伪元素的妙用--单标签之美的更多相关文章
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果
最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- CSS的伪元素（二）
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...
- css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
随机推荐
- salesforce 零基础学习（四十五）Approval Lock & UnLock相关注意事项
我们都知道,当一条记录进入审批流程以后会自动加锁,apex提供Approval类的lock和unlock方法可以让我们使用代码对记录进行加锁和解锁. 项目中遇到一个需求,需要当某种情况下对记录进行先解 ...
- show master/slave status求根溯源
show master/slave status分别是查看主数据库以及副数据库的状态,是一种能查看主从复制运行情况的方式. 这里仅仅讨论linux下的nysql5.7.13版本的执行情况 一.show ...
- LINQ系列：LINQ to DataSet的DataView操作
1. 创建DataView EnumerableRowCollection<DataRow> expr = from p in products.AsEnumerable() orderb ...
- jQuery源码分析系列：Callback深入
关于Callbacks http://www.cnblogs.com/aaronjs/p/3342344.html $.Callbacks()的内部提供了jQuery的$.ajax() 和 $.Def ...
- eclipse将android项目生成apk并且给apk签名
转载:http://www.cnblogs.com/tianguook/archive/2012/09/27/2705724.html 生成apk最懒惰的方法是:只要你运行过android项目,到工作 ...
- JavaScript操作Cookie
在Web开发中,我们经常使用Cookie保存一些不是非常敏高的数据.比如“下次自动登录”,“广告显示”等功能.定义是:某些网站为了辨别用户身份而存储在用户本地终端(主要是浏览器)上的数据.定义域RFC ...
- 从零开始编写自己的C#框架（7）——需求分析
本章内容虽然叫“需求分析”,实际上关于具体的需求分析操作步骤并没有深入去写,因为细化的话那将是一本厚厚的书,而需求分析在本系列中,是帮助大家了解项目的基本要求(主要针对本项目而已).而写本章的主要目的 ...
- iOS开发之多线程技术（NSThread、OperationQueue、GCD）
在前面的博客中如果用到了异步请求的话,也是用到的第三方的东西,没有正儿八经的用过iOS中多线程的东西.其实多线程的东西还是蛮重要的,如果对于之前学过操作系统的小伙伴来说,理解多线程的东西还是比较容易的 ...
- RSA密钥,JAVA与.NET之间转换
最近在做银联的一个接口,用到RSA签名,悲剧来了,.net用的RSA密钥格式和JAVA用的不一样 .net为XML格式 <RSAKeyValue><Modulus>53Knuj ...
- 初试JqueryEasyUI（附Demo）
写在前面 准备 布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载 关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...