當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 52 豆豆

生活随笔收集整理的這篇文章主要介紹了 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'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套》

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️酷炫情人节爱心动画特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux6.5如何打开ftp服务,Ce
下一篇：基于Echarts+HTML5可视化数据