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

【问题标题】：Change circle background on hover using css animation使用 css 动画更改悬停时的圆形背景
【发布时间】：2017-09-01 10:00:53
【问题描述】：

我有一个圆圈，它的背景颜色设置为红色，我想使用 css 动画更改悬停时的背景，我该怎么做？这是我的代码：

.circle{
  background-color: red;
  border-radius: 50px;
  height: 100px;
  width: 100px;
  }

<html>
<body>
<div class="circle"></div>
</body>
</html>

【问题讨论】：

在答案部分查看我的 js fiddle。希望对你有帮助。
到目前为止你尝试过什么？请展示您的努力并突出您遇到的问题。
@stephjhonny 选择正确答案。

标签： html css hover css-animations geometry

【解决方案1】：

要使用 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;
  }

&lt;div class="circle"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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;
}

希望这能解决问题。

https://jsfiddle.net/Lijin/06cwf3wq/2/

【讨论】：

【解决方案3】：

.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>

【讨论】：