教你如何制作浪漫的表白网站七夕情人节表白网页在线制作(多种款式)

最新推荐文章于 2024-05-23 11:08:38 发布

web网站建设

最新推荐文章于 2024-05-23 11:08:38 发布

阅读量2.6k

点赞数 1

分类专栏：网页设计与制作文章标签：前端 html javascript css

本文链接：https://blog.csdn.net/qq_38512571/article/details/127130828

版权

网页设计与制作专栏收录该内容

1187 篇文章 97 订阅

订阅专栏

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业：【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

109 告白气球，飞入我的心扉表白网页

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="static/nigeerhuox16.ico.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>love</title>
    <link rel="stylesheet" href="./static/style.css">
</head>
<body>

<img src="static/music.png" style="position: fixed;z-index: 10001;top:10px;right:10px;" onclick="let m = document.querySelector('.song-audio-autoplay'); if (m.paused ) {m.play(); this.className = 'rotateImages'} else {m.pause(); this.className = ''}">
<audio class="song-audio-autoplay" controls loop style="display: none;visibility: hidden">
    <source src="static/wanan-yanrenzhong.mp3"></source>
    Your browser isn't invited for super fun audio time.
</audio>
<style type="text/css">
    .rotateImages{
        -webkit-animation:myRotate 10s linear infinite;
        animation:myRotate 10s linear infinite;
    }
    @-webkit-keyframes myRotate{
        0%{ -webkit-transform: rotate(0deg);}
        50%{ -webkit-transform: rotate(180deg);}
        100%{ -webkit-transform: rotate(360deg);}
    }
    @keyframes myRotate{
        0%{ -webkit-transform: rotate(0deg);}
        50%{ -webkit-transform: rotate(180deg);}
        100%{ -webkit-transform: rotate(360deg);}
    }
</style>

<div style="width:100%;max-width:500px;margin:0 auto;position: relative;">
    <div class="pass-time">
        <p class="finalText"></p>
        <p>
            <span class="kwy days"></span>
            天
            <span class="kwy hours"></span>
            时
            <span class="kwy minutes"></span>
            分
            <span class="kwy seconds"></span>
            秒</p>
    </div>

    <marquee id="marquee" direction = "up" scrollamount="2" style="color:white; height:100px;line-height: 20px;font-size:12px;text-align: center;">

    </marquee>


    <div id="pBg1cNNqT-an-obj-2"><img height="180" width="500" src="./static/boy-girl/2000.jpg">
    </div>
    <div id="pBg1cNNqT-an-obj-3">
        <div id="pBg1cNNqT-an-obj-4"><img height="338" width="350"
                                          src="./static/boy-girl/2000(1).jpg"></div>
        <div id="pBg1cNNqT-an-obj-5"><img height="113" width="85"
                                          src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-6"><img height="113" width="85"
                                          src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-7"><img height="113" width="85"
                                          src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-8"><img height="113" width="85"
                                          src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-9"><img height="113" width="85"
                                          src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-10"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-11"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-12"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-13"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-14"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-15"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-16"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-17"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-18"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
        <div id="pBg1cNNqT-an-obj-19"><img height="113" width="85"
                                           src="./static/boy-girl/2000(2).jpg"></div>
    </div>
    <div id="pBg1cNNqT-an-obj-20">
        <div id="pBg1cNNqT-an-obj-21"><img height="61" width="135"
                                           src="./static/boy-girl/2000(3).jpg"></div>
        <div id="pBg1cNNqT-an-obj-22"><img height="256" width="237"
                                           src="./static/boy-girl/2000(4).jpg"></div>
        <div id="pBg1cNNqT-an-obj-23"><img height="159" width="104"
                                           src="./static/boy-girl/2000(5).jpg"></div>
    </div>
    <div id="pBg1cNNqT-an-obj-24">
        <div id="pBg1cNNqT-an-obj-25"><img height="401" width="195"
                                           src="./static/boy-girl/2000(6).jpg"></div>
        <div id="pBg1cNNqT-an-obj-26"><img height="290" width="161"
                                           src="./static/boy-girl/2000(7).jpg"></div>
    </div>

</div>


<script src="config.js"></script>
<script src="static/index.js"></script>
</body>
</html>

🏠CSS样式代码


body{
    background: #fe909b;
}

@keyframes ani-pBg1cNNqT-an-obj-6-0 {
    0% {
        -webkit-transform: translate3d(-48px, -137px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.2, 0.2, 1);
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translate3d(-55px, -281px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(42.9deg) scale3d(0.08000000000000002, 0.08000000000000002, 1);
        -webkit-animation-timing-function: linear;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-11-0 {
    0% {
        -webkit-transform: translate3d(108px, 38px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.23999999999999996, 0.26, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(218px, 7px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(45deg) scale3d(-0.09599999999999999, 0.10400000000000001, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-10-0 {
    0% {
        -webkit-transform: translate3d(14px, -142px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.26, 0.26, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(38px, -268px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(26.3deg) scale3d(0.078, 0.078, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-9-0 {
    0% {
        -webkit-transform: translate3d(67px, -113px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.17, 0.17, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(78px, -249px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(7.5deg) scale3d(0.068, 0.068, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0.3;
    }
}



@keyframes ani-pBg1cNNqT-an-obj-7-0 {
    0% {
        -webkit-transform: translate3d(-108px, -101px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.24, 0.25, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-138px, -262px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(16.3deg) scale3d(-0.096, 0.1, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0.2;
    }
}

@keyframes ani-pBg1cNNqT-an-obj-8-0 {
    0% {
        -webkit-transform: translate3d(-34px, -148px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.14, 0.14, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-33px, -255px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(11.8deg) scale3d(0.042, 0.042, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0.2;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-13-0 {
    0% {
        -webkit-transform: translate3d(85px, -105px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.23, 0.20653061224489797, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(185px, -176px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(38.2deg) scale3d(-0.069, 0.061959183673469385, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-12-0 {
    0% {
        -webkit-transform: translate3d(102px, -55px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.17, 0.17, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(168px, -152px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(65.1deg) scale3d(0.051000000000000004, 0.051000000000000004, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-15-0 {
    0% {
        -webkit-transform: translate3d(-95px, -139px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.25, -0.25, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-104px, -270px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(156.4deg) scale3d(-0.125, -0.125, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-14-0 {
    0% {
        -webkit-transform: translate3d(-129px, -120px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-153px, -221px, 0px) scale3d(-0.21103448275862072, 0.17, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-17-0 {
    0% {
        -webkit-transform: translate3d(-62px, -149px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.20869565217391306, 0.24, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(-12px, -289px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(19.4deg) scale3d(-0.06260869565217392, 0.072, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-16-0 {
    0% {
        -webkit-transform: translate3d(-24px, -138px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.32, 0.32, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(12px, -243px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(-0.8deg) scale3d(0.16, 0.16, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-19-0 {
    0% {
        -webkit-transform: translate3d(104px, -34px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(81.7deg) scale3d(-0.2836666666666667, 0.23, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(214px, -24px, 0px) rotateX(0deg) rotateY(0deg) rotateZ(91.7deg) scale3d(-0.11346666666666667, 0.09200000000000001, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}


@keyframes ani-pBg1cNNqT-an-obj-18-0 {
    0% {
        -webkit-transform: translate3d(50px, -123px, 0px) scale3d(0.29, 0.29, 1);
        -webkit-animation-timing-function: linear;
        opacity: 1;
    }
    100% {
        -webkit-transform: translate3d(121px, -264px, 0px) scale3d(0.0116, 0.0116, 1);
        -webkit-animation-timing-function: linear;
        opacity: 0;
    }
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
教你如何制作浪漫的表白网站七夕情人节表白网页在线制作(多种款式)

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如：等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）📜html文件包含：其中index.html是首页、其他html为二级页面；（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等（3）📄 js文件包含：页面炫酷效果实现109 告白气球，飞入我的心扉表白网页🏠CSS样式代码五、🎁更多源码1.如
复制链接

扫一扫