CSS3 模擬笑臉

時間 2019-11-20

標籤 css3 css 模擬笑臉欄目 CSS 简体版

原文原文鏈接

參考 http://www.html5tricks.com/demo/html5-css3-smile-face/index.htmljavascript

它還作了舌頭... css

一開始我都是用JS實現的動畫固然了眼睛的追蹤鼠標這部分確實是要用js來實現的html

不過對於嘴巴這裏使用css transmation也能夠html5

<!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>

cssjava

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

JSjquery

$(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)
        });
    });
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。