Question

所以我正在使用这个UI，所以我决定尝试对其进行动画处理以使其从主要肖像圈中弹出，我唯一的问题是我无法终生获得这种径向渐变光滑。

整个问题来自于我想要左侧的边框半径倒置，以便在静止时与人像圈匹配。我看到了几种不同的方法来执行此操作，但是我相当业余，认为此径向渐变似乎是最简单的方法。但是，现在我留下了这个可怕的锯齿状边缘铲起的一面。

我研究了不同的渐变样式，而不是使用圆形，我尝试将头缠在“安德里亚斯·拉尔森（Andreas Larsen）”的“ easing linear gradients”帖子上，无济于事。

这是一个JSFiddle，仅显示必要的代码来显示UI，如果有人可以帮助的话，这对我来说比您知道的更有价值： https://jsfiddle.net/Infamoose/thj9305f/1/

编辑：：忽略所有闪烁的条形和图标，我要解决的是：P我只是想首先在径向渐变部分中设置麦克风图标。

.positive {
    color: rgb(114, 204, 114);
}

.negative {
    color: rgb(224, 50, 50);
}

.tempbg {
    background: solid;
    background-color: rgb(0, 122, 204);
}

.portrait {
    background-color: rgb(219, 12, 12);
    position: absolute;
    top: 34px;
    left: 10px;
    width: 120px;
    height: 120px;
    border-radius: 110px;
    z-index: 2;
}

.container {
    background-color: rgba(0, 0, 0, 0.288);
    position: absolute;
    top: 50px;
    left: 100px;
    width: 260px;
    height: 85px;
    border-radius: 50px;
    border-bottom-left-radius: 0%;
    border-top-left-radius: 0%;
    z-index: 1;
}

#heal, #armor, #hunger, #thirst, #stamina, #voice {
}

#boxHeal, #boxArmor, #boxStamina, #boxHunger, #boxThirst, #boxVoice {
    width: 100%;
    height: 100%;
    transition: 0.2s ease-in-out;
}

#heal {
    position: absolute;
    left: 40px;
    bottom: 68px;
    width: 120px;
    height: 10px;
    padding: 0;
    float:left;
}

#armor {
    position: absolute;
    left: 40px;
    bottom: 56px;
    width: 120px;
    height: 10px;
    padding: 0;
    float:left;
}

#hunger {
    position: absolute;
    left: 62px;
    bottom: 32px;
    width: 107.5px;
    height: 10px;
}

.iconhunger {
    position: relative;
    left: -40px;
    bottom: 10px;
    z-index: 3;
    align-content: left;
 }

#thirst {
    position: absolute;
    left: 22px;
    bottom: 61px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.iconthirst {
    position: relative;
    left: 0.5px;
    bottom: -34px;
    z-index: 3;
    align-content: left;
 }

#stamina {
    position: absolute;
    left: 62.5px;
    bottom: 11px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.iconstamina {
    position: absolute;
    z-index: 3;
    align-content: left;
    left: -20px;
    bottom: 6px;
 }

#voice {
    position: absolute;
    left: 148.5px;
    bottom: -500px;
    width: 107.5px;
    height: 10px;
    padding: 0;
    float:left;
}

.fa-microphone {
    position: inherit;
    z-index: 3;
    left: 57px;
    bottom: 525.5px;
    font-size: 38;
 }

.fa-microphonebg {
    position: absolute;
    top: -575px;
    left: -10px;
    width: 121px;
    height: 85px;
    background-image:
		radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px);
		border-top-right-radius: 40px;
		border-bottom-right-radius: 40px;
    z-index: 2;
}

#boxHeal {
    background: rgb(97, 191, 92);
    border: solid 0.3px rgb(97, 191, 92);
    border-radius: 30px;
}

#boxArmor {
    background: rgb(96, 136, 220);
    border: solid 0.3px rgb(96, 136, 220);
    border-radius: 30px;
}

#boxHunger {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10;
    bottom: 9.7px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxThirst {
    background:rgb(255, 255, 255);
    position: absolute;
    left: 30px;
    bottom: -32;
    border: solid 0.3px #ffffff;
    border-radius: 30px;

}

#boxStamina {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -10px;
    bottom: 5px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxVoice {
    background: rgb(255, 255, 255);
    position: absolute;
    left: -96px;
    bottom: -4px;
    border: solid 0.3px #ffffff;
    border-radius: 30px;
}

#boxVoice.active {
    background: rgb(235, 36, 39);
}

.position {
    font-family: "gta-ui", Verdana, Tahoma;
    font-size: 30px;
    position: absolute;
    bottom: 0.35%;
    left: 16%;
    text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000;
    color: #ffffff;
}

.seperator {
    color: rgb(224, 50, 50);
}

.seperator2 {
    color: rgb(240, 200, 80);
}

<html>
    <head>
        <title></title>
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link href="css/icono.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" href="https://icono-49d6.kxcdn.com/icono.min.css">
        <script src="https://kit.fontawesome.com/3f31cfc768.js"></script>
    </head>

    <body class="tempbg">
        <div class="portrait">
        </div>
        <div class="container">
            <div id="heal">
                <div id="boxHeal"></div>
            </div>
            <div id="armor">
                <div id="boxArmor"></div>
            </div>
            <div id="hunger">
                    <svg class="iconhunger" width="36" height="12" viewBox="0 0 14 12" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0)">
                        <path d="M9.44096 7.09788L12.0944 4.62314C13.9855 2.86906 14.0734 1.25095 13.9708 0.462298C13.9561 0.407908 13.9268 0.353518 13.8828 0.312725C13.7656 0.203945 13.5897 0.203945 13.4724 0.312725L12.6954 1.03339L2.94672 10.0893C2.62421 10.3885 2.62421 10.8916 2.94672 11.1907C3.26923 11.4899 3.81164 11.4899 4.13415 11.1907L4.33939 10.946C4.70588 10.4973 6.58232 7.98172 6.86086 7.58739C6.97813 7.42422 7.09541 7.32904 7.18337 7.28825C7.32997 7.23386 7.44724 7.30185 7.44724 7.30185C8.09227 7.65538 8.91321 7.58739 9.44096 7.09788Z" fill="white"/>
                        <path d="M4.95508 6.20047C5.49749 5.9965 5.86398 6.17327 6.09854 6.36364L6.86084 5.65657C6.65561 5.43901 6.46503 5.08547 6.68493 4.59596C6.99278 3.90249 7.242 3.45377 6.17184 2.37957C5.131 1.29176 3.4598 0.285548 2.68283 0.0679876C2.50692 0.027195 2.331 0 2.19906 0C2.1844 0 2.1844 0 2.16974 0C2.12577 0 2.09645 0.0135975 2.06713 0.0407925C1.99383 0.10878 1.99383 0.21756 2.06713 0.27195L4.70587 2.7195C4.83781 2.84188 4.83781 3.04584 4.70587 3.18182C4.57393 3.3042 4.35404 3.3042 4.20744 3.18182L3.89959 2.89627L3.21058 2.25719C2.69749 1.78127 2.36032 1.46853 2.03781 1.22378C1.26084 0.625486 0.95299 0.611888 0.95299 0.611888C0.95299 0.611888 0.835713 0.598291 0.733095 0.679876C0.645137 0.775058 0.659797 0.883838 0.659797 0.883838C0.659797 0.883838 0.674456 1.16939 1.33414 1.90365C1.59802 2.2028 1.93519 2.51554 2.44828 2.99145L3.13728 3.63054L3.44514 3.91608C3.57707 4.03846 3.57707 4.24242 3.44514 4.3784C3.3132 4.50078 3.0933 4.50078 2.94671 4.3784L0.307964 1.93085C0.234666 1.86286 0.117388 1.86286 0.0587496 1.93085C0.0294302 1.95804 0.0147705 1.98524 0.0147705 2.02603C0.0147705 2.02603 0.0147705 2.03963 0.0147705 2.05322C0.0147705 2.1756 0.0440899 2.33877 0.0880689 2.50194C0.307964 3.22261 1.40744 4.75913 2.58022 5.75175C3.73833 6.71717 4.20744 6.48601 4.95508 6.20047Z" fill="white"/>
                        <path d="M9.51434 7.737C9.1625 7.95456 8.73737 8.07694 8.29758 8.07694C8.03371 8.07694 7.78449 8.03614 7.53528 7.95456L10.6138 11.3539C11.0683 11.7619 11.7866 11.7619 12.2264 11.3539C12.6662 10.946 12.6662 10.2661 12.2264 9.85821L9.51434 7.737Z" fill="white"/>
                        </g>
                        </svg> 
                <div id="boxHunger">                           
            </div>
        </div>
            <div id="thirst">
                    <svg class="iconthirst" width="36" height="14" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3.74196 0.100677C3.72525 0.0356591 3.65843 -0.013104 3.57491 0.00315034C3.52479 0.0194047 3.49138 0.0519134 3.47467 0.100677C2.9067 4.55437 0 5.46462 0 8.5692C0.0501155 10.5035 1.68722 12.0476 3.67514 11.9989C5.61294 11.9664 7.16652 10.4385 7.19993 8.5692C7.21663 5.48087 4.30993 4.55437 3.74196 0.100677ZM3.19069 5.02575C3.15728 5.15579 3.10716 5.30207 3.07375 5.44836C2.82317 6.34235 2.52248 7.35013 2.52248 8.52044C2.52248 9.15436 2.13826 9.38192 1.77075 9.38192C1.35312 9.38192 1.01902 9.05683 1.01902 8.65048C1.01902 7.26885 1.70393 6.35861 2.30531 5.56215C2.48907 5.31833 2.67283 5.07451 2.82317 4.84695C2.88999 4.74943 3.00693 4.73317 3.10716 4.79819C3.12387 4.81444 3.14057 4.8307 3.15728 4.84695C3.19069 4.89572 3.20739 4.96073 3.19069 5.02575Z" fill="white"/>
                        </svg>
                <div id="boxThirst"></div>
            </div>
            <div id="stamina">
                    <svg class="iconstamina" width="36" height="12" viewBox="0 0 21 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H16C17.1046 0 18 0.89543 18 2V5.71428C18 6.81885 17.1046 7.71429 16 7.71429H2C0.895431 7.71429 0 6.81886 0 5.71429V2C0 0.895433 0.895429 0 2 0ZM2 1C1.44772 1 1 1.44772 1 2V5.71429C1 6.26657 1.44772 6.71429 2 6.71429H16C16.5523 6.71429 17 6.26657 17 5.71428V2C17 1.44772 16.5523 1 16 1H2ZM19.2857 2.54286C19.2857 2.32194 19.4648 2.14286 19.6857 2.14286C19.9066 2.14286 20.0857 2.32194 20.0857 2.54286V5.17143C20.0857 5.39234 19.9066 5.57143 19.6857 5.57143C19.4648 5.57143 19.2857 5.39234 19.2857 5.17143V2.54286ZM3.14286 2.14286C2.59057 2.14286 2.14286 2.59057 2.14286 3.14286V4.57143C2.14286 5.12371 2.59057 5.57143 3.14286 5.57143H9.14286C9.69514 5.57143 10.1429 5.12371 10.1429 4.57143V3.14286C10.1429 2.59057 9.69514 2.14286 9.14286 2.14286H3.14286Z" fill="white"/>
                        </svg>
                <div id="boxStamina"></div>
            </div>
            <div id="voice">
                <div class="fa-microphonebg">
                    </div>
                    <i class="fas fa-microphone"></i>                   
                <div id="boxVoice"></div>
            </div>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="js/app.js" type="text/javascript"></script>
</html>

Answer 1

您的问题就在这里：

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 50px);

您需要在透明层（rgba(0, 0, 0, 0)）和白色层（#fff）之间有一个分隔像素，此渐变曲线才能起作用：

radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);

应该解决您的问题。径向渐变非常棘手，尤其是当您尝试使用它们创建一些现成的形状时。：）

平滑的径向渐变边缘被卡住

1 个答案: