ste*_*nny 2 html css geometry hover css-animations
我有一个圆圈,它的背景颜色设置为红色,我想在悬停时使用 css 动画更改其背景,我该怎么做?这是我的代码:
.circle{
background-color: red;
border-radius: 50px;
height: 100px;
width: 100px;
}Run Code Online (Sandbox Code Playgroud)
<html>
<body>
<div class="circle"></div>
</body>
</html>Run Code Online (Sandbox Code Playgroud)
对于使用 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;
} Run Code Online (Sandbox Code Playgroud)
<div class="circle"></div>Run Code Online (Sandbox Code Playgroud)