サークルの背景色が赤に設定されています。その背景をCSSアニメーションを使用して変更したいのですが、どうすればいいですか？CSSのアニメーションを使用してホバーのサークルの背景を変更する
.circle{
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
}<html>
<body>
<div class="circle"></div>
</body>
</html>以下のコードを使用してみてください、CSSアニメーションを使用して色を変更する： はここに私のコードです。
.circle
{
border-radius: 50px;
height: 100px;
width: 100px;
background: linear-gradient(to right, blue 50%, red 50%);
background-size: 200% 100%;
background-position: right bottom;
transition: all 2s ease;
}
.circle:hover {
background-position: left bottom;
}<div class="circle"></div>.circle{
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
}
.circle:hover{
background-color: green;
transition: all 0.5s ease;
background-position: left bottom;
}<html>
<body>
<div class="circle"></div>
</body>
</html>HTML
<div class="circle"></div>
CSS
.circle {
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
position: relative;
overflow: hidden;
}
.circle:after {
width: 0;
height: 100%;
position: absolute;
left: 0;
transition: all ease 0.5s;
content: "";
background-color: blue;
}
.circle:hover:after {
width: 100%;
transition: all ease 0.5s;
}
は、この問題を解決することを願っています。
回答セクションでの私のjsバイオリンをチェックしてください。それがあなたを助けることを願う。 –
これまでに何を試しましたか？あなたの努力を示し、あなたが抱えている問題を強調してください。 – Shaggy
@stephjhonny正しい答えを選択してください。 –