HTML+CSS+JS实现 ❤️酷炫情人节爱心动画特效❤️
生活随笔
收集整理的這篇文章主要介紹了
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
- 下一篇： 2017年html5行业报告,云适配发布