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
    评论
可以使用CSS3中的伪类和过渡属性来实现滑动按钮效果。以下是一个简单的实现示例: HTML代码: ```html <label class="switch"> <input type="checkbox"> <span class="slider"></span> </label> ``` CSS代码: ```css .switch { position: relative; display: inline-block; width: 60px; height: 34px; } .switch input[type="checkbox"] { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } ``` 解释: - `.switch`类设置了开关按钮的基本样式,包括宽高、定位等。 - `input[type="checkbox"]`选择器隐藏了原生的复选框。 - `.slider`类设置了按钮的背景色、过渡效果等。 - `.slider:before`伪类设置了按钮内部的小圆点,以及其过渡效果。 - `input:checked + .slider`选择器设置了按钮选中时的背景色。 - `input:focus + .slider`选择器设置了按钮获取焦点时的阴影效果。 - `input:checked + .slider:before`选择器设置了按钮选中时,内部小圆点的位移效果。 - `.slider.round`和`.slider.round:before`类用于设置圆形按钮的样式,可根据需要选择使用。 这样就可以实现一个简单的滑动按钮效果了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值