CSS学习记录01：链接背景悬浮效果

阿斌闲来无事网上冲浪学习CSS，然后MDN推荐了一个在线写代码的平台 glitch，然后打开首页，发现首页的链接挺好玩，鼠标放上去下划线就往上走，直到变成文字的背景颜色。

对于阿斌一个学过前端，而干的不是前端的菜鸟来说，这个效果还是有点难度的。

阿斌通过多年的F12大功和Ctrl C、Ctrl V 神功再加上 google 大法，终于完成了这个小项目，感觉又学到了不少新知识，开心😄

下面贴上我写的代码，写的不好勿喷，本人只是一个菜鸟。

演示效果，点它

Html内容

只简单写了一个链接，绝对够看效果的了。

我是一个<a href="#">Hello World</a>

Css内容

Css内容里写了详细的注释，一来方便自己回顾学习，而来方便大家学习，共勉。

a{
  text-decoration: none;
  color: #000;
  /* 
  transition（过渡效果）：transition-property（过渡属性的名称） transition-duration（过渡动画所需的时间，默认值为 0s ，表示不出现过渡动画。） transition-timing-function（加速度曲线，用于描述中间的变化过程） transition-delay（动画过渡效果将在何时开始） 

  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition
  */
  transition: color 600ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
  /*
  relative（相对定位元素）：未脱离文档流，不影响页面布局的情况下，改变位置

  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position
  */
  position: relative;
  /* 
  设置元素的优先级，数字越大，优先级越高，显示越靠前

  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index
  */
  z-index: 1;
  transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s;
}

a:hover{
  color: #fff;
}

a:hover::before{
  background-color: rgb(255, 118, 152);
  height: 100%;
  transform: none;
}

/*
  ::before（伪元素）：匹配选中的元素的第一个子元素
  content 为伪元素的内容，有内容的话，会显示选中元素的前面
*/
a::before{
  content: "";
  /*
  scale(sx,sy)：用于放大和缩小元素
  sx：为缩放横坐标，可以理解为缩放元素的宽度，可以直接写为：scaleX()
  sy：为缩放纵坐标，可以理解为缩放元素的高度，可以直接写为：scaleY()
  */
  transform: scaleY(0.3);
  /*
  transform-origin：改变元素变形的原点
  详细可看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin
  */
  transform-origin: center bottom;
  background-color: rgb(255, 118, 152);
  /*
  absolute(绝对定位元素):脱离文档流，在布置文档流中其它元素时，绝对定位元素不占据空间。
  */
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 40%;
  z-index: -1;
  transition: transform 120ms cubic-bezier(0.23, 1, 0.32, 1) 0s, background 120ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
}

总结

之前看别人好看的页面，阿斌都是复制大法，改为自己写样式，才发现原来有这么多不会的，简直就是眼高手低的活例子。

通过这个小项目，阿斌学到不少新知识，特别是css的动效太好玩了，真的会上瘾的哦！