gpt4 book ai didi

jquery - 按钮上的 CSS 过渡

转载 作者:搜寻专家 更新时间:2023-10-31 22:12:59 25 4
gpt4 key购买 nike

我正在开发一个按钮,它可以在悬停时更改背景颜色和颜色 CSS 属性。基本的东西。

<span>Contact me</span>

.contact-right span{
background-color: #fff;
color: #f87f73;
padding: 0px 25px;
border: 5px solid #f87f73;
}

.contact-right span:hover{
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}

这不是很好,我看到过渡效果很流畅,背景颜色和颜色也很流畅。但我想要一个特殊的东西,通过它从按钮的左到右进行过渡。我的意思是过渡不应该一次性作用于整个按钮,它应该从左边滑入,从​​左到右改变背景颜色和文本颜色。

我该如何实现?可以通过 CSS 实现吗,还是我必须以某种方式使用 Jquery?

最佳答案

我希望这是你想要的..

DEMO

.contact-right span{
background-color: #fff;
color: #f87f73;
padding: 0px 25px;
border: 5px solid #f87f73;
display: block;
background-image: linear-gradient(to left,
transparent,
transparent 50%,
#00c6ff 50%,
#00c6ff);
background-position: 100% 0;
background-size: 200% 100%;
transition: all .25s ease-in;

}

.contact-right span:hover{
background-position: 0 0;
background-color: #f87f73;
color: #fff;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}

Source

关于jquery - 按钮上的 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25970512/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com