【html+css】简单眼睛转动小猪

阡小年

已于 2022-08-08 17:00:06 修改

阅读量112

点赞数

分类专栏： bilibili视频源码文章标签：大数据 html css

于 2022-07-07 21:35:05 首次发布

本文链接：https://blog.csdn.net/weixin_45562037/article/details/125667590

版权

bilibili视频源码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

效果视频展示：

简单眼睛转动小猪（CSS）-2022-6-7 13:49:54

全部代码（放心粘贴）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .head{
        position: relative;
        width: 600px;
        height: 600px;
        left: 50%;
        margin-left: -300px;
    }
    .head>.lear{
        position: absolute;
        width: 0px;
        height: 0px;
        left: -30px;
        border: 100px solid pink;
        border-radius:  20px 80px 0px 90px;

        transform: rotateZ(-25deg);
    }
    .head>.rear{
        position: absolute;
        width: 0px;
        height: 0px;
        left: 430px;
        border: 100px solid rgb(255, 192, 203);
        border-radius:  80px 15px 90px 0px;

        transform: rotateZ(25deg)
    }
    .head>.face{
        position: absolute;
        width: 500px;
        height: 500px;
        top: 100px;
        left: 50px;
        border: 1px solid black;
        border-radius: 50%;
        background: pink;
    }
    .head>.face>.leye{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 100px;
        border: 2px solid black;
        border-radius: 50%;
        background: white;
    }
    .head>.face>.leye>div{
        position: relative;
        width: 50px;
        height: 50px;
        top: 30px;
        left: 20px;
        border: 2px solid black;
        border-radius: 50%;
        background: black;
        animation: move 3s 0s infinite; 
    }
    @keyframes move {
        0%{
            transform: translate(0px);
        }
        50%{
            transform: translate(20px);
        }
        100%{
            transform: translate(-10px);
        }
    }
    .head>.face>.reye{
        position: absolute;
        width: 100px;
        height: 100px;
        top: 100px;
        left: 300px;
        border: 2px solid black;
        border-radius: 50%;
        background: white;
    }
    .head>.face>.reye>div{
        position: relative;
        width: 50px;
        height: 50px;
        top: 30px;
        left: 20px;
        border: 2px solid black;
        border-radius: 50%;
        background: black;
        animation: move 3s 0s infinite; 
    }
    .head>.face>.month{
        position: absolute;
        width: 300px;
        height: 200px;
        top: 250px;
        left: 100px;
        border: 2px solid black;
        border-radius: 45%;

        transform: scale(0.9);
    }
    .head>.face>.month>.lnose{
        position: absolute;
        width: 70px;
        height: 70px;
        top: 55px;
        left: 45px;
        border: 2px solid black;
        border-radius: 50%;
        background: rgb(26, 25, 25);
    }
    .head>.face>.month>.rnose{
        position: absolute;
        width: 70px;
        height: 70px;
        top: 55px;
        left: 175px;
        border: 2px solid black;
        border-radius: 50%;
        background: rgb(26, 25, 25);
    }
</style>
<body>
    <div class="head">
        <div class="lear">
            <div></div>
        </div>
        <div class="rear">
            <div></div>
        </div>
        <div class="face">
            <div class="leye">
                <div></div>
            </div>
            <div class="reye">
                <div></div>
            </div>
            <div class="month">
                <div class="lnose"></div>
                <div class="rnose"></div>
            </div>
        </div>
    </div>

</body>
</html>