• HTML+CSS+JS制作结婚邀请函代码(程序员专属情人节表白网站)

    ❤ 精彩专栏推荐👇🏻👇🏻👇🏻
    💂 作者主页: 【进入主页—🚀获取更多源码】
    🎓 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.视频演示

    93-七夕活动邀请函手机动态模板

    🧩 2.图片演示

    在这里插入图片描述

    四、💒 网站代码

    🧱HTML结构代码

    
DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>Documenttitle>
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            /*border: 1px solid red;*/
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 540px;
            height: 100%;
            overflow: hidden;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            overflow: hidden;
            Center slide text vertically display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .section1 {
            background: url(images/beijing_1.png);
            background-size: 100% 100%;
        }

        .img1_1 {
            position: absolute;
            top: -5%;
            left: 0%;
            width: 100%;
            height: 110%
        }

        .img1_2 {
            position: absolute;
            top: 5%;
            left: 5%;
            bottom: 5%;
            right: 5%;
            width: 90%;
            height: 90%;
            opacity: 0.5;
        }

        .img1_3 {
            position: absolute;
            top: 7%;
            left: 9%;
            bottom: 7%;
            right: 9%;
            width: 82%;
            height: 86%;
        }

        .img1_4 {
            position: absolute;
            top: 23%;
            left: -18%;
            transform: rotate(140deg);
            width: 40%;
            height: 25%;
            /*opacity: 0;*/
        }

        .img1_5 {
            position: absolute;
            top: 33%;
            left: -15%;
            transform: rotate(125deg);
            width: 40%;
            height: 25%;
        }

        @keyframes yezib {
            0% {
                top: 45%;
                left: -55%;
            }
            100% {
                top: 33%;
                left: -15%;
            }
        }

        .yezib {
            animation: yezib 2s;
        }

        .img1_6 {
            position: absolute;
            left: 27%;
            bottom: -10%;
            transform: rotate(90deg);
            width: 45%;
            height: 25%;
        }

        .img1_7 {
            position: absolute;
            right: 0%;
            bottom: -4%;
            width: 45%;
            height: 25%;
        }

        @keyframes yezid {
            0% {
                right: 0%;
                bottom: -50%;
            }
            100% {
                right: 0%;
                bottom: -4%;
            }
        }

        .yezid {
            animation: yezid 3s;
        }

        .img1_8 {
            position: absolute;
            right: -10%;
            bottom: 10%;
            transform: rotate(-130deg);
            width: 40%;
            height: 20%;
        }

        @keyframes yezie {
            0% {
                right: -50%;
                bottom: 10%;
            }
            100% {
                right: -10%;
                bottom: 10%;
            }
        }

        .yezie {
            animation: yezie 2.5s;
        }

        .img1_9 {
            position: absolute;
            left: 25%;
            width: 50%;
            top: 14%;
            display: none;
        }

        .img1_10 {
            position: absolute;
            bottom: 38%;
            left: 25%;
            width: 50%;
            display: none;
        }

        .img1_11 {
            position: absolute;
            bottom: 30%;
            left: 25%;
            width: 50%;
            display: none;
        }

        @keyframes tu {
            0% {
                top: 107%;
            }
            100% {
                top: 7%;
            }
        }

        .tu1 {
            animation: tu 1s;
        }

        .img2_1 {
            position: absolute;
            width: 240%;
            height: 106%;
            left: 0%;
        }

        .img2_2 {
            position: absolute;
            width: 60%;
            height: 106%;
            left: 75%;
            background-color: rgb(35, 25, 77);
            transform: rotate(-2deg);
            display: none;
        }

        .img2_3 {
            position: absolute;
            left: 60%;
            top: 20%;
            background-color: rgb(35, 25, 77);
            font-size: 12px;
            color: rgba(222, 184, 129, 0.843137);
            /*display: none;*/
        }

        #content1 {
            position: absolute;
            width: 100%;
            height: 100%;
            font-size: 12px;
            color: rgba(222, 184, 129, 0.843137);
        }

        .img2_4 {
            position: absolute;
            left: 100%;
            bottom: -15%;
            width: 70%;
            height: 42%;
            animation: circle 10s infinite linear;
        }

        @-webkit-keyframes circle {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .img3_1 {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
        }

        .img3_2 {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .img3_2 ul {
            /*position: absolute;*/
            width: 100%;
            height: 100%;
            text-align: center;
        }

        .img3_2 ul li {
            /*position: absolute;*/
            opacity: 0;
            width: 100%;
            /*height: 10%;*/
        }

        #content2 {
            /*position: absolute;*/
            width: 8.4%;
            height: 100%;
            font-size: 16px;
            color: rgba(222, 184, 129, 0.843137);
        }

        .img3_2 ul li:last-child {
            position: absolute;
            bottom: 0%;
            left: 0%;
            width: 100%;
            height: 20%;
            opacity: 1;
        }

        .img3_3 {
            width: 100%;
            height: 100%;
        }

        .img4_1 {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
        }

        .img4_2 {
            position: absolute;
            top: 5%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            opacity: 0;
            text-align: left;
            /*background-color: red;*/
        }

        .img4_3 {
            position: absolute;
            top: 10%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            opacity: 0;
            text-align: left;
            /*background-color: red;*/
        }

        @-webkit-keyframes leftin1 {
            0% {
                left: -50%;
            }
            100% {
                left: 10%;
            }
        }

        .leftin1 {
            animation: leftin1 1s ease-out;
            /*animation-timing-function:ease-out;*/
        }

        .img4_4 {
            position: absolute;
            top: 15%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: left;
            /*background-color: red;*/
        }

        .img4_5 {
            position: absolute;
            top: 20%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: left;
            opacity: 0;
            /*background-color: red;*/
        }

        @-webkit-keyframes leftin2 {
            0% {
                left: -50%;
            }
            100% {
                left: 10%;
            }
        }

        .leftin2 {
            animation: leftin2 1s ease-out;
            /*animation-delay: 1s;*/
            /*animation-timing-function:ease-out;*/
        }

        .img4_6 {
            position: absolute;
            top: 25%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 8%;
            text-align: left;
            opacity: 0;
            /*background-color: red;*/
        }

        @-webkit-keyframes leftin3 {
            0% {
                left: -50%;
            }
            100% {
                left: 10%;
            }
        }

        .leftin3 {
            animation: leftin2 1s ease-out;
            /*animation-delay: 1.5s;*/
            /*animation-timing-function:ease-out;*/
        }

        .img4_7 {
            position: absolute;
            top: 33%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: left;
            /*background-color: red;*/
        }

        .img4_8 {
            position: absolute;
            top: 38%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: left;
            opacity: 0;
            /*background-color: red;*/
        }

        .img4_9 {
            position: absolute;
            top: 43%;
            left: 10%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: left;
            opacity: 0;
            /*background-color: red;*/
        }

        @-webkit-keyframes leftin4 {
            0% {
                left: -50%;
            }
            100% {
                left: 10%;
            }
        }

        .leftin4 {
            animation: leftin4 1s ease-out;
            /*animation-delay: 2s;*/
            /*animation-timing-function:ease-out;*/
        }

        .img4_10 {
            position: absolute;
            top: 62%;
            left: -8%;
            width: 110%;
            height: 50%;
            transform: rotate(-8deg);
            opacity: 0;
        }

        @-webkit-keyframes rightin1 {
            0% {
                left: 32%;
            }
            100% {
                left: -8%;
            }
        }

        .rightin1 {
            animation: rightin1 1s ease-out;
        }

        .img4_11 {
            position: absolute;
            top: 50%;
            left: 5%;
            width: 90%;
            height: 50%;
            opacity: 0;
        }

        @-webkit-keyframes rightin2 {
            0% {
                left: 45%;
            }
            100% {
                left: 5%;
            }
        }

        .rightin2 {
            animation: rightin2 1s ease-out;
            /*animation-delay: 2s;*/
            /*animation-timing-function:ease-out;*/
        }

        .img5_1 {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
        }

        .img5_2 {
            position: absolute;
            top: 5%;
            left: 0%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            opacity: 0;
            text-align: center;
            /*background-color: red;*/
        }

        .img5_3 {
            position: absolute;
            top: 10%;
            left: 0%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            opacity: 0;
            text-align: center;
            /*background-color: red;*/
        }

        .img5_4 {
            position: absolute;
            top: 15%;
            left: 0%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: center;
            /*opacity: 0;*/
            /*background-color: red;*/
        }

        .img5_5 {
            position: absolute;
            top: 20%;
            left: 0%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: center;
            opacity: 0;
            /*background-color: red;*/
        }

        .img5_6 {
            position: absolute;
            top: 28%;
            left: 0%;
            width: 100%;
            font-size: 20px;
            height: 8%;
            text-align: center;
            /*opacity: 0;*/
            /*background-color: red;*/
        }

        .img5_7 {
            position: absolute;
            top: 33%;
            left: 0%;
            width: 100%;
            font-size: 20px;
            height: 5%;
            text-align: center;
            opacity: 0;
            /*background-color: red;*/
        }

        .img5_8 {
            position: absolute;
            top: 50%;
            left: 0%;
            width: 100%;
            height: 50%;
            text-align: center;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_2 {
            position: absolute;
            top: 20%;
            left: -13%;
            width: 80%;
            height: 80%;
            /*text-align: right;*/
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_3 {
            position: absolute;
            top: 5%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_4 {
            position: absolute;
            top: 10%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_5 {
            position: absolute;
            top: 15%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            /*opacity: 0;*/
            /*background-color: red;*/
        }

        .img6_6 {
            position: absolute;
            top: 20%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_7 {
            position: absolute;
            top: 28%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            /*opacity: 0;*/
            /*background-color: red;*/
        }

        .img6_8 {
            position: absolute;
            top: 33%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_9 {
            position: absolute;
            top: 38%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_10 {
            position: absolute;
            top: 43%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img6_11 {
            position: absolute;
            top: 48%;
            right: 15%;
            width: 80%;
            height: 80%;
            text-align: right;
            opacity: 0;
            /*background-color: red;*/
        }

        .img7_1 {
            position: absolute;
            top: 45%;
            right: 4%;
            width: 85%;
            height: 55%;
            opacity: 0;
            /*background-color: red;*/
        }

        .img7_2 {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 5%;
            left: 0%;
            opacity: 0;
        }

        .img7_3 {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 10%;
            left: 0%;
            opacity: 0;
        }

        .img7_4 {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 15%;
            left: 0%;
            /*opacity: 0;*/
        }

        .img7_5 {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 20%;
            left: 0%;
            opacity: 0;
        }

        .img7_6 {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 27%;
            left: 0%;
            /*opacity: 0;*/
        }

        .img7_7 {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 32%;
            left: 0%;
            opacity: 0;
        }

        .section8 {
            background: url(images/beijing_1.png);
            background-size: 100% 100%;
        }

        .img8_1 {
            position: absolute;
            top: -5%;
            left: 0%;
            width: 100%;
            height: 110%
        }

        .img8_2 {
            position: absolute;
            top: 5%;
            left: 5%;
            bottom: 5%;
            right: 5%;
            width: 90%;
            height: 90%;
            opacity: 0.5;
        }

        .img8_3 {
            position: absolute;
            top: 7%;
            left: 9%;
            bottom: 7%;
            right: 9%;
            width: 82%;
            height: 86%;
        }

        .img8_4 {
            position: absolute;
            top: 23%;
            left: -18%;
            transform: rotate(140deg);
            width: 40%;
            height: 25%;
            /*opacity: 0;*/
        }

        .img8_5 {
            position: absolute;
            top: 33%;
            left: -15%;
            transform: rotate(125deg);
            width: 40%;
            height: 25%;
        }

        .img8_6 {
            position: absolute;
            left: 27%;
            bottom: -10%;
            transform: rotate(90deg);
            width: 45%;
            height: 25%;
        }

        .img8_7 {
            position: absolute;
            right: 0%;
            bottom: -4%;
            width: 45%;
            height: 25%;
        }

        @keyframes yezia {
            0% {
                left: -50%;
            }
            100% {
                left: -18%;
            }
        }

        .yezia {
            animation: yezia 1.5s;
        }

        @keyframes yezib {
            0% {
                top: 45%;
                left: -55%;
            }
            100% {
                top: 33%;
                left: -15%;
            }
        }

        .yezib {
            animation: yezib 2s;
        }

        @keyframes yezic {
            0% {
                left: 27%;
                bottom: -50%;
            }
            100% {
                left: 27%;
                bottom: -10%;
            }
        }

        .yezic {
            animation: yezic 3.5s;
        }

        @keyframes yezid {
            0% {
                right: 0%;
                bottom: -50%;
            }
            100% {
                right: 0%;
                bottom: -4%;
            }
        }

        .yezid {
            animation: yezid 3s;
        }

        .img8_8 {
            position: absolute;
            right: -10%;
            bottom: 10%;
            transform: rotate(-130deg);
            width: 40%;
            height: 20%;
        }

        @keyframes yezie {
            0% {
                right: -50%;
                bottom: 10%;
            }
            100% {
                right: -10%;
                bottom: 10%;
            }
        }

        .yezie {
            animation: yezie 2.5s;
        }

        @keyframes biankuang {
            0% {
                top: -100%;
                left: 5%;
            }
            100% {
                top: 5%;
                left: 5%;
                bottom: 5%;
                right: 5%;
            }
        }

        .biankuang {
            animation: biankuang 1s;
        }

        @keyframes tu {
            0% {
                top: 107%;
            }
            100% {
                top: 7%;
            }
        }

        .tu1 {
            animation: tu 1s;
        }

        .wenzi1 {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0%;
            opacity: 0;
            /*white-space: pre;*/
            /*line-height: 100%;*/
        }

        .wenzi8_1 {
            position: relative;
            width: 50px;
            font-size: 64px;
            color: #fff;
            top: 10%;
        }

        .wenzi2 {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0%;
            opacity: 0;
            /*white-space: pre;*/
            /*line-height: 100%;*/
        }

        .wenzi8_2 {
            position: relative;
            width: 50px;
            font-size: 64px;
            color: #fff;
            top: 20%;
            /*opacity: 0;*/
        }

        .img8_9 {
            position: absolute;
            width: 35%;
            height: 11%;
            top: 11%;
            left: 32%;
            opacity: 0;
        }

        .img8_10 {
            position: absolute;
            width: 220%;
            height: 25%;
            top: 25%;
            left: 10%;
            opacity: 0;
        }

        .img8_11 {
            background: url(images/daoxibeijing.jpg);
            position: absolute;
            width: 70%;
            height: 10%;
            top: 52%;
            left: 15%;
            opacity: 0;
        }

        .img8_11_1 {
            position: absolute;
            width: 100%;
            height: 90%;
            top: 0%;
            left: 0%;
            /*opacity: 0;*/
        }

        .img_hengxian1 {
            background: url(images/hengxian.png);
            background-size: 100% 100%;
            position: absolute;
            width: 70%;
            height: 5%;
            top: 47%;
            left: 15%;
            opacity: 0;
        }

        .img_hengxian2 {
            background: url(images/hengxian.png);
            background-size: 100% 100%;
            position: absolute;
            width: 70%;
            height: 5%;
            top: 62%;
            left: 15%;
            opacity: 0;
        }

        .wenzi3 {
            position: absolute;
            width: 100%;
            height: 10%;
            top: 72%;
            left: 0%;
            text-align: center;
            font-size: 16px;
            color: #fff;
            opacity: 0;
        }

        .btn {
            background: url(images/bgmBtn.svg);
            background-size: 100% 100%;
            position: absolute;
            width: 30px;
            height: 30px;
            top: 6%;
            right: 6%;
            z-index: 999;
        }

        .btnonclick {
            animation: circle 1s infinite linear;
        }
    style>
head>

<body>
    <div class="swiper-container">
        <div class="btn">div>
        <audio id="video" autoplay src="http://res1.eqh5.com/o_1aj4i1djr340g3h1v2t1e6j1vga9.mp3">audio>
        <div class="swiper-wrapper">
            <div class="swiper-slide section1">
                <img class="img1_1" src="images/1-2.png">
                <img class="img1_2" src="images/1_biankuang.png">
                <img class="img1_3" src="images/1-1.png">
                <img class="img1_4" src="images/shuye_1.png">
                <img class="img1_5" src="images/shuye_2.png">
                <img class="img1_6" src="images/shuye_4.png">
                <img class="img1_7" src="images/shuye_2.png">
                <img class="img1_8" src="images/shuye_3.png">
                <img class="img1_9" src="images/xiaozhenbao.png">
                <img class="img1_10" src="images/yaoqinghan.png">
                <img class="img1_11" src="images/yingwenzi.png">
            div>
            <div class="swiper-slide section2">
                <img class="img2_1" src="images/ertubeijing.jpg" alt="">
                <div class="img2_2">div>
                <div class="img2_3">
                    <span id="content1" style="white-space:pre">
            div>
            <img class="img2_4" src="images/ertuhua.png" alt="">
        div>
        <div class="swiper-slide section3">
            <img class="img3_1" src="images/santubeijing.png" alt="">
            <div class="img3_2">
                <ul style="height:100%;">
                    <li style="font-size: 64px;color: rgb(171, 124, 68);">丰盛/美好li>
                    <li style="font-size: 20px;color:rgb(2, 21, 120);height:10%;">我们用<span style="font-weight: bold;">工匠span>精神li>
                    <li style="line-height: inherit; font-size: 12px; background-color: initial; color: rgb(207, 157, 83);"><span id="content2" style="white-space:pre">span>li>
                    <li style="font-size: 20px;font-family: fangzheng_sht;;color:rgb(2, 21, 120);">是人生中最幸福的滋味li>
                    <li><img style="width:70%" src="images/santuwenzia.png" alt="">li>
                    <br>
                    <li style="font-size: 20px; font-family: fangzheng_fst;color:rgb(2, 21, 120);">烹调精致美食li>
                    <li><img style="width:30%" src="images/santuwenzib.png" alt="">li>
                    <li><img style="width:70%" src="images/santuwenzic.png" alt="">li>
                    <li><img class="img3_3" src="images/santudi.png" alt="">li>
                    ul>
                div>
            div>
            <div class="swiper-slide section4">
                <img class="img4_1" src="images/santubeijing.png" alt="">
                <img class="img4_10" src="images/4-1.png" alt="">
                <img class="img4_11" src="images/4-2.png" alt="">
                <div class="img4_2"><span style="font-size: 20px;color:rgb(2, 21, 120);">控得住<span style="font-weight: bold;">混搭风span>span>
                div>
                <div class="img4_3"><span style="font-size: 20px;color:rgb(2, 21, 120);">聊得了<span style="font-weight: bold;">穿越剧span>span>
                div>
                <div class="img4_4"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img4_5"><span style="font-size: 20px;color:rgb(2, 21, 120);">比爷爷年纪更大span>div>
                <div class="img4_6"><span style="font-size: 32px; font-family: fangzheng_sht; color: rgb(171, 124, 68);">珍宝雀笼点心span>div>
                <div class="img4_7"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img4_8"><span style="font-size: 20px;color:rgb(2, 21, 120);">还能给味觉span>div>
                <div class="img4_9"><span style="font-size: 20px;color:rgb(2, 21, 120);">奏一曲<span style="font-weight: bold;">交响乐span>span>
                div>
            div>
            <div class="swiper-slide section5">
                <img class="img5_1" src="images/santubeijing.png" alt="">
                <img class="img5_8" src="images/5_1.png" alt="">
                <div class="img5_2"><span style="font-size: 20px; line-height: 20px; color:rgb(2, 21, 120);">在进入谈判桌之前span>div>
                <div class="img5_3"><span style="font-size: 20px; line-height: 20px; color:rgb(2, 21, 120);">不如先一起喝早茶span>div>
                <div class="img5_4"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img5_5"><span style="font-size: 32px; line-height: 32px; font-family: fangzheng_sht;color:rgb(171, 124, 68);">金箔翡翠虾饺皇span>div>
                <div class="img5_6"><span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img5_7"><span style="font-size: 20px; line-height: 20px;color:rgb(2, 21, 120);">台上<span style="font-weight: bold;">敌手span>－台下<span style="font-weight: bold;">好友span>span>
                div>
            div>
            <div class="swiper-slide section6">
                <img class="img5_1" src="images/santubeijing.png" alt="">
                <img class="img6_2" src="images/6_1.png" alt="">
                <div class="img6_3">
                    <span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">千万别问span>
                div>
                <div class="img6_4">
                    <span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120);">该如何优雅地吃span>
                div>
                <div class="img6_5">
                    <span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img6_6">
                    <span style="font-size: 32px; line-height: 32px; color: rgb(171, 124, 68); letter-spacing: 0px; background-color: initial; font-family: fangzheng_sht;">鲜果拿破仑span>
                div>
                <div class="img6_7">
                    <span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img6_8">
                    <span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">抛开形象span>
                div>
                <div class="img6_9">
                    <span style="line-height: 20px; font-weight: bold; font-size: 24px; color: rgb(2, 21, 120);">一口闷span>
                div>
                <div class="img6_10">
                    <span style="font-size: 20px; color: inherit; line-height: inherit; letter-spacing: 0px; background-color: initial; color: rgb(2, 21, 120);">懂吃的人span>
                div>
                <div class="img6_11">
                    <span style="font-size: 24px; font-weight: bold; color: rgb(2, 21, 120);">最优雅span>
                div>
            div>
            <div class="swiper-slide section7">
                <img class="img5_1" src="images/santubeijing.png" alt="">
                <img class="img7_1" src="images/7_1.png" alt="">
                <div class="img7_2">
                    <span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">可以把话心情全部赶跑span>
                div>
                <div class="img7_3">
                    <span style="font-size: 20px; line-height: 20px; color: rgb(2, 21, 120); letter-spacing: 0px; background-color: initial;">也能让好心情变更美的span>
                div>
                <div class="img7_4">
                    <span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img7_5">
                    <span style="font-size: 32px; line-height: 32px; color: rgb(171, 124, 68); letter-spacing: 0px; background-color: initial; font-family: fangzheng_sht;">象生法国鹅肝酥span>
                div>
                <div class="img7_6">
                    <span style="font-size: 20px;color:rgb(2, 21, 120);"><span style="font-weight: bold;">/span>span>
                div>
                <div class="img7_7">
                    <span style="font-size: 20px; line-height: 20px; color:rgb(2, 21, 120);"><span style="font-weight: bold;">我的你span>－肯定喜欢span>
                div>
            div>
            <div class="swiper-slide section8">
                <img class="img8_1" src="images/beijing_8.png">
                <img class="img8_2" src="images/2_biankuang.png">
                <img class="img8_3" src="images/8_1.jpg">
                <img class="img8_4" src="images/shuye_1.png">
                <img class="img8_5" src="images/shuye_2.png">
                <img class="img8_6" src="images/shuye_4.png">
                <img class="img8_7" src="images/shuye_2.png">
                <img class="img8_8" src="images/shuye_3.png">
                <div class="wenzi1">
                    <span class="wenzi8_1">珍<br>贵<br>的<br>你span>
                div>
                <div class="wenzi2">
                    <span class="wenzi8_2">久<br>等<br>了span>
                div>
                <img class="img8_9" src="images/xiaozhenbao3.png" alt="">
                <img class="img8_10" src="images/521.png" alt="">
                <div class="img8_11">
                    <img class="img8_11_1" src="images/daoxi.png" alt="">
                div>
                <div class="img_hengxian1">div>
                <div class="img_hengxian2">div>
                <div class="wenzi3"><span>邀请你与我共享美食（只限观看的你span>div>
            div>
        div>
        
        <div class="swiper-pagination">div>

        
        
        

        
        
    div>
    <script src="js/swiper-3.4.2.min.js">script>
    <script src="js/jquery-3.1.1.min.js">script>
    <script src="js/typed.min.js">script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            direction: 'vertical',
            // loop: true,

            // 如果需要分页器
            pagination: '.swiper-pagination',
            onInit: function(swiper) {
                //Swiper初始化了
                //alert(swiper.activeIndex);提示Swiper的当前索引
                console.log("onInit" + swiper.activeIndex);
                $(".img1_2").addClass("biankuang").css("opacity", 0.5);
                $(".img1_3").addClass("tu1").css("opacity", 1);
                $(".img1_4").addClass("yezia").css("opacity", 1);
                $(".img1_5").addClass("yezib").css("opacity", 1);
                $(".img1_6").addClass("yezic").css("opacity", 1);
                $(".img1_7").addClass("yezid").css("opacity", 1);
                $(".img1_8").addClass("yezie").css("opacity", 1);
                $(".img1_9").delay(3000).fadeIn();
                $(".img1_10").delay(4000).fadeIn();
                $(".img1_11").delay(3500).fadeIn();
            },
            onSlideChangeEnd: function(swiper) {
                console.log("onSlideChangeEnd" + swiper.activeIndex);
                switch (swiper.activeIndex) {
                    case 0:
                        $(".img1_2").stop(true, true).addClass("biankuang").css("opacity", 0.5);
                        $(".img1_3").stop(true, true).addClass("tu1").css("opacity", 1);
                        $(".img1_4").stop(true, true).addClass("yezia").css("opacity", 1);
                        $(".img1_5").stop(true, true).addClass("yezib").css("opacity", 1);
                        $(".img1_6").stop(true, true).addClass("yezic").css("opacity", 1);
                        $(".img1_7").stop(true, true).addClass("yezid").css("opacity", 1);
                        $(".img1_8").stop(true, true).addClass("yezie").css("opacity", 1);
                        $(".img1_9").stop(true, true).delay(3000).fadeIn();
                        $(".img1_10").stop(true, true).delay(4000).fadeIn();
                        $(".img1_11").stop(true, true).delay(3500).fadeIn();
                        break;
                    case 1:
                        $(".img2_1").animate({
                            left: "-84%"
                        }, 1000, function() {
                            $(".img2_2").stop(true, true).css("display", "block").animate({
                                left: "51%"
                            }, 1000).animate({
                                left: "60%"
                            }, 250).animate({
                                left: "51%"
                            }, 200).animate({
                                left: "55%"
                            }, 150).animate({
                                left: "51%"
                            }, 100, function() {
                                $(".img2_4").stop(true, true).animate({
                                    left: "70%"
                                });
                                // $(".img2_3").stop(true,true).show(1000);
                                $("#content1").animate({
                                    opacity: 1
                                });
                                $("#content1").fadeIn();
                                $("#content1").text("");
                                $("#content1").typed({
                                    strings: ["欧阳应霁曾说：\n\n不在于食材的珍稀 \n烹调的复杂 \n也不在于装潢的奢华 \n\n只有跟对的人在一起 \n彼此相伴、分享美味 \n才最是珍贵"],
                                    typeSpeed: 200,
                                    loopcount: false,
                                    showCursor: false,
                                    attr: null,
                                    // cursorChar: "~~~",
                                });
                            });
                        });
                        break;
                    case 2:
                        // $(".img3_3").addClass("bounceInUp animated").animate({opacity:"1"});
                        $(".img3_2").children().children().eq(0).delay(7000).animate({
                            opacity: "1"
                        });
                        $(".img3_2").children().children().eq(3).delay(7500).animate({
                            opacity: "1"
                        });
                        $(".img3_2").children().children().eq(1).delay(8000).animate({
                            opacity: "1"
                        });
                        $(".img3_2").children().children().eq(5).delay(8500).animate({
                            opacity: "1"
                        });
                        $(".img3_2").children().children().eq(4).delay(9000).animate({
                            opacity: "1"
                        });
                        $(".img3_2").children().children().eq(6).delay(9500).animate({
                            opacity: "1"
                        });
                        $(".img3_2").children().children().eq(7).delay(10000).animate({
                            opacity: "0"
                        }, function() {
                            $(this).addClass("bounceInDown animated").css("opacity", 1);
                        });
                        $(".img3_2").children().children().eq(8).delay(10500).animate({
                            opacity: "1"
                        }, function() {
                            $(this).addClass("shake animated");
                        });
                        $(".img3_2").children().children().eq(2).css("opacity", "1");
                        $("#content2").fadeIn();
                        $("#content2").typed({
                            strings: ["对的人，固然重要\n但我们认为\n美味是幸福最好的奖赏"],
                            typeSpeed: 200,
                            // loopcount: false,
                            showCursor: false,
                            attr: null,
                        });
                        $("#content2").delay(6500).fadeOut();
                        break;
                    case 3:
                        $(".img4_10").addClass("rightin1").css("opacity", 1);
                        $(".img4_11").addClass("rightin2").css("opacity", 1);
                        $(".img4_2").delay(500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin1");
                        });
                        $(".img4_3").delay(500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin1");
                        });
                        $(".img4_5").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin2");
                        });
                        $(".img4_6").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin3");
                        });
                        $(".img4_8").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin3");
                        });
                        $(".img4_9").delay(2500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("leftin3");
                        });
                        break;
                    case 4:
                        $(".img5_8").addClass("fadeInDown animated");
                        $(".img5_2").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        $(".img5_3").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        $(".img5_5").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        $(".img5_7").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInUp animated");
                        });
                        break;
                    case 5:
                        $(".img6_2").addClass("fadeInLeft animated");
                        $(".img6_3").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_4").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_6").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_8").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_9").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_10").delay(2500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        $(".img6_11").delay(2500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInRight animated");
                        });
                        break;
                    case 6:
                        $(".img7_1").addClass("fadeInUp animated");
                        $(".img7_2").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        $(".img7_3").delay(1000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        $(".img7_5").delay(1500).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        $(".img7_7").delay(2000).animate({
                            "opacity": 1
                        }, 0, function() {
                            $(this).addClass("fadeInDown animated");
                        });
                        break;
                    case 7:
                        $(".img8_2").stop(true, true).addClass("biankuang").css("opacity", 0.5);
                        $(".img8_3").stop(true, true).addClass("tu1").css("opacity", 1);
                        $(".img8_4").stop(true, true).addClass("yezia").css("opacity", 1);
                        $(".img8_5").stop(true, true).addClass("yezib").css("opacity", 1);
                        $(".img8_6").stop(true, true).addClass("yezic").css("opacity", 1);
                        $(".img8_7").stop(true, true).addClass("yezid").css("opacity", 1);
                        $(".img8_8").stop(true, true).addClass("yezie").css("opacity", 1);
                        $(".wenzi1").stop(true, true).delay(3000).animate({
                            opacity: 1
                        }, 0, function() {
                            $(this).addClass("fadeIn animated");
                        }).delay(1000).animate({
                            opacity: 0
                        }, 1000, function() {
                            $(this).removeClass("fadeIn animated");
                        });
                        $(".wenzi2").stop(true, true).delay(5500).animate({
                            opacity: 1
                        }, 0, function() {
                            $(this).addClass("fadeIn animated");
                        }).delay(1000).animate({
                            opacity: 0
                        }, 1000, function() {
                            $(this).removeClass("fadeIn animated");
                            $(".img8_9").stop(true, true).delay(1000).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img8_10").stop(true, true).delay(1500).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img8_11").stop(true, true).delay(2500).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img_hengxian1").stop(true, true).delay(2000).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".img_hengxian2").stop(true, true).delay(3000).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                            $(".wenzi3").stop(true, true).delay(3500).animate({
                                opacity: 1
                            }, 0, function() {
                                $(this).fadeIn();
                            });
                        });
                        break;
                }
            },
            onSlideChangeStart: function(swiper) {
                if (swiper.activeIndex != 0) {
                    $(".img1_2").stop(true, true).removeClass("biankuang").css("opacity", 0);
                    $(".img1_3").stop(true, true).removeClass("tu1").css("opacity", 0);
                    $(".img1_4").stop(true, true).removeClass("yezia").css("opacity", 0);
                    $(".img1_5").stop(true, true).removeClass("yezib").css("opacity", 0);
                    $(".img1_6").stop(true, true).removeClass("yezic").css("opacity", 0);
                    $(".img1_7").stop(true, true).removeClass("yezid").css("opacity", 0);
                    $(".img1_8").stop(true, true).removeClass("yezie").css("opacity", 0);
                    $(".img1_9").stop(true, true).fadeOut();
                    $(".img1_10").stop(true, true).fadeOut();
                    $(".img1_11").stop(true, true).fadeOut();
                }
                if (swiper.activeIndex != 1) {
                    $(".img2_1").stop(true, true).css("left", "0%");
                    $(".img2_2").stop(true, true).css("display", "none").css("left", "75%");
                    $("#content1").fadeOut();
                    $(".img2_4").stop(true, true).animate({
                        left: "100%"
                    });
                }
                if (swiper.activeIndex != 2) {
                    $(".img3_2").children().children().eq(0).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(3).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(1).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(5).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(4).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(6).stop(true, true).css("opacity", 0);
                    $(".img3_2").children().children().eq(7).stop(true, true).css("opacity", 0).removeClass("bounceInDown animated");
                    $(".img3_2").children().children().eq(8).stop(true, true).css("opacity", 0).removeClass("shake animated");
                    $(".img3_2").children().children().eq(2).css("opacity", "0");
                    $("#content2").fadeOut();
                }
                if (swiper.activeIndex != 3) {
                    $(".img4_10").stop(true, true).removeClass("rightin1").css("opacity", 0);
                    $(".img4_11").stop(true, true).removeClass("rightin2").css("opacity", 0);
                    $(".img4_2").stop(true, true).removeClass("leftin1").css("opacity", 0);
                    $(".img4_3").stop(true, true).removeClass("leftin1").css("opacity", 0);
                    $(".img4_5").stop(true, true).removeClass("leftin2").css("opacity", 0);
                    $(".img4_6").stop(true, true).removeClass("leftin3").css("opacity", 0);
                    $(".img4_8").stop(true, true).removeClass("leftin3").css("opacity", 0);
                    $(".img4_9").stop(true, true).removeClass("leftin3").css("opacity", 0);
                }
                if (swiper.activeIndex != 4) {
                    $(".img5_8").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img5_2").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img5_3").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img5_5").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img5_7").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                }
                if (swiper.activeIndex != 5) {
                    $(".img6_2").stop(true, true).removeClass("fadeInLeft animated").css("opacity", 0);
                    $(".img6_3").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_4").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_6").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_8").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_9").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_10").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                    $(".img6_11").stop(true, true).removeClass("fadeInRight animated").css("opacity", 0);
                }
                if (swiper.activeIndex != 6) {
                    $(".img7_1").stop(true, true).removeClass("fadeInUp animated").css("opacity", 0);
                    $(".img7_2").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img7_3").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img7_5").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                    $(".img7_7").stop(true, true).removeClass("fadeInDown animated").css("opacity", 0);
                };
                if (swiper.activeIndex != 7) {
                    $(".img8_2").stop(true, true).removeClass("biankuang").css("opacity", 0);
                    $(".img8_3").stop(true, true).removeClass("tu1").css("opacity", 0);
                    $(".img8_4").stop(true, true).removeClass("yezia").css("opacity", 0);
                    $(".img8_5").stop(true, true).removeClass("yezib").css("opacity", 0);
                    $(".img8_6").stop(true, true).removeClass("yezic").css("opacity", 0);
                    $(".img8_7").stop(true, true).removeClass("yezid").css("opacity", 0);
                    $(".img8_8").stop(true, true).removeClass("yezie").css("opacity", 0);
                    $(".wenzi1").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");
                    $(".wenzi2").stop(true, true).css("opacity", 0).removeClass("fadeIn animated");
                    $(".img8_9").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img8_10").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img8_11").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img_hengxian1").stop(true, true).css("opacity", 0).fadeOut();
                    $(".img_hengxian2").stop(true, true).css("opacity", 0).fadeOut();
                    $(".wenzi3").stop(true, true).css("opacity", 0).fadeOut();
                }
            }
            // 如果需要前进后退按钮
            // nextButton: '.swiper-button-next',
            // prevButton: '.swiper-button-prev',

            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
            // onSlideChangeEnd: function(Swiper) {
            //     // console.log(swiper.activeIndex);
            //     switch (swiper.activeIndex) {
            //         case 0:
            //         // $(".img1_4").addClass("yezi");
            //         console.log(111);
            //         // alert(111);
            //         break;
            //     }
            // },
        })

        $(function() {
            var video = document.getElementById("video");
            $(".btn").addClass("btnonclick");
            $(".btn").click(function() {
                if (video.paused) {
                    video.play();
                    $(".btn").addClass("btnonclick");
                } else {
                    video.pause();
                    $(".btn").removeClass("btnonclick");
                }
            })
        })
    script>
    <style>
        @media screen and (max-width:540px) {
            .swiper-container {
                width: 100%;
                height: 100%;
            }
        }
    style>
body>

html>




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510
    • 511
    • 512
    • 513
    • 514
    • 515
    • 516
    • 517
    • 518
    • 519
    • 520
    • 521
    • 522
    • 523
    • 524
    • 525
    • 526
    • 527
    • 528
    • 529
    • 530
    • 531
    • 532
    • 533
    • 534
    • 535
    • 536
    • 537
    • 538
    • 539
    • 540
    • 541
    • 542
    • 543
    • 544
    • 545
    • 546
    • 547
    • 548
    • 549
    • 550
    • 551
    • 552
    • 553
    • 554
    • 555
    • 556
    • 557
    • 558
    • 559
    • 560
    • 561
    • 562
    • 563
    • 564
    • 565
    • 566
    • 567
    • 568
    • 569
    • 570
    • 571
    • 572
    • 573
    • 574
    • 575
    • 576
    • 577
    • 578
    • 579
    • 580
    • 581
    • 582
    • 583
    • 584
    • 585
    • 586
    • 587
    • 588
    • 589
    • 590
    • 591
    • 592
    • 593
    • 594
    • 595
    • 596
    • 597
    • 598
    • 599
    • 600
    • 601
    • 602
    • 603
    • 604
    • 605
    • 606
    • 607
    • 608
    • 609
    • 610
    • 611
    • 612
    • 613
    • 614
    • 615
    • 616
    • 617
    • 618
    • 619
    • 620
    • 621
    • 622
    • 623
    • 624
    • 625
    • 626
    • 627
    • 628
    • 629
    • 630
    • 631
    • 632
    • 633
    • 634
    • 635
    • 636
    • 637
    • 638
    • 639
    • 640
    • 641
    • 642
    • 643
    • 644
    • 645
    • 646
    • 647
    • 648
    • 649
    • 650
    • 651
    • 652
    • 653
    • 654
    • 655
    • 656
    • 657
    • 658
    • 659
    • 660
    • 661
    • 662
    • 663
    • 664
    • 665
    • 666
    • 667
    • 668
    • 669
    • 670
    • 671
    • 672
    • 673
    • 674
    • 675
    • 676
    • 677
    • 678
    • 679
    • 680
    • 681
    • 682
    • 683
    • 684
    • 685
    • 686
    • 687
    • 688
    • 689
    • 690
    • 691
    • 692
    • 693
    • 694
    • 695
    • 696
    • 697
    • 698
    • 699
    • 700
    • 701
    • 702
    • 703
    • 704
    • 705
    • 706
    • 707
    • 708
    • 709
    • 710
    • 711
    • 712
    • 713
    • 714
    • 715
    • 716
    • 717
    • 718
    • 719
    • 720
    • 721
    • 722
    • 723
    • 724
    • 725
    • 726
    • 727
    • 728
    • 729
    • 730
    • 731
    • 732
    • 733
    • 734
    • 735
    • 736
    • 737
    • 738
    • 739
    • 740
    • 741
    • 742
    • 743
    • 744
    • 745
    • 746
    • 747
    • 748
    • 749
    • 750
    • 751
    • 752
    • 753
    • 754
    • 755
    • 756
    • 757
    • 758
    • 759
    • 760
    • 761
    • 762
    • 763
    • 764
    • 765
    • 766
    • 767
    • 768
    • 769
    • 770
    • 771
    • 772
    • 773
    • 774
    • 775
    • 776
    • 777
    • 778
    • 779
    • 780
    • 781
    • 782
    • 783
    • 784
    • 785
    • 786
    • 787
    • 788
    • 789
    • 790
    • 791
    • 792
    • 793
    • 794
    • 795
    • 796
    • 797
    • 798
    • 799
    • 800
    • 801
    • 802
    • 803
    • 804
    • 805
    • 806
    • 807
    • 808
    • 809
    • 810
    • 811
    • 812
    • 813
    • 814
    • 815
    • 816
    • 817
    • 818
    • 819
    • 820
    • 821
    • 822
    • 823
    • 824
    • 825
    • 826
    • 827
    • 828
    • 829
    • 830
    • 831
    • 832
    • 833
    • 834
    • 835
    • 836
    • 837
    • 838
    • 839
    • 840
    • 841
    • 842
    • 843
    • 844
    • 845
    • 846
    • 847
    • 848
    • 849
    • 850
    • 851
    • 852
    • 853
    • 854
    • 855
    • 856
    • 857
    • 858
    • 859
    • 860
    • 861
    • 862
    • 863
    • 864
    • 865
    • 866
    • 867
    • 868
    • 869
    • 870
    • 871
    • 872
    • 873
    • 874
    • 875
    • 876
    • 877
    • 878
    • 879
    • 880
    • 881
    • 882
    • 883
    • 884
    • 885
    • 886
    • 887
    • 888
    • 889
    • 890
    • 891
    • 892
    • 893
    • 894
    • 895
    • 896
    • 897
    • 898
    • 899
    • 900
    • 901
    • 902
    • 903
    • 904
    • 905
    • 906
    • 907
    • 908
    • 909
    • 910
    • 911
    • 912
    • 913
    • 914
    • 915
    • 916
    • 917
    • 918
    • 919
    • 920
    • 921
    • 922
    • 923
    • 924
    • 925
    • 926
    • 927
    • 928
    • 929
    • 930
    • 931
    • 932
    • 933
    • 934
    • 935
    • 936
    • 937
    • 938
    • 939
    • 940
    • 941
    • 942
    • 943
    • 944
    • 945
    • 946
    • 947
    • 948
    • 949
    • 950
    • 951
    • 952
    • 953
    • 954
    • 955
    • 956
    • 957
    • 958
    • 959
    • 960
    • 961
    • 962
    • 963
    • 964
    • 965
    • 966
    • 967
    • 968
    • 969
    • 970
    • 971
    • 972
    • 973
    • 974
    • 975
    • 976
    • 977
    • 978
    • 979
    • 980
    • 981
    • 982
    • 983
    • 984
    • 985
    • 986
    • 987
    • 988
    • 989
    • 990
    • 991
    • 992
    • 993
    • 994
    • 995
    • 996
    • 997
    • 998
    • 999
    • 1000
    • 1001
    • 1002
    • 1003
    • 1004
    • 1005
    • 1006
    • 1007
    • 1008
    • 1009
    • 1010
    • 1011
    • 1012
    • 1013
    • 1014
    • 1015
    • 1016
    • 1017
    • 1018
    • 1019
    • 1020
    • 1021
    • 1022
    • 1023
    • 1024
    • 1025
    • 1026
    • 1027
    • 1028
    • 1029
    • 1030
    • 1031
    • 1032
    • 1033
    • 1034
    • 1035
    • 1036
    • 1037
    • 1038
    • 1039
    • 1040
    • 1041
    • 1042
    • 1043
    • 1044
    • 1045
    • 1046
    • 1047
    • 1048
    • 1049
    • 1050
    • 1051
    • 1052
    • 1053
    • 1054
    • 1055
    • 1056
    • 1057
    • 1058
    • 1059
    • 1060
    • 1061
    • 1062
    • 1063
    • 1064
    • 1065
    • 1066
    • 1067
    • 1068
    • 1069
    • 1070
    • 1071
    • 1072
    • 1073
    • 1074
    • 1075
    • 1076
    • 1077
    • 1078
    • 1079
    • 1080
    • 1081
    • 1082
    • 1083
    • 1084
    • 1085
    • 1086
    • 1087
    • 1088
    • 1089
    • 1090
    • 1091
    • 1092
    • 1093
    • 1094
    • 1095
    • 1096
    • 1097
    • 1098
    • 1099
    • 1100
    • 1101
    • 1102
    • 1103
    • 1104
    • 1105
    • 1106
    • 1107
    • 1108
    • 1109
    • 1110
    • 1111
    • 1112
    • 1113
    • 1114
    • 1115
    • 1116
    • 1117
    • 1118
    • 1119
    • 1120
    • 1121
    • 1122
    • 1123
    • 1124
    • 1125
    • 1126
    • 1127
    • 1128
    • 1129
    • 1130
    • 1131
    • 1132
    • 1133
    • 1134
    • 1135
    • 1136
    • 1137
    • 1138
    • 1139
    • 1140
    • 1141
    • 1142
    • 1143
    • 1144
    • 1145
    • 1146
    • 1147
    • 1148
    • 1149
    • 1150
    • 1151
    • 1152
    • 1153
    • 1154
    • 1155
    • 1156
    • 1157
    • 1158
    • 1159
    • 1160
    • 1161
    • 1162
    • 1163
    • 1164
    • 1165
    • 1166
    • 1167
    • 1168
    • 1169
    • 1170
    • 1171
    • 1172
    • 1173
    • 1174
    • 1175
    • 1176
    • 1177
    • 1178
    • 1179
    • 1180
    • 1181
    • 1182
    • 1183
    • 1184
    • 1185
    • 1186
    • 1187
    • 1188
    • 1189
    • 1190
    • 1191
    • 1192
    • 1193
    • 1194
    • 1195
    • 1196
    • 1197
    • 1198
    • 1199
    • 1200
    • 1201
    • 1202
    • 1203
    • 1204
    • 1205
    • 1206
    • 1207
    • 1208
    • 1209
    • 1210
    • 1211
    • 1212
    • 1213
    • 1214
    • 1215
    • 1216
    • 1217
    • 1218
    • 1219
    • 1220
    • 1221
    • 1222
    • 1223
    • 1224
    • 1225
    • 1226
    • 1227
    • 1228
    • 1229
    • 1230
    • 1231
    • 1232
    • 1233
    • 1234
    • 1235
    • 1236
    • 1237
    • 1238
    • 1239
    • 1240
    • 1241
    • 1242
    • 1243
    • 1244
    • 1245
    • 1246
    • 1247
    • 1248
    • 1249
    • 1250
    • 1251
    • 1252
    • 1253
    • 1254
    • 1255
    • 1256
    • 1257
    • 1258
    • 1259
    • 1260
    • 1261
    • 1262
    • 1263
    • 1264
    • 1265
    • 1266
    • 1267
    • 1268
    • 1269
    • 1270
    • 1271
    • 1272
    • 1273
    • 1274
    • 1275
    • 1276
    • 1277
    • 1278
    • 1279
    • 1280
    • 1281
    • 1282
    • 1283
    • 1284
    • 1285
    • 1286
    • 1287
    • 1288
    • 1289
    • 1290
    • 1291
    • 1292
    • 1293
    • 1294
    • 1295
    • 1296
    • 1297
    • 1298
    • 1299
    • 1300
    • 1301
    • 1302
    • 1303
    • 1304
    • 1305
    • 1306
    • 1307
    • 1308
    • 1309
    • 1310
    • 1311
    • 1312
    • 1313
    • 1314
    • 1315
    • 1316
    • 1317
    • 1318
    • 1319
    • 1320
    • 1321
    • 1322
    • 1323
    • 1324
    • 1325
    • 1326
    • 1327
    • 1328
    • 1329
    • 1330
    • 1331
    • 1332
    • 1333
    • 1334
    • 1335
    • 1336
    • 1337
    • 1338
    • 1339
    • 1340
    • 1341
    • 1342
    • 1343
    • 1344
    • 1345
    • 1346
    • 1347
    • 1348
    • 1349
    • 1350
    • 1351
    • 1352
    • 1353
    • 1354
    • 1355
    • 1356
    • 1357
    • 1358
    • 1359
    • 1360
    • 1361
    • 1362
    • 1363
    • 1364
    • 1365
    • 1366
    • 1367
    • 1368
    • 1369
    • 1370
    • 1371
    • 1372
    • 1373
    • 1374
    • 1375
    • 1376
    • 1377
    • 1378
    • 1379
    • 1380
    • 1381
    • 1382
    • 1383
    • 1384
    • 1385
    • 1386
    • 1387
    • 1388
    • 1389
    • 1390
    • 1391
    • 1392
    • 1393
    • 1394
    • 1395
    • 1396
    • 1397
    • 1398
    • 1399
    • 1400
    • 1401
    • 1402
    • 1403
    • 1404
    • 1405
    • 1406
    • 1407
    • 1408
    • 1409
    • 1410
    • 1411
    • 1412
    • 1413
    • 1414
    • 1415
    • 1416
    • 1417
    • 1418
    • 1419
    • 1420
    • 1421
    • 1422
    • 1423
    • 1424
    • 1425
    • 1426
    • 1427
    • 1428
    • 1429
    • 1430
    • 1431
    • 1432
    • 1433
    • 1434
    • 1435
    • 1436
    • 1437
    • 1438
    • 1439
    • 1440
    • 1441
    • 1442
    • 1443
    • 1444
    • 1445
    • 1446
    • 1447
    • 1448
    • 1449
    • 1450
    • 1451
    • 1452
    • 1453
    • 1454
    • 1455
    • 1456
    • 1457
    • 1458
    • 1459
    • 1460
    • 1461
    • 1462
    • 1463
    • 1464
    • 1465
    • 1466
    • 1467
    • 1468
    • 1469
    • 1470
    • 1471
    • 1472
    • 1473
    • 1474
    • 1475
    • 1476
    • 1477
    • 1478
    • 1479
    • 1480
    • 1481
    • 1482
    • 1483
    • 1484
    • 1485
    • 1486
    • 1487
    • 1488
    • 1489
    • 1490
    • 1491
    • 1492
    • 1493
    • 1494
    • 1495
    • 1496
    • 1497
    • 1498
    • 1499
    • 1500
    • 1501
    • 1502
    • 1503
    • 1504
    • 1505
    • 1506
    • 1507
    • 1508
    • 1509
    • 1510
    • 1511
    • 1512
    • 1513
    • 1514
    • 1515
    • 1516
    • 1517
    • 1518
    • 1519
    • 1520
    • 1521
    • 1522
    • 1523
    • 1524
    • 1525
    • 1526
    • 1527
    • 1528
    • 1529
    • 1530
    • 1531
    • 1532
    • 1533
    • 1534
    • 1535
    • 1536
    • 1537
    • 1538
    • 1539
    • 1540
    • 1541
    • 1542
    • 1543
    • 1544
    • 1545
    • 1546
    • 1547
    • 1548
    • 1549
    • 1550
    • 1551
    • 1552
    • 1553
    • 1554
    • 1555
    • 1556
    • 1557
    • 1558
    • 1559
    • 1560
    • 1561
    • 1562
    • 1563
    • 1564
    • 1565
    • 1566
    • 1567
    • 1568
    • 1569
    • 1570
    • 1571
    • 1572
    • 1573
    • 1574
    • 1575
    • 1576
    • 1577
    • 1578
    • 1579
    • 1580
    • 1581
    • 1582
    • 1583
    • 1584
    • 1585
    • 1586
    • 1587
    • 1588
    • 1589
    • 1590
    • 1591
    • 1592
    • 1593
    • 1594
    • 1595
    • 1596
    • 1597
    • 1598
    • 1599
    • 1600
    • 1601
    • 1602
    • 1603
    • 1604
    • 1605
    • 1606
    • 1607
    • 1608
    • 1609
    • 1610
    • 1611
    • 1612
    • 1613
    • 1614
    • 1615
    • 1616
    • 1617
    • 1618
    • 1619
    • 1620
    • 1621
    • 1622
    • 1623
    • 1624
    • 1625
    • 1626
    • 1627
    • 1628
    • 1629
    • 1630
    • 1631
    • 1632
    • 1633
    • 1634
    • 1635
    • 1636
    • 1637
    • 1638
    • 1639
    • 1640
    • 1641
    • 1642
    • 1643
    • 1644
    • 1645
    • 1646
    • 1647
    • 1648
    • 1649
    • 1650
    • 1651
    • 1652
    • 1653
    • 1654
    • 1655
    • 1656
    • 1657
    • 1658
    • 1659
    • 1660
    • 1661
    • 1662
    • 1663
    • 1664
    • 1665
    • 1666
    • 1667
    • 1668
    • 1669
    • 1670
    • 1671
    • 1672
    • 1673
    • 1674
    • 1675
    • 1676
    • 1677
    • 1678
    • 1679
    • 1680
    • 1681
    • 1682
    • 1683
    • 1684
    • 1685
    • 1686
    • 1687
    • 1688
    • 1689
    • 1690
    • 1691

    🏠CSS样式代码

    


.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
}

@-webkit-keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from,
    20%,
    53%,
    80%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
}




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85

    五、🎁更多源码

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

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

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

  • 相关阅读:
    今日增长工具精选 | 三款你不知道但很实用的运营工具
    如何在两个相关泛型类之间创建类似子类型的关系
    Java反射机制
    【计算机网络】运输层:单方向传输报文管道利用的情况
    【矩阵分解】PCA - 主成分分析中的数学原理
    六、从零实战企业级K8S本地部署ThingsBoard专业版集群
    微服务网关之Zuul1.0上
    CVODE入门
    vscode | 开发神器vscode快捷键删除和恢复
    Educational Codeforces Round 151 (Rated for Div. 2)
  • 原文地址：https://blog.csdn.net/qq_38517811/article/details/127130626