だから私はこのUIに取り組んでいて、メインのポートレートサークルから飛び出すようにアニメーション化しようと決心しました.私の唯一の問題は、一生この放射状グラデーションを滑らかにすることができないことです
全体の問題は、静止したときにポートレートサークルと一致するように、左側に反転したボーダー半径が必要であることから来ています。これを行うためのいくつかの異なる方法を見ましたが、私はかなり素人で、この放射状グラデーションが最も簡単な方法のように思えました。しかし、今では、この恐ろしいギザギザのエッジがすくわれた側が残っています.
円を使用する代わりにさまざまなグラデーション スタイルを見て、「Andreas Larsen の」「線形グラデーションの緩和」の投稿に頭を悩ませようとしましたが、役に立ちませんでした。
これは、UIを表示する必要なコードのみを含むJSFiddleです。誰かがそれを支援できれば、あなたが知っているよりも価値があります:)
編集:すべての不安定なバーとアイコンを無視して、修正しています: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>