html5表白特效代碼大全

HTML5表白特效是一種浪漫又有趣的網頁設計元素，能夠為情侶們帶來不同尋常的浪漫體驗。下面是一些HTML5表白特效代碼大全。

// CSS3動畫實現心形擴散特效
.heart {
width: 50px;
height: 45px;
background: pink;
position: relative;
animation: heartbeat 1s ease-in-out infinite;
transform-origin: center;
}
.heart:before,
.heart:after {
content: "";
position: absolute;
background: pink;
border-radius: 50% 50% 0 0;
}
.heart:before {
top: -22.5px;
left: 0;
width: 25px;
height: 25px;
}
.heart:after {
left: 22.5px;
top: 0;
width: 25px;
height: 25px;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
20% {
transform: scale(0.9);
}
40% {
transform: scale(1);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
// JS實現文字打字機效果
var str = "我喜歡你，你會嫁給我嗎？";
var i = 0;
function typing() {
if (i<= str.length) {
document.getElementById("text").innerHTML = str.slice(0, i);
i++;
setTimeout(typing, 200);
}
}
typing();
// HTML5視頻背景+音樂播放器// CSS3實現閃閃發光的星星特效
.star {
width: 10px;
height: 10px;
background: transparent;
border-radius: 50%;
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px pink, 0 0 70px pink, 0 0 80px pink, 0 0 100px pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: twinkling 1s ease-in-out infinite;
}
@keyframes twinkling {
from {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #fff;
}
to {
box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px pink, 0 0 70px pink, 0 0 80px pink, 0 0 100px pink;
}
}