一个不错的笑脸动画，学习学习！！

作者：天空2017.01.13来源：Web前端之家浏览：15040评论:0

关键词：css3 动画

一个不错的动画笑脸

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态笑脸</title>
        <style>
            * {
                box-sizing: border-box;
            }
            
            .container {
                width: 400px;
                min-height: 400px;
                background-color: yellow;
                overflow: auto;
                display: block;
                margin: 0 auto;
                border-radius:200px;
            }
            
            .eyebox {
                width: 400px;
                display: block;
                margin: 0 auto;
                text-align: center;
                margin-top: 100px;
                margin-bottom: 60px;
            }
            
            .eye {
                height: 100px;
                width: 100px;
                background-color: white;
                border: 4px solid white;
                border-radius: 100%;
                display: inline-block;
                margin: 0 20px;
                position: relative;
                padding: 20px;
                overflow: hidden;
            }
            
            .eye .pupil {
                height: 25px;
                width: 25px;
                border-radius: 100%;
                display: inline-block;
                background-color: black;
                position: absolute;
                margin-left: -10px;
                left: 50px;
                margin: 10px;
            }
            
            .smile {
                height: 100px;
                width: 200px;
                border-radius: 0 0 200px 200px;
                background: #ee3a4c;
                margin: 0 auto;
                overflow: hidden;
                transition: all .4s;
                transform-origin: center;
            }
            
            .smile:hover {
                transition: all .4s;
                height: 33.33333px;
                width: 33.33333px;
                border-radius: 100%;
                margin-top: 120px;
            }
            
            .smile:hover .teeth {
                margin-left: -25px;
                margin-top: -40px;
                transition: all .4s;
            }
            
            .smile:hover .tongue {
                transition: all .4s;
                margin-left: -50px;
                /*margin-top: $tongueDimensions*2;*/
            }
            
            .smile .teeth {
                background-color: #fff;
                transition: all .4s;
                height: 33.33333px;
                width: 33.33333px;
                margin-left: 56.66667px;
                position: relative;
            }
            
            .smile .teeth:after {
                content: "";
                background-color: #fff;
                height: 33.33333px;
                width: 33.33333px;
                position: absolute;
                left: 50px;
                top: 0;
                z-index: 10000;
            }
            
            .smile .tongue {
                transition: all .4s;
                height: 100px;
                width: 100px;
                background-color: pink;
                border-radius: 100%;
                margin-top: 40px;
                margin-left: 15px;
                display: inline-block;
                position: relative;
            }
            
            .smile .tongue:after {
                content: '';
                height: 100px;
                width: 100px;
                background-color: pink;
                border-radius: 100%;
                display: inline-block;
                position: absolute;
                left: 50px;
            }
        </style>
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function() {
                var limitX = 50,
                    limitY = 50;
                var containerW = $('.container').width();
                var containerH = $('.container').height();
                $(".container").mousemove(function(e) {
                    var mouseY = Math.min(e.clientY / (containerH * .01), limitY);
                    var mouseX = Math.min(e.clientX / (containerW * .01), limitX);
                    $('.pupil').css('top', mouseY);
                    $('.pupil').css('left', mouseX);
                    console.log(e.clientY + '  ' + e.clientX);
                });
            });
        </script>
    </head>
    <body>
        <div class="container">
            <div class="eyebox">
                <div class="eye EL">
                    <div class="pupil"></div>
                </div>
                <div class="eye ER">
                    <div class="pupil"></div>
                </div>
            </div>
            <div class="smile">
                <div class="teeth"></div>
                <div class="tongue"></div>
            </div>
        </div>
        <div class="readout"></div>
        </div>
    </body>
</html>

赏您的支持是我们创作的动力！