CSS3模拟人物眼睛眨动

辛普森卡通家族头像，模拟眼睛眨动的效果

cartoon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 1411
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div class="body ear">
                            <div class="no-border inner1"></div>
                            <div class="no-border inner2"></div>
                            <div class="no-border body clip"></div>
                        </div>

<div class="right-eye">
                            <div class="no-border right-eye-pupil"></div>
                            <div class="no-border body eyelid-top"></div>
                            <div class="no-border body eyelid-bottom"></div>
                        </div>

<div class="no-border body nose"></div>
                        <div class="body nose-tip"></div>

<div class="left-eye">
                            <div class="no-border left-eye-pupil"></div>
                            <div class="no-border body eyelid-top"></div>
                            <div class="no-border body eyelid-bottom"></div>
                        </div>

<h2>Yellow Bart</h2>
                <p><a class="btn btn-success" href="/uploads/fiddles/10/css/bart.css">View CSS</a>
                </p>
            </div>
            <div class="col-md-3">
                <div class="bart brown">
                    <div class="head">
                        <div class="no-border body hair hair1"></div>
                        <div class="no-border body hair hair2"></div>
                        <div class="no-border body hair hair3"></div>
                        <div class="no-border body hair hair4"></div>
                        <div class="no-border body hair hair5"></div>
                        <div class="no-border body hair hair6"></div>
                        <div class="no-border body hair hair7"></div>
                        <div class="no-border body hair hair8"></div>
                        <div class="no-border body hair hair9"></div>
                        <div class="body mouth-lip2"></div>
                        <div class="no-border body head-left1"></div>
                        <div class="no-border body head-left2"></div>
                        <div class="no-border body head-left3"></div>
                        <div class="no-border body head-left4"></div>
                        <div class="no-border body head-left5"></div>
                        <div class="no-border body head-left6"></div>
                        <div class="no-border body head-left7"></div>
                        <div class="body eyelid"></div>
                        <div class="no-border body mouth"></div>
                        <div class="body mouth-lip"></div>
                        <div class="no-border body head-right2"></div>
                        <div class="no-border body head-right1"></div>
                        <div class="no-border body head-right3"></div>

<div class="no-border body nose"></div>
                        <div class="body nose-tip"></div>

<h2>Brown Bart</h2>
                <p><a class="btn btn-success" href="/uploads/fiddles/10/css/bart.css">View CSS</a>
                </p>
            </div>
            <div class="col-md-3">
                <div class="bart green">
                    <div class="head">
                        <div class="no-border body hair hair1"></div>
                        <div class="no-border body hair hair2"></div>
                        <div class="no-border body hair hair3"></div>
                        <div class="no-border body hair hair4"></div>
                        <div class="no-border body hair hair5"></div>
                        <div class="no-border body hair hair6"></div>
                        <div class="no-border body hair hair7"></div>
                        <div class="no-border body hair hair8"></div>
                        <div class="no-border body hair hair9"></div>
                        <div class="body mouth-lip2"></div>
                        <div class="no-border body head-left1"></div>
                        <div class="no-border body head-left2"></div>
                        <div class="no-border body head-left3"></div>
                        <div class="no-border body head-left4"></div>
                        <div class="no-border body head-left5"></div>
                        <div class="no-border body head-left6"></div>
                        <div class="no-border body head-left7"></div>
                        <div class="body eyelid"></div>
                        <div class="no-border body mouth"></div>
                        <div class="body mouth-lip"></div>
                        <div class="no-border body head-right2"></div>
                        <div class="no-border body head-right1"></div>
                        <div class="no-border body head-right3"></div>

<div class="no-border body nose"></div>
                        <div class="body nose-tip"></div>

<h2>Green Bart</h2>
                <p><a class="btn btn-success" href="/uploads/fiddles/10/css/bart.css">View CSS</a>
                </p>
            </div>
            <div class="col-md-3">
                <div class="bart colourless">
                    <div class="head">
                        <div class="no-border body hair hair1"></div>
                        <div class="no-border body hair hair2"></div>
                        <div class="no-border body hair hair3"></div>
                        <div class="no-border body hair hair4"></div>
                        <div class="no-border body hair hair5"></div>
                        <div class="no-border body hair hair6"></div>
                        <div class="no-border body hair hair7"></div>
                        <div class="no-border body hair hair8"></div>
                        <div class="no-border body hair hair9"></div>
                        <div class="body mouth-lip2"></div>
                        <div class="no-border body head-left1"></div>
                        <div class="no-border body head-left2"></div>
                        <div class="no-border body head-left3"></div>
                        <div class="no-border body head-left4"></div>
                        <div class="no-border body head-left5"></div>
                        <div class="no-border body head-left6"></div>
                        <div class="no-border body head-left7"></div>
                        <div class="body eyelid"></div>
                        <div class="no-border body mouth"></div>
                        <div class="body mouth-lip"></div>
                        <div class="no-border body head-right2"></div>
                        <div class="no-border body head-right1"></div>
                        <div class="no-border body head-right3"></div>

<div class="no-border body nose"></div>
                        <div class="body nose-tip"></div>

<h2>Colourless Bart</h2>
                <p><a class="btn btn-success" href="/uploads/fiddles/10/css/bart.css">View CSS</a>
                </p>
            </div>
        </div>
    </div>
    <div id="push"></div>
</div>

辛普森卡通家族头像，模拟眼睛眨动的效果

cartoon

编辑器支持Emmet

快捷键

辛普森卡通家族头像，模拟眼睛眨动的效果

cartoon

CSS3模拟人物眼睛眨动

纯CSS3实现的卡通人物的眼睛

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：