🍅 作者主页：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 / Happy Valentine'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>
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~！
打卡 文章 更新48/ 100天
精彩推荐更新中：
HTML5大作业实战案例《100套》
Java毕设项目精品实战案例《100套》
