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的动效太好玩了,真的会上瘾的哦!
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文武科技柜!
共有 0 条评论