HTML5实现笑脸

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5实现笑脸</title>
<style type="text/css">
.face {width:200px;height:200px;position:absolute;top:200px;left:50%;margin-left:-100px;background-color:#f60;border-radius:50%;animation:switch 0.5s infinite alternate;-webkit-animation:switch 0.3s infinite alternate;-moz-animation:switch 0.5s infinite alternate;}
.shadow {width:200px;height:20px;position:absolute;top:400px;left:50%;margin-left:-95px;border-radius:50%;background-color:rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2);}
.eye {width:40px;height:40px;position:absolute;top:55px;background-color:#fff;border-radius:50%;}
.eye.left {left:30px;}
.eye.right {right:30px;}
.mouth-box {width:100px;height:30px;position:absolute;bottom:30px;left:50px;overflow:hidden;}
.mouth {width:100px;height:60px;position:absolute;bottom:0;z-index:1;background-color:#eee;border-radius:45%;}
.tongue-box {width:50px;height:30px;position:absolute;bottom:0;left:25px;z-index:2;border-radius:30%;overflow:hidden;}
.tongue {width:50px;height:50px;margin-top:15px;background-color:#aaa;border-radius:45%;}

@keyframes switch {
    0% {height:200px;top:200px;}
    100% {height:170px;top:150px;}
}
@-webkit-keyframes switch {
    0% {height:200px;top:200px;}
    100% {height:170px;top:150px;}
}
@-moz-keyframes switch {
    0% {height:200px;top:200px;}
    100% {height:170px;top:150px;}
}
</style>
</head>

<body>



<div class="face">
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="mouth-box">
        <div class="mouth"></div>        
        <div class="tongue-box">
            <div class="tongue"></div>
        </div>
    </div>
</div>
<div class="shadow"></div>


</body>
</html>

 

posted @ 2014-09-10 11:48  赵小磊  阅读(1203)  评论(0)    收藏  举报
回到头部