转载 【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> ---- ...
随机推荐
- 2013 duilib入门简明教程 -- XML配置界面(6)
前面那些教程都是为了让小伙伴们从win32.MFC过渡到duilib,让大家觉得duilib不是那么陌生,如果大家现在还对duilib非常陌生的话,那就说明前面的教程做得不好,请大家在下面留言 ...
- easyui 数据库修改部分（基于数据添加逻辑功能修改）
{iconCls:'icon-edit',text:'修改', handler:function(){ type="edit"; //判断是否选中一条数据 var data = $ ...
- JavaScript知识 一、JS的数据类型
一.JS的数据类型 1.基本类型 JS共有5大基本类型,分别是: 1)Undefined.他只有一个值:undefined.如果一个变量被定义但是没有给他赋值,那么这个时候系统会默认给这个变量赋值为u ...
- TSQL语句
1.创建数据库create database test3;2.删除数据库drop database test3;3.创建表create table test( code varchar(20), ...
- 为 Neutron 准备物理基础设施（I） - 每天5分钟玩转 OpenStack（75）
前面讨论了 Neutron 的架构和基础知识,接下来就要通过实验深入学习和实践了. 第一步就是准备实验用的物理环境,考虑如下几个问题: 需要几个节点? 如何分配节点的角色? 节点上部署哪些服务? 配几 ...
- DOM-Element类型
Element类型 Element类型用于表现XML或HTML元素,提供了对元素标签名.子节点及特性的访问.Element节点具有以下特征: nodeType的值为1 nodeName的值为元素的标签 ...
- 理解brk和sbrk
brk和sbrk的定义 在man手册中定义了这两个函数: #include <unistd.h> int brk(void *addr); void *sbrk(intptr_t incr ...
- PHP过滤各种HTML标签
$str=preg_replace("/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i&q ...
- C语言 第五章 循环结构
一.for 请在屏幕上输出1000个*号 printf("*************************...."); #include "stdio.h" ...
- Cesium原理篇：7最长的一帧之Entity(下)
上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...