转载 【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> ---- ...
随机推荐
- Java集合类的总结
Java语言的java.until包中提供了一些集合类,这些集合类又被称为容器.说到集合就会想到数组,集合类与数组的不同之处是,数组的长度是固定的,集合的长度是可变的:数组用来存放基本数据类型,集合从 ...
- SQL注入
@org.junit.Test public void testLogin() { CardDAO cd=new CardDAO(); if(cd.dengru("' or 1 = 1--& ...
- JAVA集合
为了保存数量不确定的数据或者提供映射关系的数据,Java提供了集合类,也称作集合类,Collection和Map分别为两个根接口.两个接口体系的继承系如下图 (图片来源于网络) Collection接 ...
- 3D旋转菜单
今天来个3D旋转菜单,是纯css3实现的,主要用到transform,transition,backface-visibility. 主要是transform这个变换,它是今天猪脚. transfor ...
- OpenCASCADE BRepTools
OpenCASCADE BRepTools eryar@163.com Abstract. OpenCASCADE BRepTools provides utilities for BRep data ...
- Textbox.Visible=False隐藏方式导致的问题
今天公司的正式环境有个功能不好使,但是测试环境没有问题,经过和同事的研讨,发现应该是我在写代码的时候把Textbox的visible属性设置为false导致的. 当时的需求是需要在发邮件的时候加上“相 ...
- js的作业题
<script type="text/javascript"> //var a=3; //switch(a) // { // case 1: // alert(&quo ...
- Vagrant使用
常用命令 命令 说明 vagrant up 运行vm vagrant status 查看当前虚拟机运行状态 vagrant suspend 暂停虚拟机 vagrant ssh ssh方式登录虚拟机 v ...
- iOS开发之多图片无缝滚动组件封装与使用
经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播.没看过其他iOS图片无限轮播 ...
- ELF动态链接
为什么要使用动态链接? 在现代的linux系统中,假设一个普通的程序会使用到c语言静态库至少1MB以上,那么,如果我们的机器运行100个这样的程序,就用浪费近100MB的内存:如果磁盘有2000个这样 ...