纯css实现微笑眨眼效果-html代码-BFW代码库

纯css实现微笑眨眼效果

代码语言：html

代码描述：纯css实现微笑眨眼效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
  --main-part-color: black; /* Change this color to change the color of the face parts */
}
body{
        background-color: yellow; /* Change this color to change the color of the background */
}
.box{
        margin: auto;
        height: 500px;
        width: 500px;
        position: relative;
        display: block;
        margin-top: 5%;
}
.head{
        height: 500px;
    width: 500px;
    border-radius: 50%;
}
.lefteye{
        position: absolute;
        height: 100px;
        width: 100px;
        border: solid var(--main-part-color) 10px;
        border-color: var(--main-part-color) transparent transparent transparent;
        top: 35%;
        left: 20%;
        animation-name: lefteyewink;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
}
.righteye{
        position: absolute;
        height: 100px;
        width: 100px;
        border: solid var(--main-part-color) 10px;
        border-color: var(--main-part-color) transparent transparent transparent;
        top: 35%;
        left: 60%;
        animation-name: righteyewink;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
}
.mouth{
        position: absolute;
        height: 0px;
        width: 300px;
        border: solid var(--main-.........完整代码请登录后点击上方下载按钮下载查看