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

斌仔 分类:
文章字数 414 字 阅读时间 5 分钟
🤖 由 Gemini 生成的文章摘要
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结

阿斌闲来无事网上冲浪学习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的动效太好玩了,真的会上瘾的哦!

非常感激每一位打赏的朋友!

支付宝扫码支持
微信扫码支持

扫一扫,请博主喝咖啡☕

文章作者: 斌仔
文章链接: https://www.wangdu.site/course/1130.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文武科技柜

相关推荐

共有 0 条评论