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:;

    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:;

    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)

        });

    });

}

相关文章