摘月亮的小船儿

切换模式

鼠标点击爱心效果 ​

使用伪类:active和:hover来创建鼠标点击爱心效果。 ​

css
.heart {
    position: fixed;
    opacity: 1;
    scale: 3;
    width: 10px;
    height: 10px;
    background: red;
    transform: rotate(45deg);
}
.heart:after,.heart:before {
    content: "";
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: 50%;
    position: absolute;
}
.heart:after{
    top: -5px;
}
.heart:before {
    left: -5px;
}
.heart {
    position: fixed;
    opacity: 1;
    scale: 3;
    width: 10px;
    height: 10px;
    background: red;
    transform: rotate(45deg);
}
.heart:after,.heart:before {
    content: "";
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: 50%;
    position: absolute;
}
.heart:after{
    top: -5px;
}
.heart:before {
    left: -5px;
}

使用 @keyframes 添加动画效果。 ​

css
@keyframes move {
    100% {
        transform: translateY(-20px) rotate(45deg);
        opacity: 0;
    }
}
@keyframes move {
    100% {
        transform: translateY(-20px) rotate(45deg);
        opacity: 0;
    }
}

监听鼠标点击事件，添加动画效果。 ​

这段代码实现监听点击，并且在每次点击都创建一个爱心（div）在点击的位置，然后逐渐上浮消失，并且每次点击的颜色也是随机的。

javascript
window.onclick = function() {
    const heart = document.createElement("div")
    document.body.appendChild(heart)
    heart.classList.add("heart")
    heart.style.left = event.clientX + "px"
    heart.style.top = event.clientY + "px"
    heart.style.animation = "move 1s normal forwards"
    setTimeout(function () {
        document.body.removeChild(heart)
    },1000)
    heart.style.backgroundColor = "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")"
};
window.onclick = function() {
    const heart = document.createElement("div")
    document.body.appendChild(heart)
    heart.classList.add("heart")
    heart.style.left = event.clientX + "px"
    heart.style.top = event.clientY + "px"
    heart.style.animation = "move 1s normal forwards"
    setTimeout(function () {
        document.body.removeChild(heart)
    },1000)
    heart.style.backgroundColor = "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")"
};

内容参考自 秋水渡星河 点击跳转原文链接