使用 css 动画更改悬停时的圆形背景

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)

Wis*_*zer 5

对于使用 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)