濮阳家电网站建设,百度信息流广告怎么收费,wordpress小蜜蜂插件,重庆触摸屏 电子商务网站建设#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 … 作者主页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 langenheadmeta charsetUTF-8title#53 in 2021 / Happy Valentine#39;s Day - Canvas JavaScript/titlelink relstylesheet hrefcss/style.css/headbodycanvas idc/canvash1spanHappy/spanbr/spanValentines/spanbr/spanDay/span/h1h2Give me a chocolate :)/h2script srcjs/script.js/script/body/html 源码获取 大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~ 打卡 文章 更新 48 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
