원이 그 배경색이 빨간색으로 설정되어 있습니다. 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;
}
희망이 문제를 해결합니다.
답변 섹션에서 jj 바이올린을 확인하십시오. 그것이 당신을 돕기를 바랍니다. –
지금까지 어떤 시도를 했습니까? 노력을 보여 주시고 귀하가 겪고있는 문제를 강조하십시오. – Shaggy
@stephjhonny 정답을 선택하십시오. –