懸停時我的圖標出現問題。我想img src在懸停時替換我的：這是到目前為止我的代碼：#aks { width: 0px; max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: url("https://img.icons8.com/windows/32/000000/like.png") no-repeat; padding: 50px;}#aks:hover { background: url("https://img.icons8.com/officexs/32/000000/like.png") no-repeat; max-height: 500px; transition: max-height 0.25s ease-in;}<img id="aks" src="https://img.icons8.com/windows/32/000000/like.png" />我真正想要實現的是，當懸停在輪廓心形圖標上時，將替換為心形填充圖標，但在替換輪廓圖標期間，它將從底部高度 0 到全高顯示/動畫，因此看起來像是填充了輪廓圖標。這里有一些例子：codepen除此之外的任何替代方案或解決方案都受到高度贊賞。提前致謝！
3 回答
慕的地8271018
TA貢獻1796條經驗 獲得超4個贊
這對于僅使用 CSS 的心臟來說并不是特別容易，因為滑動動畫必須應用于三個完全不同的元素（旋轉的正方形，加上兩個圓圈）。
為了完整起見，這里是一個使用包含心形的字體的示例。為簡單起見，我使用了 Webdings，但您應該在實際的實時代碼中使用 Font Awesome。
摘要是您的背景是 2 倍高的漸變，即 50% 白色和 50% 紅色，并且您將背景從顯示白色一半滑動到懸停時顯示紅色一半。它的兩個重要屬性目前僅適用于 webkit 瀏覽器：text-stroke，將輪廓添加到文本中 - 以及，剪輯背景background-clip的非文本部分。span
span {
background-size: 100% 200%;
background-image: linear-gradient(to bottom, white 50%, red 50%);
color: transparent;
font-family: webdings;
font-size: 200px;
transition: background-position 2s;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke-width: 5px;
-webkit-text-stroke-color: red;
text-stroke-width: 5px;
text-stroke-color: red;
}
span:hover {
background-position: 0 100%;
}
<span>Y</span>
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
好吧，如果css您可以選擇使用，那么您可以看看這個：
.heart {
background-color: red;
height: 30px;
width: 30px;
transform: rotate(-45deg);
transition: background-color 1s;
}
.heart::before,
.heart::after {
content: '';
background-color: red;
height: 30px;
width: 30px;
border-radius: 50%;
position: absolute;
transition: background-color 1s;
}
.heart::before {
top: -15px;
}
.heart::after {
left: 15px;
}
.heart:hover,
.heart:hover::before,
.heart:hover::after {
background-color: #F5A9AE;
}
body {
display: flex;
height: 100vh;
}
.heart {
margin: auto;
}
<div class="heart"></div>
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
您可以使用背景動畫來做到這一點，如下所示：
.heart {
width: 50px;
height:50px;
padding-top:50px;
background:
url("https://img.icons8.com/officexs/32/000000/like.png") bottom padding-box content-box,
linear-gradient(#fff,#fff) bottom padding-box content-box,
url("https://img.icons8.com/windows/32/000000/like.png");
background-size:100% 100%;
background-repeat:no-repeat;
box-sizing:border-box;
transition:0.5s;
}
.heart:hover {
padding-top:0;
}
<div class="heart"></div>
- 3 回答
- 0 關注
- 147 瀏覽
添加回答
舉報
0/150
提交
取消