:before 和 :after的多用途实践 — 特效篇(3)
说明
上一篇,我们实现了,白光特效,这次,我们来实现几个有关按钮的特效!
按钮动画特效
效果图
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>button animation</title>
<style type="text/css">
a{
margin: 30px auto 0;
}
.animBtn{
position: relative;
display: block;
width: 180px;
height:40px;
line-height:40px;
border: 2px solid #ccc;
background:transparent; /* 背景色为透明色,让生成的背景能显示出来 这里可以随便换颜色*/
color: black;
text-align: center; /* 文本的采用居中对齐的方式 */
text-decoration: none; /* 标准的文本,没有文本装饰,主要是取消a标签的下划线 */
text-transform: uppercase; /* 元素中的文本全部转为大写 */
overflow: hidden;
transition:.3s ease;
}
/* 生成元素的背景 */
.animBtn:after{
content: "";
height: 0%;
width: 100%;
background:blue;
/* 这一小段是为了让生成的背景,始终水平居中和垂直居中 */
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%); /* 这句可以不写,后面在做鼠标悬停效果的时候,因为还需要transform其他值, 所以会再写一遍*/
z-index: -1; /* 取负值,置于底层 用来当做背景 */
transition: all .3s ease 0s;
}
/* 鼠标悬停,共有的效果 */
.animBtn:hover{
color: #fff;
text-shadow:7px 7px 2px #646464;
background: transparent; /*如果你想让生成的元素显示出来,而且上面你用的不是透明色,记得这里换透明色*/
line-height:34px;
border-color:blue;
}
/* 上下开 */
.animBtn.btnA:after {
transform: translateX(-50%) translateY(-50%);
}
/* 匹配鼠标悬停在元素上时,在元素之后插入的内容 */
.animBtn.btnA:hover:after {
height: 100%;
}
/* 左右开 向右旋转45度 */
.animBtn.btnB:after {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.animBtn.btnB:hover:after,.animBtn.btnC:hover:after{
height: 400%;
}
/* 左右开 向左旋转45度 */
.animBtn.btnC:after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
/* 圆形放大 */
.animBtn.btnD:after {
width: 0%;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
}
.animBtn.btnD:hover:after {
height: 500%;
width: 110%;
}
</style>
</head>
<body>
<a href="#" class="animBtn btnA">button a</a>
<a href="#" class="animBtn btnB">button b</a>
<a href="#" class="animBtn btnC">button c</a>
<a href="#" class="animBtn btnD">button d</a>
</body>
</html>
解释 这4个按钮的特效大同小异,一个一个说一下
按钮一
先利用 :after
伪元素生成一个块级元素,刚开始,这个块级元素的宽虽然是100%,但是它没有高,所以会看不到,然后利用定位 和 转换 让它始终居中,利用下面的代码实现
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
这样,后面在改变他的高度的时候,能保证距离父元素上下的距离一样,同时还给它加上z-index: -1;
这样它会在最底部显示,不会遮挡住要显示的文字,而父元素的背景为透明色,也保证了能正常显示生成的元素。
接着是实现效果.animBtn:hover
和 .animBtn.btnA:hover:after
这两个选择器下面写的就是了,分别是鼠标悬停在元素上会有的样式 和 鼠标悬停在元素上生成的元素会有的样式。
这次多说一句transition
,它使得CSS的属性值在一段时间内平滑过渡
具体参考
http://www.runoob.com/cssref/css3-pr-transition.html
按钮二
生成和实现效果,基本一样,只是多了向右旋转45度
transform: translateX(-50%) translateY(-50%) rotate(45deg);
这里有个小问题,要注意,就是别把这句拆开,写成这样
transform: translateX(-50%) translateY(-50%);
transform:rotate(45deg);
就覆盖了,就错了。
按钮三 能看明白按钮一和按钮二,你一定明白按钮三,只是换了个方向旋转
按钮四
这个效果重点是border-radius: 50%;
圆角,50%,如果是正方形就会变成圆形,如果是长方形就会变成椭圆。
总结
简单的理解这次的效果就是,生成一个元素当背景,让这个背景,漂亮的显示出来就行了,这是第三篇,讲用伪元素做特效了,而这些还远远只是比较简单的而已,我始终认为,CSS没有想象的那么简单,好玩的东西,还有很多,重点就在于你的想象力了,朋友,还有好多东西,等着你探索呢!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 解决集成jpa时无法创建entityManagerFactory的问题
- Spring船新版推出的WebFlux,是兄弟就来学我
- JDK9特性-Reactive Stream 响应式流
- Java函数式编程之Stream流编程
- 使用docker安装elasticsearch伪分布式集群以及安装ik中文分词插件
- PyQt5 技巧篇-如何让窗体只显示关闭按钮
- Gradle多项目构建与jar包发布
- Gradle初体验
- hexo初始化
- 容器部署Spring Cloud项目
- Python 爬虫篇-爬取网页中的图片,图片爬取实例演示。
- Python 爬虫进阶篇-4行代码实现爬取指定网站中的全部图片,深入剖析
- Python+selenium 自动化-基本环境搭建
- Java多线程与并发笔记
- Python 技术篇-pygame库实现播放音乐,带漂亮小界面!