我有一个包含三个选项卡的网页。当屏幕尺寸为 <= 640px. My SCSS was doing that, but the styles aren't applying after moving folders. Right now, it only fades the content within it. I want the last tab to fade 30% on it's right.
时,我希望最后一个选项卡在右侧部分淡出我尝试使用模糊和渐变,但淡入淡出不适用于最后一个选项卡的轮廓,而仅适用于其中的内容。
```` @import '../../../样式/变量'; .tabs { 列表样式类型:无; 填充:0; 显示:柔性; 背景颜色:$universal-white-color; 边框半径:30px; 溢出:隐藏; } .tabs李{ 位置:相对; 左内边距:30px; 右内边距:30px; 顶部填充:10px; 底部填充:10px; 高度:40px; 保证金:1rem; 颜色:$primary; 文本对齐:居中; 显示:柔性; 对齐项目:居中; 调整内容:居中; 边框半径:30px; 轮廓:2px 实心$primary-border-color; 光标:指针; 过渡:背景颜色 0.3s 缓动; 不透明度:1; 弹性:1; 空白:nowrap; @media(最大宽度:1024px){ 左边距:10px; } @media(最大宽度:768px){ 余量:0.5rem; 内边距:10px 30px; } @media(最大宽度:640px){ 保证金:1rem; 左边距:0; 内边距:10 像素 25 像素; } } @media(最大宽度:640px){ .tabs li:第一个子项 { 左边距:10%; } .tabs li:last-child::after { 内容: ''; 位置:绝对; 前10名%; 右:0; 底部:-10%; 宽度:30%; 背景:$universal-white-color; 滤镜:模糊(4px); z 索引:1; } } .tabs li.active { 背景颜色:$primary; 颜色:$universal-white-color; } .tab:not(.active) { 背景颜色:$universal-white-color; 颜色:$primary; } .tabs li:悬停{ 背景颜色:$primary-hover-color; 颜色:$primary; } ````
我想要实现的目标看起来有点像这样: 当它第一次工作时,我在小屏幕上模糊了屏幕右侧的一部分。这将按照预期模糊最后一个选项卡右侧的 30%(文本、选项卡颜色及其轮廓)。
可能有帮助
<div id="overlay"></div>
#overlay{
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
cursor: pointer;
background-image: linear-gradient(to right, #f000 60%, yellow);
}