@charset "utf-8";

@font-face {
    font-family: "DIY font";
    src: url("https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.12.20/more/HarmonyOS_Sans_SC_Medium.subset.woff2") format("truetype");
    /* 兼容Safari */
}

/* 初始化间距和设置字体 */
* {
    margin: 0px;
    padding: 0px;
    font-family: "DIY font";
}

body {
    /* 自适应背景 */
    position: fixed;
    top: 0;
    left: 0;
    background: url(../img/bg.jpg) fixed no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    max-height: 1080px;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-position: center 0;
    user-select: none;
    font-size: 18px;
}

/* 构建基本结构 */
#main-box {
    margin: 0 auto;
    width: 800px;
    height: 400px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* 顶部小字区域 */
#headimg {
    display: block;
    width: 500px;
    margin: 0 auto;
    margin-top: 50px;
    animation: jxdh 0.5s linear;
}

/* 头像区域 */
#touxiang {
    width: 400px;
    height: 128px;
    margin: 0 auto;
    margin-top: 30px;
    /* background-color: aliceblue; */
}

/* 统一两个头像的基本格式 */
#img1,
#img2 {
    height: 110px;
    border-radius: 50%;
    transition: all 0.5s;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
}

/* 小爱心 */
#love {
    height: 64px;
    width: 64px;
    margin-top: 20px;
    margin-left: 15%;
    -webkit-animation: td 5s infinite ease-in-out;
    animation: td 5s infinite ease-in-out;
}

/* 头像1 */
#img1 {
    float: left;
}

/* 头像2 */
#img2 {
    float: right;
}

/* 两个头像的旋转 */
#img1:hover,
#img2:hover {
    transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    transform: scale(0.9) rotate(720deg);
}

/* 名字区域 */
#name {
    width: 400px;
    height: 24px;
    line-height: 24px;
    margin: 0 auto;
    margin-top: -10px;
    color: #fff;
    /* background-color: #fff;   */
    text-shadow: rgb(0 0 0 / 50%) 0 3px 5px;
    animation: jxdh3 0.8s linear;
}

#name1 {
    float: left;
    margin-left: 10.9%;
}

#name2 {
    float: right;
    margin-right: 11.9%;
}

/* 添加媒体查询 */
@media only screen and (max-width: 600px) {
    #name1,
    #name2 {
        margin-left: 12%;
        margin-right: 14%;
    }
}

/* 倒计时区域 */
#time {
    clear: both;
    text-align: center;
    line-height: 40px;
    height: 80px;
    margin-top: 30px;
    animation: jxdh2 1.5s linear;
    color: #fff;
    text-shadow: 0 0 15px rgb(0 0 0 / 50%);
    /* background-color: #FFF; */
}

#timejishiqi {
    font-size: 24px;
}

/* 小板块区域 */
#box {
    height: 100px;
    width: 400px;
    margin: 0 auto;
    margin-top: 8px;
    /* background-color: yellow; */
    text-align: center;
    line-height: 100px;
}

#box a {
    text-decoration: none;
    display: block;
    color: #FFF
}

/* 底部按钮修饰 */
.smallbox {
    display: inline-block;
    height: 32px;
    width: 100px;
    margin-right: 5px;
    margin-left: 5px;
    text-align: center;
    line-height: 32px;
    border-radius: 20px;
    background: linear-gradient(-45deg, #ff5f6d, #ffc371, #f2709c, #ff9472);
    transition: all .5s ease-in-out;
    animation: gradient 10s infinite cubic-bezier(.62, .28, .23, .99) both;
    background-size: 800% 400%;
    backdrop-filter: blur(5px);
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 35px 35px 68px 0px rgba(145, 192, 255, 0.1), inset -8px -8px 16px 0px rgba(145, 192, 255, 0.1), inset 0px 11px 28px 0px rgb(255, 255, 255);
    text-shadow: 0 0 15px rgb(0 0 0 / 50%);
}

.smallbox:hover {
    animation: gradient 3s infinite;
    transform: scale(1.05);
}

.smallbox:active {
    animation: gradient 3s infinite;
    transform: scale(0.8);
}

#sb1 {
    animation: jxdh5 .5s linear;
}

#sb2 {
    animation: jxdh4 .3s linear;
}

#sb3 {
    animation: jxdh6 .5s linear;
}

/* 文字前的小图标 */
.icon {
    height: 26px;
    margin-bottom: -6px;
    margin-right: -5px;
}

/* 适配手机端 */
@media only screen and (max-width: 639px) {
    body {
        background-image: url(../img/bg3.jpg);
    }

    #headimg {
        width: 350px;
        margin-top: 38px;
    }

    #main-box {
        width: 83%;
        height: 430px;
    }

    #touxiang {
        margin-top: 20px;
        width: 280px;
    }

    #name {
        width: 270px;
        margin-top: -23px;
    }

    /* 统一两个头像的基本格式 */
    #img1,
    #img2 {
        height: 100px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .5);
    }

    /* 小爱心 */
    #love {
        height: 48px;
        width: 48px;
        margin-top: 20px;
        margin-left: 6%;
    }

    /* 头像1 */
    #img1 {
        float: left;
        
    }

    /* 头像2 */
    #img2 {
        float: right;
    }

    #time {
        margin-top: 20px;
        margin-bottom: 40px;
    }

    #timejishiqi {
        font-size: 20px;
    }

    #box {
        height: 134px;
        width: 83%;
        margin: 0 auto;
        margin-top: -20px;
        /* background-color: yellow; */
        text-align: center;
        line-height: 134px;
    }

    .smallbox {
        display: block;
        width: 150px;
        height: 38px;
        line-height: 38px;
        font-size: 20px;
        margin: 0 auto;
        margin-top: 10px;
    }

    #sb1{
        animation: jxdh7 .5s linear;
    }
    #sb2 {
        animation: jxdh4 .3s linear;
    }
    #sb3{
        animation: jxdh8 .5s linear;
    }

    .icon {
        height: 30px;
        margin-bottom: -7px;
        margin-right: -5px;
    }
}

/* 渐显动画 */
@keyframes jxdh {
    0% {
        transform: translateY(25%);
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* 渐显动画2 */
@keyframes jxdh2 {
    0% {
        transform: translateY(40px);
        opacity: 0;
        filter: blur(10px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* 渐显动画3 从上往下*/
@keyframes jxdh3 {
    0% {
        transform: translateY(-50px);
        opacity: 0;
        filter: blur(30px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* 渐显动画4 小变大*/
@keyframes jxdh4 {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
        filter: blur(30px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* 渐显动画5 从上往下*/
@keyframes jxdh5 {
    0% {
        transform: translateX(150px);
        opacity: 0;
        filter: blur(50px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* 渐显动画6 从上往下*/
@keyframes jxdh6 {
    0% {
        transform: translateX(-150px);
        opacity: 0;
        filter: blur(50px);
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0px);
    }
}
/* 渐显动画7 从上往下*/
@keyframes jxdh7 {
    0% {
        transform: translateY(68px);
        opacity: 0;
        filter: blur(30px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}
/* 渐显动画8 从上往下*/
@keyframes jxdh8 {
    0% {
        transform: translateY(-68px);
        opacity: 0;
        filter: blur(30px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

/* 按钮动画 */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 爱心跳动动画 */
@-webkit-keyframes td {

    2%,
    24%,
    80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg);
    }

    4%,
    68%,
    98% {
        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }

    38%,
    6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg);
    }

    8%,
    86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg);
    }

    10%,
    72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg);
    }

    12%,
    64%,
    78%,
    96% {
        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
        transform: translate(0, -0.5px) rotate(1.5deg);
    }

    14%,
    54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg);
    }

    16% {
        -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);
        transform: translate(0, -0.5px) rotate(-1.5deg);
    }

    18%,
    22% {
        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }

    20%,
    36%,
    46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg);
    }

    26%,
    50% {
        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
        transform: translate(0, 0.5px) rotate(0.5deg);
    }

    28% {
        -webkit-transform: translate(0, 0.5px) rotate(1.5deg);
        transform: translate(0, 0.5px) rotate(1.5deg);
    }

    30%,
    40%,
    62%,
    76%,
    88% {
        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
        transform: translate(0, -0.5px) rotate(2.5deg);
    }

    32%,
    34%,
    66% {
        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
        transform: translate(0, 1.5px) rotate(-0.5deg);
    }

    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg);
    }

    44%,
    70% {
        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
        transform: translate(0, 1.5px) rotate(0.5deg);
    }

    48%,
    74%,
    82% {
        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
        transform: translate(0, -0.5px) rotate(0.5deg);
    }

    52%,
    56%,
    60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg);
    }

    58% {
        -webkit-transform: translate(0, 0.5px) rotate(2.5deg);
        transform: translate(0, 0.5px) rotate(2.5deg);
    }

    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg);
    }

    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);
        transform: translate(0, 2.5px) rotate(-0.5deg);
    }

    92% {
        -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);
        transform: translate(0, 0.5px) rotate(-0.5deg);
    }

    94% {
        -webkit-transform: translate(0, 2.5px) rotate(0.5deg);
        transform: translate(0, 2.5px) rotate(0.5deg);
    }

    0%,
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0);
    }
}

@keyframes td {

    2%,
    24%,
    80% {
        -webkit-transform: translate(0, 1.5px) rotate(1.5deg);
        transform: translate(0, 1.5px) rotate(1.5deg);
    }

    4%,
    68%,
    98% {
        -webkit-transform: translate(0, -1.5px) rotate(-0.5deg);
        transform: translate(0, -1.5px) rotate(-0.5deg);
    }

    38%,
    6% {
        -webkit-transform: translate(0, 1.5px) rotate(-1.5deg);
        transform: translate(0, 1.5px) rotate(-1.5deg);
    }

    8%,
    86% {
        -webkit-transform: translate(0, -1.5px) rotate(-1.5deg);
        transform: translate(0, -1.5px) rotate(-1.5deg);
    }

    10%,
    72% {
        -webkit-transform: translate(0, 2.5px) rotate(1.5deg);
        transform: translate(0, 2.5px) rotate(1.5deg);
    }

    12%,
    64%,
    78%,
    96% {
        -webkit-transform: translate(0, -0.5px) rotate(1.5deg);
        transform: translate(0, -0.5px) rotate(1.5deg);
    }

    14%,
    54% {
        -webkit-transform: translate(0, -1.5px) rotate(1.5deg);
        transform: translate(0, -1.5px) rotate(1.5deg);
    }

    16% {
        -webkit-transform: translate(0, -0.5px) rotate(-1.5deg);
        transform: translate(0, -0.5px) rotate(-1.5deg);
    }

    18%,
    22% {
        -webkit-transform: translate(0, 0.5px) rotate(-1.5deg);
        transform: translate(0, 0.5px) rotate(-1.5deg);
    }

    20%,
    36%,
    46% {
        -webkit-transform: translate(0, -1.5px) rotate(2.5deg);
        transform: translate(0, -1.5px) rotate(2.5deg);
    }

    26%,
    50% {
        -webkit-transform: translate(0, 0.5px) rotate(0.5deg);
        transform: translate(0, 0.5px) rotate(0.5deg);
    }

    28% {
        -webkit-transform: translate(0, 0.5px) rotate(1.5deg);
        transform: translate(0, 0.5px) rotate(1.5deg);
    }

    30%,
    40%,
    62%,
    76%,
    88% {
        -webkit-transform: translate(0, -0.5px) rotate(2.5deg);
        transform: translate(0, -0.5px) rotate(2.5deg);
    }

    32%,
    34%,
    66% {
        -webkit-transform: translate(0, 1.5px) rotate(-0.5deg);
        transform: translate(0, 1.5px) rotate(-0.5deg);
    }

    42% {
        -webkit-transform: translate(0, 2.5px) rotate(-1.5deg);
        transform: translate(0, 2.5px) rotate(-1.5deg);
    }

    44%,
    70% {
        -webkit-transform: translate(0, 1.5px) rotate(0.5deg);
        transform: translate(0, 1.5px) rotate(0.5deg);
    }

    48%,
    74%,
    82% {
        -webkit-transform: translate(0, -0.5px) rotate(0.5deg);
        transform: translate(0, -0.5px) rotate(0.5deg);
    }

    52%,
    56%,
    60% {
        -webkit-transform: translate(0, 2.5px) rotate(2.5deg);
        transform: translate(0, 2.5px) rotate(2.5deg);
    }

    58% {
        -webkit-transform: translate(0, 0.5px) rotate(2.5deg);
        transform: translate(0, 0.5px) rotate(2.5deg);
    }

    84% {
        -webkit-transform: translate(0, 1.5px) rotate(2.5deg);
        transform: translate(0, 1.5px) rotate(2.5deg);
    }

    90% {
        -webkit-transform: translate(0, 2.5px) rotate(-0.5deg);
        transform: translate(0, 2.5px) rotate(-0.5deg);
    }

    92% {
        -webkit-transform: translate(0, 0.5px) rotate(-0.5deg);
        transform: translate(0, 0.5px) rotate(-0.5deg);
    }

    94% {
        -webkit-transform: translate(0, 2.5px) rotate(0.5deg);
        transform: translate(0, 2.5px) rotate(0.5deg);
    }

    0%,
    100% {
        -webkit-transform: translate(0, 0) rotate(0);
        transform: translate(0, 0) rotate(0);
    }
}