纯css实现一个摄像师卡通效果-html代码-BFW代码库

纯css实现一个摄像师卡通效果

代码语言：html

代码描述：纯css实现一个摄像师卡通效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
    margin: 0;
    padding: 0;
}


body {
    background: #e3edf7;
    font-family: sans-serif;
    background-color: #8545b8;

}


.container{
    background-color: #8545b8;
    width: 600px;
    height: 600px;
    padding: 10%;
    /* margin: 200px; */
}

.character {
    position: relative;
    height: 100%;
    width: 100%;
}

/* animation 1 */
.face {
    background-color: #ecb1a4;
    position: absolute;
    top: 20%;
    left: 30%;
    width: 15%;
    height: 20%;
    z-index: 2;
    animation: come-form-left 2s;
}

/* animation 2 */
.eyes {
    position: absolute;
    top: 13%;
    width: 100%;
    height: 100%;
    display: flex;
    left: 10%;
}


.eyes div {
    position: absolute;
    background-color: white;
    height: 23%;
    width: 35%;
    background-color: white;
    border-radius: 50%;
    
}

.eyes div::after {
    content: "";
    position: absolute;
    bottom: 7px;
    width: 12px;
    height: 12px;
    background-color: black;
    border-radius: 50%;
    left: 40%;
}
.eyes .left {
    left: 10%;
}
.eyes .right {
    left: 39%;
}

/* animation 3*/

.mouth {
    position: absolute;
  
    height: 30%;
    width: 45%;
    left: 27%;
    border-bottom-left-radius: 60%;
    border-bottom-right-radius: 60%;
    background-color: #002842;
    overflow: hidden;
    animation:  mounth 2s forwards;
    -webkit-animation-delay: 2s;
    opacity: 0;
    /* display: none; */
}

@keyframes mounth {
    0% {
        bottom: 500%;
        display: block;
        opacity: 1;

    }
    100% {
        opacity: 1;
        bottom: 20%;
        display: block;
    }
}

/* animation 4*/
.teeth {
    position: absolute;
    top: 0;
    width: 70%;
    height: 25%;
    background-color: white;
}

/* animation 5*/
.tounge {
    position: absolute;
    top: 45%;
    right: 40%;
    width: 100%.........完整代码请登录后点击上方下载按钮下载查看