🍅 作者主页：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>源码获取
大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方
本文链接：http://m.zhangshiyu.com/post/29813.html
- 见死不救好评_苏晓晓杨华刘苏免费阅读_小说后续在线阅读_无删减免费完结_
- 夫君停妻另娶挚友遗孀后，我杀疯了高分神作_贺朝小柔灵堂免费赏析_小说后续在线阅读_无删减免费完结_
- 重生1980：开局迎娶姐姐闺蜜小说(李毅唐雪)小说结尾+隐藏篇章（重生1980：开局迎娶姐姐闺蜜）畅享阅读
- 飞雪漫迷雾(温晚晴沈墨川)（飞雪漫迷雾）前传+阅读全新作品预订