#1-连结Hover动起来！(CSS 伪元素)

网站必备！连结动态

连结的Hover动态算是网页动态最基本款，
一个好的动态绝对可以帮网页 点击率（CTR） 加分。

(话说当时菜鸟的我根本不知道什麽是hover...
如果可以很贴心地跟非工程师的对方解释一下，你就是贴心百分百啦！)

简单一点换个颜色、调整一下opacity，
但今天想用伪元素来做 3个 Hover的连结动态！

先看一下成果：

提案1.简单大方的线框特效	提案2: 喝酒醉的文字换色	提案3:有点霸气的，文字背景变变变

下面会先废话一下transition，想看成果的可以下滑到code喔！

再懒也要加 CSS transition 香料

就算是再懒也要加上 CSS transition...
Transition 是两个不同状态间切换时，渐变地过度，让转换不会太突兀。

有渐变	无渐变

上述的程序码都一样，但差一行code: transition: 0.3s。
就会让两者的变换间变得很香很高级。

就好像你很想知道眼前的正妹到底有没有男朋友：

无渐变的?：你现在有男友吗？
有渐变的?：跟我出来你男友会吃醋吧？（油油的说法）
有渐变的?：跟我出来你男友会不会担心？（好像很贴心)

(很烂的比喻?)

transition 详细用法也可看这边的铁人：这里

基础设定：CSS 伪元素 :before & :after

我个人超爱伪元素，就是你不用付出一行html code就可以凭空多出东西来。
接下来要做的动态都有基本设定：

a{
  color: white; //我文字先用白的，背景黑
  text-decoration: none; //先把浏览器预设丑东西弄掉
  position: relative; //让伪元素的absolute有个对应的位置
  transition: 0.5s; //香料加起来！
  
  &:before, &:after {
    content: ''; //伪元素里面的内容先设空的
    position: absolute; //先让伪元素飞起来！之後设定定位就随心所欲
    transition:.3s; //香料加起来！我让他比爹地 a 快一点
  }
}

下面的范例用before/after 我是随性选一个 XD
因为使用position absolute都让他飞起来了。

提案1.简单大方的线框特效

使用：CSS( transition & 伪元素、transform)
原理：放大缩小

直接上code

.effect-1{
  &:before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;//线的粗度
    background: white; //线的颜色
    transform:  scale(0); //先让他隐藏, scale的意思就是让他放大缩小
  }
  &:hover:before {
    transform:  scaleX(1);//hover时候再让它出现
  }
}

transform 的起点预设是中间，就可以很漂亮地从中间展开一条直线！
上面想要再一条线的话就可以运用另一个伪元素:after 去做。

提案2: 喝酒醉的文字换色

使用：CSS( transition & 伪元素、width)
原理：放大缩小(变宽)

伪元素的content是可以直接读取html里面元素自订的内容。所以这次我们的伪元素变成了一样的文字盖在上面长出来而已。

//html 
//用data-content去定义伪元素要呈现什麽内容
<h1><a href="#" class="effect-2" 
data-content="Hover Effect 2">
	Hover Effect 2
</a></h1>

//scss
.effect-2{
  &:after{
    content: attr(data-content);// 读取html元素要显示什麽
    left: 0;
    top: 0;
    width: 0%; //想要让他横的长出来，所以先设0
    height: 100%;//先给高

		//我这次想要华丽～gradient color的文字
    background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
	  -webkit-background-clip: text; //背景要显示在哪里
	  -webkit-text-fill-color: transparent;//中间给他挖空啦才能有背景颜色
	  }

	  &:hover:after{
      width: 100%;//hover时候我就给他横空出世～s
    }
}

提案3:有点霸气的，文字背景变变变

使用：CSS( transition & 伪元素、width)
原理：放大缩小(变宽)

.effect-3{
  &:after{
    top: 0%;
    left: 0;
    width: 0%;
    height:100%;
    background: -webkit-linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
    z-index: -1; //把他压下去
    }
 
  &:hover{ 
    color: black;
    transition-delay: 0.1s; //让他晚一点点出来，不然会有瞬间是黑的

      &:after {
      top: 0;
      width: 100%    
    }
  }
}