与透明背景
问题描述:
边界半径梯度我有这个简单的CSS微调,在这里:与透明背景
html {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes k__common-spin-cw {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.wd-spinner {
height: 30px;
width: 30px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.15);
border-width: 2px;
border-radius: 100%;
border-top-color: #00ba8c;
-webkit-animation: k__common-spin-cw 700ms linear infinite;
animation: k__common-spin-cw 700ms linear infinite;
}
<div class="wd-spinner"></div>
是否有可能与边界半径渐变边框,而不是具有突出显示的border-top
的尾部突然结束,使其渐变渐变渐变,同时保持背景透明?
答
我已经删除了动画并增加了尺寸以使效果更易于看到。
使用伪,我添加了一个与边界相同颜色的阴影来创建淡入淡出效果。
上div和隐藏的溢出哈弗将被应用,设置最后的效果
html {
background: black;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.wd-spinner {
height: 200px;
width: 200px;
border-radius: 100%;
position: relative;
}
.wd-spinner:hover {
overflow: hidden;
}
.wd-spinner:after {
content: "";
position: absolute;
height: 196px;
width: 196px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.15);
border-width: 2px;
border-radius: 100%;
border-top-color: #00ba8c;
}
.wd-spinner:before {
content: "";
position: absolute;
height: 196px;
width: 196px;
top: 2px;
left: 2px;
border-radius: 100%;
box-shadow: -40px -40px 70px -22px #00ba8c;
}
<div class="wd-spinner"></div>
也就是说真棒,但反正是有保持敏感?我希望能够毫不费力地改变微调框的大小。 –
不幸的是,如果您想要全面的浏览器支持,并且box-shadow不支持百分比,则只能通过box-shadow实现。您可能的解决方法是:1)指定em的长度并更改字体大小2)在变换中应用比例 – vals