1 回答

TA貢獻(xiàn)1891條經(jīng)驗(yàn) 獲得超3個(gè)贊
首先,fn()不是一種聲明函數(shù)的方法。您可以使用function()關(guān)鍵字聲明匿名函數(shù)。
position心的屬性設(shè)置為absolute。因此居中部分可以通過(guò)使用top和leftcss 屬性來(lái)管理。
下面是工作示例。
function heart() {
document.getElementById("heart").style.display = "block"
setTimeout(function(){ document.getElementById("heart").style.display = "none"}, 3000);
}
#stickycat {
position: fixed;
bottom:10px;
right: 10px;
width:100px;
height:100px;
border-radius:50%;
border: solid 4px rgba(54, 215, 183, 1);
background-color:white;
text-align:center;
box-shadow: 1px 1px 10px rgba(54, 215, 183, 1), -1px 1px 10px rgba(54, 215, 183, 1), -1px -1px 10px rgba(54, 215, 183, 1), 1px -1px 10px rgba(54, 215, 183, 1);
}
#stickycat img {
max-width:100%;
max-height:100%;
z-index:2;
border-radius:50%;
}
#heart {
animation: pulse 2s linear infinite;
position:absolute;
top: 25px;
left: 25px;
width:50px;
height:50px;
display:none;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
<div id="stickycat" onclick="heart()">
<img src="https://i.pinimg.com/originals/9d/b1/3f/9db13f4f06bfa1600e970fd32f1851db.gif">
<img id="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Heart_coraz%C3%B3n.svg/1200px-Heart_coraz%C3%B3n.svg.png">
</div>
添加回答
舉報(bào)