java 按钮滑出效果_如何使用纯CSS实现从按钮两侧滑入元素的悬停效果(附源码)...

本篇文章给大家带来的内容是关于如何使用纯CSS实现从按钮两侧滑入元素的悬停效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

效果预览

e3364d19648445dee5b41b48859b61b3.gif

源代码下载

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器是一个无序列表,列表项代表按钮:

  • home

居中显示:body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background: linear-gradient(deepskyblue, navy);

}

去掉列表项前面的符号:ul {

padding: 0;

list-style-type: none;

}

设置按钮的文字样式:ul li {

color: #ddd;

font-size: 25px;

font-family: sans-serif;

text-transform: uppercase;

}

用伪元素在按钮的左侧增加一个方块:ul li {

position: relative;

}

ul li::before {

content: '';

position: absolute;

width: 100%;

height: 100%;

background: tomato;

left: -100%;

}

用伪元素在按钮的右侧增加一条下划线:ul li::after {

content: '';

position: absolute;

width: 100%;

height: 0.2em;

background: tomato;

bottom: 0;

left: 100%;

}

接下来设置鼠标悬停效果。

当鼠标悬停时,左侧的方块移到文字所在位置:ul li::before {

transition: 0.4s ease-out;

}

ul li:hover::before {

left: 100%;

}

右侧的下划线移到文字所在位置,它的动画时间延迟到方块的动画快结束时再开始:ul li::after {

transition: 0.3s 0.3s ease-out;

}

ul li:hover::after {

left: 0%;

}

同时,提高文字的亮度:ul li {

transition: 0.3s;

cursor: pointer;

}

ul li:hover {

color: #fff;

}

隐藏掉按钮外的部分,使方块和下划线在默认状态下都不可见,只有鼠标悬停时它们才从两侧入场:ul li {

overflow: hidden;

}

最后,在 dom 中再增加几个按钮:

  • home
  • products
  • services
  • contact

布局多个按钮:ul {

display: flex;

flex-direction: column;

align-items: center;

}

ul li {

margin: 0.5em;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值