🍅 作者主页：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
<< 上一篇
下一篇 >>