520表白神器

news2024/9/20 8:01:30

🍁博主简介：
        🏅云计算领域优质创作者
        🏅2022年CSDN新星计划python赛道第一名

        🏅2022年CSDN原力计划优质作者
        🏅阿里云ACE认证高级工程师
        🏅阿里云开发者社区专家博主

💊交流社区：CSDN云计算交流社区欢迎您的加入！

一：项目展示

项目效果：

二：使用方法

使用方法：下载代码包，自行替换文本和图片即可。项目源码：

1. 主页 index.html 无需修改任何内容

2. 展示页 show.html 111行修改日期 135行修改表白者/被表白者姓名

3. 结果页 result.html

替换内容：在编辑器中按ctrl+f全局搜索"{{替换"，对内容进行替换
替换图片：覆盖images目录下的文件（除baidu.png）
替换音乐：覆盖bgMusic.mp3文件

三：代码展示

由于所有代码过长，文章字数限制导致无法全部粘贴，完整代码我已打包上传，可以自行下载。若无法下载在可以加我主页左下方的vx获取

index.html部分代码展示：

<!DOCTYPE html>
<!--STATUS OK-->
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#2932e1">
    <link rel="shortcut icon" href="https://www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg" type="image/x-icon" />
    <title>百度一下，你就知道</title>
    <style index="newi" type="text/css">
    #form .bdsug {
        top: 39px
    }

    .bdsug {
        display: none;
        position: absolute;
        width: 535px;
        background: #fff;
        border: 1px solid #ccc !important;
        _overflow: hidden;
        box-shadow: 1px 1px 3px #ededed;
        -webkit-box-shadow: 1px 1px 3px #ededed;
        -moz-box-shadow: 1px 1px 3px #ededed;
        -o-box-shadow: 1px 1px 3px #ededed
    }

    .bdsug li {
        width: 519px;
        color: #000;
        font: 14px arial;
        line-height: 25px;
        padding: 0 8px;
        position: relative;
        cursor: default
    }

    .bdsug li.bdsug-s {
        background: #f0f0f0
    }

    .bdsug-store span,
    .bdsug-store b {
        color: #7A77C8
    }

    .bdsug-store-del {
        font-size: 12px;
        color: #666;
        text-decoration: underline;
        position: absolute;
        right: 8px;
        top: 0;
        cursor: pointer;
        display: none
    }

    .bdsug-s .bdsug-store-del {
        display: inline-block
    }

    .bdsug-ala {
        display: inline-block;
        border-bottom: 1px solid #e6e6e6
    }

    .bdsug-ala h3 {
        line-height: 14px;
        background: url(//www.baidu.com/img/sug_bd.png?v=09816787.png) no-repeat left center;
        margin: 6px 0 4px;
        font-size: 12px;
        font-weight: 400;
        color: #7B7B7B;
        padding-left: 20px
    }

    .bdsug-ala p {
        font-size: 14px;
        font-weight: 700;
        padding-left: 20px
    }

    #m .bdsug .bdsug-direct p {
        color: #00c;
        font-weight: 700;
        line-height: 34px;
        padding: 0 8px;
        margin-top: 0;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden
    }

    #m .bdsug .bdsug-direct p img {
        width: 16px;
        height: 16px;
        margin: 7px 6px 9px 0;
        vertical-align: middle
    }

    #m .bdsug .bdsug-direct p span {
        margin-left: 8px
    }

    #form .bdsug .bdsug-direct {
        width: auto;
        padding: 0;
        border-bottom: 1px solid #f1f1f1
    }

    #form .bdsug .bdsug-direct p i {
        font-size: 12px;
        line-height: 100%;
        font-style: normal;
        font-weight: 400;
        color: #fff;
        background-color: #2b99ff;
        display: inline;
        text-align: center;
        padding: 1px 5px;
        *padding: 2px 5px 0;
        margin-left: 8px;
        overflow: hidden
    }

    .bdsug .bdsug-pcDirect {
        color: #000;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        background-color: #f8f8f8
    }

    .bdsug .bdsug-pc-direct-tip {
        position: absolute;
        right: 15px;
        top: 8px;
        width: 55px;
        height: 15px;
        display: block;
        background:

result.html完整代码：

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="always" name="referrer">
    <meta name="theme-color" content="#2932e1">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
    <link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索">
    <title>百度搜索</title>
    <style data-for="result" type="text/css" id="css_newi_result">
        body {
            color: #333;
            background: #fff;
            padding: 6px 0 0;
            margin: 0;
            position: relative;
            min-width: 900px
        }

        body,
        th,
        td,
        .p1,
        .p2 {
            font-family: arial
        }

        p,
        form,
        ol,
        ul,
        li,
        dl,
        dt,
        dd,
        h3 {
            margin: 0;
            padding: 0;
            list-style: none
        }

        input {
            padding-top: 0;
            padding-bottom: 0;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box
        }

        table,
        img {
            border: 0
        }

        td {
            font-size: 9pt;
            line-height: 18px
        }

        em {
            font-style: normal;
            color: #c00
        }

        a em {
            text-decoration: underline
        }

        cite {
            font-style: normal;
            color: pink
        }

        .m,
        a.m {
            color: #666
        }

        a.m:visited {
            color: #606
        }

        .g,
        a.g {
            color: pink
        }

        .c {
            color: #77c
        }

        .f14 {
            font-size: 14px
        }

        .f10 {
            font-size: 10.5pt
        }

        .f16 {
            font-size: 16px
        }

        .f13 {
            font-size: 13px
        }

        .bg {
            background-image: url(https://dss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_441e82f.png);
            _background-image:

show.html部分代码展示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>I Love You ❤️</title>
    <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">
    <style>
        html {
            height: 100%;
        }

        body {
            font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
            background: #79a8ae;
            color: #CFEBE4;
            font-size: 18px;
            line-height: 2;
            letter-spacing: 1.2px;
            margin: 0;
        }

        a {
            color: #ebf7f4;
        }

        .body--ready {
            background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
            background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
        }

        .text {
            position: fixed;
            bottom: 100px;
            text-align: center;
            width: 100%;
        }

        .canvas {
            margin: 0 auto;
            display: block;
        }

        img#logo {
            width: 128px;
            background-size: cover;
            border-radius: 200px;
            box-shadow: 0px 0px 40px rgba(63, 81, 181, 0.72);
            border: 3px solid #00a0ff;
            opacity: 1;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
            transition: all 1.0s;
        }

        #logo:hover {
            box-shadow: 0 0 10px #fff;
            -webkit-box-shadow: 0 0 19px #fff;
            transform: rotate(360deg);
            -ms-transform: rotate(360deg); /* IE 9 */
            -moz-transform: rotate(360deg); /* Firefox */
            -webkit-transform: rotate(360deg); /* Safari 和 Chrome */
            -o-transform: rotate(360deg); /* Opera */
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        .cs {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            position: absolute;
            text-align: center;
        }

        .text {
            position: fixed;
            bottom: 80px;
            text-align: center;
            width: 100%;
            font-weight: bold;
        }

        .text-right {
            position: fixed;
            bottom: 50px;
            text-align: right;
            width: 100%;
            font-weight: bold;
        }
    </style>