使用css動畫更改懸停的圓形背景

我有一個圓形，它的背景色設置爲紅色，我想改變懸停使用css動畫的背景我怎麼能做到這一點？這裏是我的代碼：使用css動畫更改懸停的圓形背景

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

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

來源

2017-04-06 stephjhonny

退房回答部分我JS提琴。希望它能幫助你。 –

你到目前爲止嘗試過什麼？請顯示您的努力並突出顯示您遇到的問題。 – Shaggy

@stephjhonny選擇正確的答案。 –

對於使用的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>

來源

2017-04-06 11:44:36

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

來源

2017-04-06 11:49:50

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/

來源

2017-04-06 11:51:26

使用css動畫更改懸停的圓形背景

回答

相關問題