@import url('https: //fonts.googleapis.com/css?family=Roboto+Condensed:300');

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
    --primary-color: #ff5757;
    --primary-color-dark: #ff2424;
    --black: #444;
    --red: var(--primary-color);
    --orange: #ff9147;
    /*深橙色*/
    --dark-orange: #ff7314;
    --yellow: #fff069;
    /*明黄色*/
    --bright-yellow: #ffe81d;
    --orange: #fe8d00;
    --blue: #4ee4ff;
    /*蓝绿色*/
    --blue-green: #0afbdc;
    /*青绿色*/
    --dark-green: #00bca4;
    /*草绿色*/
    --grass-green: #00d6ba;
    /*水蓝色*/
    --water-blue: #1bdcff;
    /*淡蓝色*/
    --baby-blue:#00c4e7;
    --pink: #ff70b3;
    --brown: #594944;
    --teal: #405955;
    --mint: #56ffe9;
    /*深青色*/
    --dark-cyan: #00bca4;
    --head-radius-top: 50% 80px;
    --head-radius-bottom: 55px;
}

/*精灵球动画设置区*/

/*精灵球自转动画*/
@keyframes rotate {
    0% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(-315deg);
    }

    100% {
        transform: rotate(45deg);
    }
}

/*精灵球X轴移动动画*/
@keyframes translating {
    0% {
        transform: translateX(-160%);
    }

    50% {
        transform: translateX(160%);
    }

    100% {
        transform: translateX(-160%);
    }
}

/*精灵球中心闪烁动画*/
@keyframes color-change {
    0%, 20%, 40%, 60%, 80%, 100% {
        /*设置为透明*/
        background-color: transparent;
    }

    10%, 30%, 50%, 70%, 90% {
        background-color: var(--red);
    }
}

/*皮卡丘动画设置区*/
/*皮卡丘耳朵动画*/
@keyframes rotateLeftEar {
    0%, 100% {transform: rotate(-25deg);}
    50% {transform: rotate(-35deg);}
}

@keyframes rotateRightEar {
    0%, 100% {transform: rotate(25deg);}
    50% {transform: rotate(35deg);}
}

/*皮卡丘尾巴动画*/
@keyframes rotateTail {
    0%, 100% {transform: rotate(-25deg);}
    50% {transform: rotate(-35deg);}
}

/*杰尼龟动画设置区*/
/*杰尼龟嘴巴动画*/
@keyframes mouthOpen {
    0% {width: 25px;}
    100% {width: 7px;}
}

/*杰尼龟吐泡泡动画*/
@keyframes bubbs {
    0%, 10% {
        width: 10px;
        height: 10px;
        border-bottom-right-radius: 0;
        /*不移动，原地放大一倍*/
        transform: translate(0) scale(1);
    }

    30% {
        border-bottom-right-radius: 0;
        /*不移动，原地放大2.3倍*/
        transform: translate(0) scale(2.3);
    }

    100% {
        width: 10px;
        height: 10px;
        /*向左移动70px，向上移动20px，放大4倍*/
        transform: translate(-70px, -20px) scale(4);
    }
}

/*小火龙动画设置区*/
/*小火龙尾巴火焰燃烧的动画*/
@keyframes flicker {
    0% {transform: skewY(0deg);}
    100% {transform: skewY(10deg);}
}


/*妙蛙种子动画设置区*/
/*背后种子动画*/
@keyframes squish {
    /*顺时针旋转45度，放大1.2倍*/
    0% { transform: rotate(45deg) scale(1);}
    100% { transform: rotate(45deg) scale(1.2);}
}


body {
    background-color: var(--primary-color);
    font-family: 'Roboto+Condensed', sans-serif;
    line-height: 1.875;
    /* 从上到下，居中对齐 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 配置精灵球的容器 */
.pokeball-container{
    margin: 50px auto;
    animation: translating 5s infinite;
}

.ball {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: transparent; /*颜色透明*/
    background-image: 
    /* 径向渐变做圆环 最中间的那个圆和一个边框 */
    radial-gradient(circle, transparent 11%, #a1a1aa 12%, transparent 12%),
    /* 白色的圆环 */
    radial-gradient(circle, #fff 16%, transparent 16%),
    /* 黑色的圆环 */
    radial-gradient(circle, #000 20%, transparent 20%),
    /* 线性渐变做球的两半颜色 红色的上半部分*/
    linear-gradient(to bottom, rgb(253, 1, 1) 48%, transparent 48%),
    /* 中间的黑色线段部分 */
    linear-gradient(to bottom, transparent 48%, #000 48%, #000 52%, transparent 52%),
    /* 白色的下面部分 */
    linear-gradient(to bottom, transparent 52%, rgb(254, 254, 254) 52%)
    ;

    background-repeat: no-repeat;
    /* 设置形状的大小和宽度 */
    background-size: 
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        96% 100%,
        100% 100%
    ;
    /* 设置各个形状的位置 */
    background-position: 
        0 0,
        0 0,
        0 0,
        0 0,
        50% 0,
        0 0
    ;

    &::before {
        content: '';
        position: absolute;
        top: calc(50% - 16px);
        left: calc(50% - 16px);
        background-color: red;
        width: 33px;
        height: 33px;
        border-radius: 50%;
        /*精灵球中心设置闪烁动画*/
        animation: color-change 5s infinite;
    }
    /*设置精灵球自行旋转的动画：名称：rotate；持续时间：5s；无限循环。*/
    animation: rotate 5s infinite;
}
/*创建展示精灵的容器*/
.container-box {
    position: relative;
    width: 980px;
    margin: 40px auto;
    padding: 65px;
    padding-bottom: 0;
    display: flex;
    justify-content: space-between;
    box-shadow: 10px 10px 0 var(--primary-color-dark);
    background-color: #fff;
}
/*配置精灵们的统一参数*/
.pokemon {
    position: relative;
    display: inline-block;

    /*配置精灵双手的通用样式*/
    &::before,
    &::after {
        content: '';
        position: absolute;
        z-index: 0;
        bottom: -30px;
        height: 40px;
        width: 25px;
        border-bottom-left-radius: 50% 40px;
        border-bottom-right-radius: 50% 40px;
    }
    /*设置左右两只手*/
    &::before {
        left: 40px;
        transform: rotate(-10deg);
    }

    &::after {
        right: 40px;
        transform: rotate(10deg);
    }
}
/*头部的通用样式*/
.head {
    position: relative;
    z-index: 5;
    height: 155px;
    width: 200px;
    border-top-left-radius: var(--head-radius-top);
    border-top-right-radius: var(--head-radius-top);
    border-bottom-left-radius: var(--head-radius-bottom);
    border-bottom-right-radius: var(--head-radius-bottom);
    overflow: hidden;

    /*头部里面的div全部设置为绝对定位，方便移动到相应的位置*/
    > div {
        position: absolute;
    }

    .eye {
        bottom: 35px;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        /*暂时把每个眼睛设置为黑色，后期各自精灵的眼睛配置不一样的颜色*/
        background-color: #000;

        /*左眼*/
        &:nth-child(1) {
            left: 30px;
        }
        /*右眼*/
        &:nth-child(2) {
            right: 30px;
        }
    }

}
/*嘴巴的样式*/
.mouth {
    left: 50%;
    bottom: 40px;
    height: 10px;
    width: 25px;
    transform: translateX(-50%);
    /*利用伪元素创建两个下弦月嘴巴*/
    &::before,
    &::after {
        content: '';
        position: absolute;
        height: 100%;
        width: 50%;
        border-radius: 50%;
        border-bottom: 3px var(--black) solid;
    }

    &::after {
        left: 50%;
    }

}
/*脸颊的样式*/
.cheek {
    bottom: 15px;
    height: 15px;
    width: 30px;
    border-radius: 50px / 30px;
    background-color: rgba(220, 136, 194, 0.8);
    
    /*:nth-child() 选择器根据父元素内的所有兄弟元素的位置来选择子元素。*/
    &:nth-child(3) {
        left: 10px;
    }
    &:nth-child(4) {
        right: 10px;
    }
}

/*皮卡丘的单独样式*/

#pika {
    /*皮卡丘耳朵的样式*/
    .ear {
        position: absolute;
        top: -30px;
        height: 80px;
        width: 40px;
        /*通过边角的弧度，裁剪出需要的形状*/
        border-top-left-radius: 25px 100%;
        border-top-right-radius: 25px 100%;
        background-color: var(--yellow);
        overflow: hidden;
        /*更改变换的中心为底部中心*/
        transform-origin: center bottom;
        transition: 0.3s;

        /*增加耳朵上的黑色*/
        &::after {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            height: 40px;
            width: 150%;
            background-color: var(--black);
        }
        /*调整出两个耳朵*/
        &:nth-child(1) {
            left: 5px;
            transform: rotate(-20deg);
            /*使耳朵的黑色部分也一起倾斜*/
            &::after {
                transform: rotate(-15deg);
            }
        }

        &:nth-child(2) {
            right: 5px;
            transform: rotate(20deg);

            &::after {
                transform: rotate(15deg);
            }
        }
    }

    /*皮卡丘头部的样式*/
    .head {
        background-color: var(--yellow);
    }

    /*皮卡丘眼睛的样式*/
    .eye {
        background-color: var(--black);
    }

    /*皮卡丘的两个脸颊的样式*/
    .cheek {
        bottom: -10px;
        height: 45px;
        width: 45px;
        border-radius: 50%;
        background-color: var(--red);

        &:nth-child(3) {
            left: -10px;
        }

        &:nth-child(4) {
            right: -10px;
        }
    }

    /*皮卡丘的尾巴的样式*/

    .tail {
        /*尾巴由两个部分组成，使用:bofore伪元素实现*/
        position: absolute;
        left: calc(50% - 10px);
        top: -25px;
        width: 20px;
        height: 30px;
        background-color: var(--bright-yellow);
        /*逆时针旋转25度*/
        transform: rotate(-25deg);
        /*变换中心转换成底部中心*/
        transform-origin: center bottom;

        &::before {
            content: '';
            position: absolute;
            top: -25px;
            width: 50px;
            height: 35px;
            border-radius: 5px;
            background-color: var(--bright-yellow);
        }
    }

    /*皮卡丘的双手的样式*/
    /*因前面已经有过通用的设置，此处只需添加皮卡丘双手的颜色即可*/
    &::before,
    &::after {
        background-color: var(--bright-yellow);
    }

    /*设置鼠标浮上去的动画*/

    &:hover {
        /*耳朵和尾巴左右摇摆*/
        .ear {
            &:nth-child(1) {
                /*变换时间：1.2s；无限循环*/
                animation: rotateLeftEar 1.2s infinite;
            }
            &:nth-child(2) {
                animation: rotateRightEar 1.2s infinite;
            }
        }

        .tail {
            animation: rotateTail 1.2s infinite;
        }
    }
}

/*杰尼龟的样式*/
#squirt {
    /*杰尼龟头部的样式*/
    .head {
        background-color: var(--blue);

        /*杰尼龟眼睛的样式*/
        .eye {
            background-color: var(--brown);
        }
    }

    /*杰尼龟的双手的样式*/
    &::before,
    &::after {
        background-color: var(--water-blue);
    }

    /*杰尼龟的尾巴的样式*/
    .tail {
        position: absolute;
        left: calc(50% - 15px);
        top: -40px;
        height: 100px;
        width: 100px;
        border-radius: 50px;
        border-left: 30px solid var(--water-blue);
        transform-origin: center bottom;
        transition: 0.3s;

        &::before,
        &::after {
            content: '';
            position: absolute;
        }

        &::before {
            top: 0;
            left: -14px;
            height: 60px;
            width: 60px;
            border-radius: 50%;
            background-color: var(--water-blue);
        }

        &::after {
            top: 25px;
            left: -10px;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            border-left: solid 3px var(--baby-blue);
            border-top: solid 3px var(--baby-blue);
        }
    }

    /*杰尼龟嘴边的泡泡样式*/
    .bubble {
        position: absolute;
        z-index: 14;
        bottom: 40px;
        left: 85px;
        border-radius: 50%;
        background-color: var(--blue);
        opacity: 0.7;
        /*显示元素与直属父元素的背景和兄弟元素背景的混合情况：滤色模式，重叠部分更亮*/
        mix-blend-mode: screen;
        transform-origin: right bottom;
    }

    /*设置杰尼龟动画，鼠标浮上去，显示动画*/
    &:hover {
        .tail {
            /*逆时针转动10度*/
            transform: rotate(-10deg);
        }

        .mouth {
            animation: mouthOpen 0.4s;
            width: 7px;
            height: 5px;
            background-color: var(--brown);
            border-radius: 50%;


            &::before,
            &::after {
                /*可见度设置为不可见*/
                visibility: hidden;
            }
        }

        .bubble {
            animation: bubbs 1.4s 0.4s infinite;
        }
    }
}

/*小火龙的样式*/
#char {
    /*头部颜色*/
    .head {
        background-color: var(--orange);
    }

    /*眼睛颜色*/
    .eye {
        background-color: var(--teal);
    }

    /*双手的颜色*/
    &::before,
    &::after {
        background-color: var(--dark-orange);
    }

    /*尾巴的样式*/
    .tail {
        /*尾巴的主体部分*/
        position: absolute;
        left: calc(50% - 10px);
        top: -40px;
        width: 90px;
        height: 100px;
        border-radius: 50px;
        border-left: 35px solid var(--dark-orange);
        transform-origin: center bottom;
        transition: 0.3s;

        /*尾巴末端的火炎*/
        &::before,
        &::after {
            content: '';
            position: absolute;
        }

        /*火炎的外焰*/
        &::before {
            left: calc(50% - 40px);
            top: -35px;
            width: 50px;
            height: 50px;
            border-radius: 50% 0 50% 50%;
            background-color: var(--yellow);
        }

        /*火炎的焰芯*/
        &::after {
            left: calc(50% - 30px);
            top: -15px;
            width: 20px;
            height: 20px;
            border-radius: 50% 0 50% 100%;
            background-color: var(--red);
        }
    }

    /*小火龙的动画设置*/
    &:hover {
        /*尾巴的动画设置*/

        .tail {
            /*逆时针转动15度*/
            transform: rotate(-15deg);

            /*火炎的动画*/

            &::before,
            &::after {
                animation: flicker 0.4s infinite;
            }

            /*内外焰的动画持续时间不同，外焰多余内焰一倍，造成动画抖动的频率不一的效果*/
            &::before {
                animation-duration: 0.4s;
            }
            &::after {
                animation-duration: 0.2s;
            }
        }
    }
}

/*妙蛙种子的样式*/
#bulba {
    /*耳朵的样式*/
    .ear {
        position: absolute;
        z-index: 3;
        top: -10px;
        height: 40px;
        width: 55px;
        border-top-left-radius: 50px 70px;
        border-top-right-radius: 50px 70px;
        background-color: var(--mint);
        transform-origin: center bottom;
        transition: 0.3s;

        /*左边耳朵，位于距左边5px，逆时针旋转40度*/
        &:nth-child(1) {
            left: 5px;
            transform: rotate(-40deg);
        }
        /*右边耳朵，位于距右边5px，顺时针旋转40度*/
        &:nth-child(2) {
            right: 5px;
            transform: rotate(40deg);
        }

    }

    /*头部的样式*/
    .head {
        /*颜色*/
        background-color: var(--mint);

        /*脸部的斑块*/
        &::before,
        &::after {
            content: '';
            position: absolute;
            background-color: var(--dark-cyan);
        }

         /*左边大斑块的样式*/
        &::before {
            top: 40px;
            left: 60px;
            width: 35px;
            height: 35px;
            border-bottom-left-radius: 100%;
            border-bottom-right-radius: 10px 40px;
            border-top-left-radius: 40px 10px;
            border-top-right-radius: 5px;
            transform: rotate(-20deg);
        }

        /*右边小斑块的样式*/
        &::after {
            top: 20px;
            right: 40px;
            width: 20px;
            height: 20px;
            border-bottom-left-radius: 100%;
            border-bottom-right-radius: 5px 10px;
            border-top-left-radius: 10px 5px;
            border-top-right-radius: 5px;
            transform: rotate(20deg);
        }
    }

    /*眼睛的样式*/
    .eye {
        background-color: var(--black);
    }

    /*双手的样式*/
    &::before,
    &::after {
        background-color: var(--blue-green);
    }

    /*背部的种子样式*/
    .bulbs {
        /*主体样式*/
        position: absolute;
        z-index: 2;
        top: -30px;
        left: calc(50% - 50px);
        width: 100px;
        height: 100px;
        transform: rotate(45deg);

        /*两个副体样式*/
        &::before,
        &::after {
            content: '';
            position: absolute;
            z-index: 1;
            width: 80px;
            height: 80px;
            border-radius: 0 50% 100% 50%;
            background-color: var(--dark-green);
        }

        /*左边的副题向左移动20px，向下移动25px，顺时针旋转15度*/
        &::before {
            transform: translate(-20px, 25px) rotate(15deg);
        }
        /*右边的副题向右移动25px，向上移动20px，顺时针旋转15度*/
        &::after {
            transform: translate(25px, -20px) rotate(-15deg);
        }

        /*种子的主体*/
        .bulb {
            position: absolute;
            z-index: 3;
            width: 100%;
            height: 100%;
            border-radius: 0 50% 100% 50%;
            background-color: var(--grass-green);
        }
    }

    /*设置妙蛙种子的动画*/
    &:hover {
        /*耳朵的动画*/
        .ear {
            /*左耳向下移动5px，逆时针旋转55度*/
            &:nth-child(1) {
                transform: translateY(5px) rotate(-55deg);
            }
            /*右耳向下移动5px，顺时针旋转55度*/
            &:nth-child(2) {
                transform: translateY(5px) rotate(55deg);
            }
        }

        /*背后种子的动画效果*/
        .bulbs {
            animation: squish 1.6s infinite;
        }
    }
}