CSS3 模拟笑脸

参考 http://www.html5tricks.com/demo/html5-css3-smile-face/index.html

它还做了舌头...

一开始我都是用JS实现的动画当然了眼睛的追踪鼠标这部分确实是要用js来实现的

不过对于嘴巴这里使用css transmation也可以

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="smile.css">
        <script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
        <script type="text/javascript" src='smile.js'></script>
    </head>
    
    <body>
    <div class='wholepart'>
        <div class='part1'>
            <div class='eyes'>
                <div class='eye left'>
                    <div class='eye_center'>
                        <div class='pupil'></div>
                    </div>
                </div>
                <div class='eye center'>
                    <div class='center_point'></div>
                </div>
                <div class='eye right'>
                    <div class='eye_center'>
                        <div class='pupil'></div>
                    </div>

                </div>
            </div>
        </div>
        <div class='part2'>
            <div class='mouse_wrapper'>
                <div class='mouse'>
                    <div class='teeth'>
                        <div class='tooth left'></div>
                        <div class='tooth center'>
                            <div class='center_point'></div>
                        </div>
                        <div class='tooth right'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='msg'></div>

    </body>
</html>

css

body
{
    background-color:rgb(238,58,76);
}

.part1
{
    padding:10px;
}

.eyes
{
    width:370px;
    margin:0 auto;
}

.eyes:after
{
    clear:both;
    content:'.';
    visibility:hidden;
    height:0;
    display:block;
}

.eye
{
    width:140px;
    height:140px;
    border:5px solid #FFF;
    border-radius:150px;
    overflow:hidden;
/* Internet Explorer 10 */
    display:-ms-flexbox;;
    -ms-flex-pack:center;
    -ms-flex-align:center;
/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
/* Safari,Opera,and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
/* W3C */
    display:box;
    box-pack:center;
    box-align:center;
}

.eye.left
{
    float:left;
}

.eye.right
{
    float:right;
}
.eye.center{
    float:left;
    border: none;
    width: 70px;
    position: relative;
}

.center_point{
    width: 1px;
    height: 1px;
    background-color: black;
}

.eye .eye_center{
    position: relative;
}
.eye_center .pupil{
    width: 30px;
    height: 30px;
    position: absolute;
    top: -15px;
    left: -15px;
    background-color: white;
    border-radius: 15px;
    overflow: hidden;
}

.part2
{
    height:250px;
    padding:10px;
}

.mouse_wrapper{
    width:350px;
    height:175px;
    margin:0 auto;
}

.mouse
{
    background-color:#58151a;
    width:350px;
    height:175px;
    margin:0 auto;
    -webkit-border-bottom-right-radius:175px;
    -webkit-border-bottom-left-radius:175px;
    -moz-border-radius-bottomright:175px;
    -moz-border-radius-bottomleft:175px;
    border-bottom-right-radius:175px;
    border-bottom-left-radius:175px;
    overflow: hidden;
    transition:all 0.5s;
}

.mouse_wrapper:hover .mouse{
    transition:all 0.5s;
    width: 50px;
    height: 50px;
    border-radius: 25px;

}

.teeth
{
    margin:0 auto;
    width:150px;
    background-color:#58151a;
    transition: all 0.5s; /*当鼠标移开的时候 还原也需要动画*/
}
.mouse_wrapper:hover .teeth{
    transition: all 0.5s;
    margin-top: -200px;
}

.teeth:after
{
    clear:both;
    content:'.';
    visibility:hidden;
    height:0;
    display:block;
}

.tooth
{
    background-color:#FFF;
    height:75px;
    width:50px;
}

.tooth.left
{
    float:left;
}
.tooth.center{
    background-color: transparent;
    float: left;
/* Internet Explorer 10 */
    display:-ms-flexbox;;
    -ms-flex-pack:center;
    -ms-flex-align:center;
/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
/* Safari,Opera,and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
/* W3C */
    display:box;
    box-pack:center;
    box-align:center;    
}
.tooth.right
{
    float:right;
}

$(function(){
    movePupil();
    //changeMouse();
});

function movePupil(){
    $('.wholepart').mousemove(function(event) {
        /* Act on the event */
        //注意offset()和 position()的区别
        //offset指的是相对于窗体的偏移(没有iframe的情况下)
        //position()是相对于最近一级拥有position为absolute或者relative的父元素的偏移
        var x=event.pageX-$('.eyes .center_point').offset().left;
        var y=event.pageY-$('.eyes .center_point').offset().top;
        $('.pupil').css({
            'left': -15+(x/10),
            'top': (y<=0)?(-15+y/2):(-15+y/10)
        });
    });
}

function changeMouse(){
    $('.wholepart').mousemove(function(event) {
        /* Act on the event */
        var x=event.pageX-$('.teeth .center_point').offset().left;
        var y=event.pageY-$('.teeth .center_point').offset().top;        
        $('.mouse').css({
            'height': 175-Math.abs(x/2),
            'width': 350-Math.abs(x),
        });        
        $('.teeth').css({
            'margin-top': -Math.abs(x/2)
        });
    });
}