纯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%;
}.........完整代码请登录后点击上方下载按钮下载查看