: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没有想象的那么简单,好玩的东西,还有很多,重点就在于你的想象力了,朋友,还有好多东西,等着你探索呢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏草根博客站长Live

Handsome 主题实现最新评论首页博客导航栏自动排第一功能

今天在【知言笔记】上看到了『Typecho实现每评论一次自动排第一功能』一文,终于算是实现了最新评论首页博客导航栏自动排第一功能的功能,一直很想用上这个功能,可...

14440
来自专栏腾讯音视频实验室

从HEVC到VVC:变换技术的演进(1)—— 主变换(Primary transform)

在视频编码标准过去三十多年的发展历程中,离散余弦变换(Discrete Cosine Transform,DCT)Type 2 (后面简称为DCT2)因其较低的...

43560
来自专栏Web技术布道师

CSS团队协作规范

手机开启网页很吃手机效能和网络状况,前端工程师一开始就以手机版为优先,可以让HTML一开始载入,使用最少的效能快速载入网页。当开始制作桌面版时,只会少许跑版,做...

8330
来自专栏腾讯云安全的专栏

瓜分19万奖金!CSS 2019腾讯安全探索论坛(TSec)开启议题报名通道

7月30日-31日,第五届互联网安全领袖峰会(CSS 2019)将在北京召开。作为CSS 2019主题论坛之一,以“前沿科技尖端对抗”为主题的第三届腾讯安全探...

20920
来自专栏草根博客站长Live

Typecho 的 Handsome 主题下谷歌 AdSense 广告错位修正

最近明月在 Handsome 主题“文章页脚广告位”广告位投放了谷歌 AdSense 的“匹配内容”广告样式,这种广告样式的匹配度和对用户的吸引力以及延长访问者...

17310
来自专栏腾讯音视频实验室

从HEVC到VVC:变换技术的演进(2)—— 二次变换(Secondary transform)

当前主流的视频编码标准(例如MPEG-2,H.264,VP9,AVS1等)均采用行列可分离的主变化(Separable primary transform)技术...

55130
来自专栏gojam技术备忘录

Pseudo elements伪元素与Pseudo classes伪类

::after用于描述处于css渲染层的一个伪元素,相当于选中元素的最后一个子元素,但这个元素与DOM节点无关,位于选择的元素之后,伪元素的内容用content...

9720
来自专栏gojam技术备忘录

CSS常用选择器

HTML: <element class="classname"></element>

12440
来自专栏程序员的知识天地

CSS基础知识(一)

在HTML中通过使用 <style> 标签引入CSS样式, <style> 标签用于为HTML文档定义样式信息; <style> 标签位于 <he...

16640
来自专栏角落的白板报

Asp.Net Core 中的环境变量-14

**开发环境:**我们的软件开发人员通常将此环境用于我们的日常开发工作。我们希望在开发环境中加载非缩小的 JavaScript 和 CSS 文件,以便于调试。类...

21530

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励