使用径向渐变时如何去除锯齿状边框 [英] How to remove jagged border when using radial-gradient
本文介绍了使用径向渐变时如何去除锯齿状边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我发现CodePen上的这个漂亮的按钮可以使按钮颜色产生波纹效果,使用径向渐变动画.
I found this nice button on CodePen that inverts the button color with a ripple effect, using a radial-gradient animation.
我需要它具有 28px
边框半径,但随后出现锯齿状边框,如图所示此处.
I need it to have a 28px
border radius, but then a jagged border appears as shown here.
html {
box-sizing: border-box;
height: 100%;
font-size: 10px;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #57bd84;
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
input[type=checkbox]:checked + label:after {
transform: scale(4.2);
}
label {
outline: none;
user-select: none;
color: #000;
font-family: 'Lato', sans-serif;
font-size: 2.5rem;
letter-spacing: 0.04rem;
padding: 1.5rem 3rem;
cursor: pointer;
border-radius: 28px;
border: 0.3rem solid #000;
background: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 3px 0 0 #000;
}
label::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: scale(0);
transition: transform 0.3s ease-in;
mix-blend-mode: difference;
background: radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%);
}
label:active {
top: 3px;
box-shadow: none;
}
<input type="checkbox" id="cb1" /><label for="cb1">Toggle me</label>
推荐答案
我将使用其他伪元素来做不同的操作,在该伪元素中,我将具有边框以避免这种不良影响.我还将用background-size
效果
I would do it differently using the other pseudo element where I will have the border to avoid this bad effect. I will also replace the scale transition with a background-size
effect
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #57bd84;
margin:0;
}
input[type=checkbox] {
height: 0;
width: 0;
visibility: hidden;
}
label {
outline: none;
user-select: none;
color: #000;
font-family: 'Lato', sans-serif;
font-size: 2.5rem;
letter-spacing: 0.04rem;
padding: 1.5rem 3rem;
cursor: pointer;
border-radius: 28px;
background: #fff;
position: relative;
}
label::before,
label::after{
content: '';
position: absolute;
border-radius: inherit;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
label::after {
border:3px solid #000;
box-shadow:0 3px 0 0 #000;
}
label::before {
mix-blend-mode: difference;
background:
radial-gradient(circle at center, #fff 24%, #000 25%, #000 100%)
center/0% 0% no-repeat;
transition: background-size 0.3s ease-in;
}
input[type=checkbox]:checked+label:before {
background-size:400% 400%;
}
label:active {
transform:translateY(3px);
}
label:active::after {
box-shadow:0 0 0 0 #000;
}
<input type="checkbox" id="cb1" /><label for="cb1">Toggle me</label>
这篇关于使用径向渐变时如何去除锯齿状边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文