HTML+CSS+JS实现酷炫情人节爱心动画

·  阅读 1664

「这是我参与2022首次更文挑战的第20天,活动详情查看:2022首次更文挑战

临近期末了, 你还在为HTML网页设计结课作业,网页要求的总数量太多?老师的作业要求感到头大?没有合适的模板?HTML网页作业无从下手?等等一系列问题。你想要解决的问题,在专栏这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 旅游、 电商、 宠物、 电器、 茶叶、物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 A+水平作业、其他等网页设计题目,, 可满足大学生网页大作业网页设计需求都能满足你的需求。web大学生网页设计作业源码,原始HTML+CSS+JS页面设计, 这是一个不错的# HTML+CSS+JS实现# # 酷炫情人节爱心动画特效计制作,画面精明简单使用  

 效果演示如下: 

image.png

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&#39;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>
复制代码

 打卡 文章 更新  199 /  100天、需要源码主页获取

大家可以点赞、收藏、关注、评论我啦 !

在这里插入图片描述

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改