使用 css 动画更改悬停时的圆形背景
Posted
技术标签:
【中文标题】使用 css 动画更改悬停时的圆形背景【英文标题】：Change circle background on hover using css animation 【发布时间】：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 选择正确答案。 【参考方案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;
<div class="circle"></div>【讨论】：
【参考方案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>【讨论】：
以上是关于使用 css 动画更改悬停时的圆形背景的主要内容，如果未能解决你的问题，请参考以下文章