HTML+CSS+JS实现 ❤️酷炫情人节爱心动画特效❤️

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

* {margin: 0;padding: 0;list-style-type: none;
}body {font-family: sans-serif;background: #000;font-size: 67.5%;color: #ff1493;
}canvas {z-index: 0;display: block;position: fixed;top: 0;left: 0;height: 100%;width: 100%;
}h1 {z-index: 2;position: fixed;font-size: 2.4rem;top: 5%;left: 5%;line-height: 3.2rem;
}h2 {position: fixed;bottom: 5%;right: 5%;text-align: right;font-size: 1rem;opacity: 0;
}span {position: absolute;opacity: 0;
}.delay:nth-of-type(1) {-webkit-animation: span-animation-1 1s linear 2s 1 normal forwards;animation: span-animation-1 1s linear 2s 1 normal forwards;
}.delay:nth-of-type(2) {-webkit-animation: span-animation-2 1s linear 2.4s 1 normal forwards;animation: span-animation-2 1s linear 2.4s 1 normal forwards;
}.delay:nth-of-type(3) {-webkit-animation: span-animation-3 1s linear 2.8s 1 normal forwards;animation: span-animation-3 1s linear 2.8s 1 normal forwards;
}.delay:nth-of-type(4) {-webkit-animation: span-animation-4 1s linear 3.2s 1 normal forwards;animation: span-animation-4 1s linear 3.2s 1 normal forwards;
}@-webkit-keyframes span-animation-1 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@keyframes span-animation-1 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@-webkit-keyframes span-animation-2 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@keyframes span-animation-2 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@-webkit-keyframes span-animation-3 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@keyframes span-animation-3 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@-webkit-keyframes span-animation-4 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@keyframes span-animation-4 {0% {transform: translateY(20px);opacity: 0;}100% {transform: translateY(0);opacity: 1;}
}@media (min-width: 500px) {h1 {font-size: 4rem;line-height: 4.8rem;}
}

HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>#53 in 2021 / Happy Valentine&#39;s Day - Canvas JavaScript</title><link rel="stylesheet" href="css/style.css"></head><body><canvas id="c"></canvas><h1><span>Happy</span><br/><span>Valentine's</span><br/><span>Day</span></h1><h2>Give me a chocolate :)</h2><script src="js/script.js"></script></body></html>