我有一个下拉菜单,其中溢出文本是渐变的。过渡应用于选择的包装器,但现在它悬停时看起来有点奇怪。我怎样才能让它看起来更好?
html 片段:
<div class="durationDropdown">
<select role="listbox" class="durationSelect">
<option value="0">Less than 1 month</option>
</select>
</div>
CSS 片段:
.container {
width: 150px;
}
.durationDropdown {
padding: 0px;
flex: 1;
text-align: left;
position: relative;
cursor: pointer;
height: 5.1875rem;
transition: 250ms;
border: 1px solid #eee;
}
.durationDropdown::after {
content: "";
display: block;
width: 40px;
top: 0%;
right: 0;
height: 100%;
position: absolute;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 63%);
pointer-events: none;
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
background: none;
}
.durationDropdown:hover {
background: black;
}
这是我的 fiddle您可以在其中查看它的外观以及 fiddle 中其余的 css。任何帮助/建议都会很棒!
最佳答案
恐怕您无法向渐变添加过渡,请在此处查看详细信息 Use CSS3 transitions with gradient backgrounds .
您真正看到的是“颜色”属性的平滑变化,而不是渐变过渡。如果你想用渐变隐藏句子的一部分并在其上平滑过渡,你可以这样做:
- 向“durationDropdown::after”元素添加过渡并替换“背景:无;”通过“不透明度:0;”像这样:
.durationDropdown::after {
...
transition: 250ms opacity ease-in-out;
...
}
.durationDropdown:hover::after,
.durationDropdown:active::after {
/* background: none; */
opacity: 0;
}
关于css - 文本溢出渐变 - 悬停关闭时过渡不平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55247271/