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)

        });

    });

}

CSS3 模拟笑脸的更多相关文章

css3模拟jq点击事件
还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
纯CSS3模拟星体旋转效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
CSS3模拟IOS滑动开关
前言 H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释效果代码 <!DOCTYPE html> <html lang=" ...
css3 模拟标牌震荡效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
8款给力HTML5/CSS3应用插件可爱的HTML5笑脸
1.HTML5/CSS3实现笑脸动画非常可爱今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 在线演示源码下载 2 ...
分享9款用HTML5/CSS3制作的动物人物动画
1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canvas头发飘逸动画很酷的HTML5动画 HTML5 ...
7款纯CSS3实现的炫酷动画应用
1.纯CSS3实现人物摇头动画这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...
那些不错的 [ Html5 + CSS3 + Canvas ] 效果！
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

随机推荐

Android Navigation Drawer(导航抽屉)
Google I/O 2013 Android 更新了Support库,新版本的Support库中新加入了几个比较重要的功能. 添加 DrawerLayout 控件,支持创建 Navigation ...
Unity3d 要点板书
WWW.unity3d.com.cn Unity Project unity的项目文件/专案 Scene unity的场景文件 Scene 场景视窗 Game 预览视窗 H．.. 物件视窗 Pro ...
asp.net软件测试学习
ormaping类是,将数据操作封装起来的一种数据操作方法,在测试的时候,如果说,insert之后对obj对象赋值赋值,每个属性应该对应自己的objDataRow["REGISTERID&q ...
创建Java项目报错处理
好久没用Eclipse编写Java程序了,今天创建一个Java项目的时候,老报错,错误信息如下: Implicit super constructor Object() is undefined fo ...
Tip插件的使用
Tip.js概述——美化弹窗插件开源美化弹窗插件1.JavaScript原生代码2.美化网站用户界面 Tip.js插件的显示效果 Tip.js的使用方法 Tip({ str:'alert上需要弹出显 ...
转载 LayoutInflater的inflate函数用法详解
http://www.open-open.com/lib/view/open1328837587484.html LayoutInflater的inflate函数用法详解 LayoutInflater ...
JavaSE复习日记 : 继承关系和super关键字以及继承关系中方法的覆写
/* * 类的继承和super关键字 * * 软件开发的三大目的: * 可拓展性; * 可维护性; * 可重用性; * * 这里单说下可重用性这一项: * 为了代码复用,复用方式有: * 函数的调用复 ...
ubuntu, Debian, CentOS
ubuntu源自debian,内核很多文档都还是debian的字样,稳定性逐渐增强,基本满足日常开发. debian的核心稳定,性能强劲. centos的内核版本低,安全性高. 选择Debian是因为 ...
DSP的cache一般在何时会生效，防止在cache使用造成数据不一致
在使用DSP的cache使能所有的ddr操作时,发现如果只是写操作,根据cache的机制,如果没有在了L1级hit,则直接使用write buffer来完成写操作. 假如hit的话,那之前一定发生过读 ...
Android 4.0 ProGuard 代码混淆以及 proguard returned with error code 1.See console异常的解决方法
最近呢说要上线,就去找了下上线的方法...之前做过代码混淆,用的是progarud.cfg,但是呢自己反编译了之后还是无效,然后就丢着先不管了,因为实在不知道什么情况.今天来上线的时候结果总是报错,总 ...

CSS3 模拟笑脸

CSS3 模拟笑脸的更多相关文章

随机推荐

热门专题