css特效实现表情包

用css特效写的表情包,可以直接复制看效果哟，块来试试吧！

*{
    padding:0;
    margin:0;

}
ul{
    list-style: none;
}


.container{
    /* background-color: violet; */
    width:480px;
    /* 要好好看看margin属性*/
    margin:100px auto;
}


.emoji{
    position: relative;
    box-sizing: border-box;
    float:left;
    width:100px;
    height: 100px;
    background-color:rgb(238, 223, 12);
    border-radius: 50%;
}

.emoji::after{
content:'';
    top:-8px;
    left:-8px;
    width:100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    box-shadow: 8px 8px 0 0 rgb(121, 129, 4);


}
.eye{
    position: absolute;
    width:11px;
    height: 11px;
    top:32px;
    left:16px;
    z-index: 2;
  border-radius: 50%;
  background-color: rgb(32, 198, 240);
}
.eye:last-child{
    left:auto;
    right:16px;
}
.emoji:hover .eye{
    animation: aa 3s linear infinite;
}
@keyframes aa{
    10%{
        height: 11px;
        top:32px

    }
    30%{
        height: 1px;
        top:37px;
    }
    50%{
        height: 11px;
        top:32px;
    }
}

.mouth{
    position: absolute;
    top:48px;
    left:0;
    right:0;
    z-index:3;
    width:70px;
    height:34px;
    margin:0 auto;
    background-color: rgb(14, 67, 241);
    /* 这里时怎么变化的？ */

    border-radius: 0 0 70px 70px;
}
.mouse::after{
    content: '';
    /* background-color: white; */
    position: absolute;

}