转载 【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> ---- ...
随机推荐
- JMeter--二、在Windows环境上搭建wordpress
为了学习使用JMeter,在Windows环境上搭建了wordpress. 使用JMeter录制或是编写登录worepress.编辑文章.删除文章的脚本. 首先了解一下wordpress是什么? Wo ...
- c#运算表达式
1.取补运算 操作符:~ 操作数:限定int,uint,long,ulong和枚举类型,返回值于操作数类型相同 sbyte,byte,short,ushort,也可以运算,但运算前都将隐式转换为int ...
- python定时重跑获取数据
做大数据的童鞋经常会写定时任务跑数据,由于任务之间的依赖(一般都是下游依赖上游的数据产出),所以经常会导致数据获取失败,因为很多人发现数据失败后 都会去查看日志,然后手动去执行自己的任务.下面我实现了 ...
- 运用webkit绘制渲染页面原理解决iscroll4闪动的问题
原:http://www.iunbug.com/archives/2012/09/19/411.html 已经有不少前端同行抱怨iScroll4的各种问题,我个人并不赞同将这些问题归咎于iScroll ...
- 传智播客--高级控件--showdialog关闭（小白内容）
以往我在WPF里,用ShowDialog展示出一个页面,一般都是用Close()进行关闭. 今天看传智播客的视频时,了解到还能直接给DialogResult一个TRUE或者false的属性,使页面关闭 ...
- js动态给当前点击元素添加css类
1.页面:
- 深入理解javascript描述元素内容的5个属性
× 目录 [1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent 前面的话 <p>This is a <i& ...
- Restore Volume 操作 - 每天5分钟玩转 OpenStack（60）
前面我们 backup 了 voluem,今天我们将讨论如何 restore volume. restore 的过程其实很简单,两步走: 在存储节点上创建一个空白 volume. 将 backup 的 ...
- iOS开发之山寨版新浪微博小结
在之前的博客IOS开发之新浪围脖中获取微博的内容是使用我自己的access_token来请求的数据,那么如何让其他用户也能登陆并获取自己的微博内容呢?接下来就是OAuth和SSO出场的时候啦.OAut ...
- Linux异常表
一.为什么需要异常表? 处于内核态的程序有下面四种情况会产生缺页异常: 1.内核试图访问属于进程地址空间的页,但是,该页对应的页框不存在或者内核试图去访问一个只读的页,分别对应“请求调页”和“写时复制 ...