* {
    /* 采用怪异模式下的盒模型：元素的总高度和宽度包含内边距和边框(padding与border)  */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* 没有滚动条 */
    overflow: hidden;
}

.section {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 100vh;
    background: linear-gradient(135deg, #111, #222, #111);
}
.section::before {
    content: "";
    position: absolute;
    width: 30vw;
    height: 30vw;
    /* 红色边框 */
    border: 5vw solid #ff1062;
    /* 圆形边框 */
    border-radius: 50%;
    /* 为边框添加2个下拉阴影 */
    box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
}
.section .section__title {
    position: absolute;
    transform: skewY(-7deg);
    z-index: 10;
    color: #fff;
    text-align: center;
    font-size: 9vw;
    line-height: 2em;
    text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
    5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);
    animation: floating 5s ease-in-out infinite;
}
.section .section__title span {
    text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
    5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc,
    9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);
    font-weight: 700;
    font-size: 3em;
}
.section i {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
    animation: animate linear infinite;
}

@keyframes floating {
    0%,
    100% {
        transform: skewY(-7deg) translate(0, -20px);
    }
    50% {
        transform: skewY(-7deg) translate(0, 20px);
    }
}
/* 利用透明度设置星星明暗变化的动画效果 */
@keyframes animate {
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}