:before 和 :after的多用途实践 — 特效篇（3）

FEWY

已于 2024-04-06 21:32:43 修改

阅读量821

点赞数 1

分类专栏： CSS 前端简单说文章标签：动画 css 伪元素特效 after

于 2017-05-26 12:36:35 首次发布

本文链接：https://blog.youkuaiyun.com/FE_dev/article/details/72765447

版权

前端简单说同时被 2 个专栏收录

45 篇文章

订阅专栏

CSS

17 篇文章

订阅专栏

说明

上一篇，我们实现了，白光特效，这次，我们来实现几个有关按钮的特效！

按钮动画特效

效果图
这里写图片描述

代码

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