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内核的浏览器 ...

随机推荐

HDU 4937 Lucky Number 规律题_(:зゝ∠)_
把全部合法的进制打出来会发现合法的进制都是在 n/3 n/4 n/5的边上然后暴力边上的进制数.. #include <cstdio> #include <set> type ...
获取extjs text列修改过数据
ExtJS中表格的特性简介表格由类Ext.grid.GridPanel定义,继承自Ext.Panel,xtype为grid 表格的列信息由Ext.grid.ColumnModel定义表格的数据存储 ...
JS操作JSON的方法总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
查看memcached依赖的库
LD_DEBUG=libs ./memcached -v
html mysql special character
function html_encode(str) { var s = ""; if (str.length == 0) return ""; s = str. ...
Spark学习之RDD的理解
转自:http://www.infoq.com/cn/articles/spark-core-rdd/ 感谢张逸老师的无私分享 RDD,全称为Resilient Distributed Dataset ...
mysql快速翻页查询方法
SELECT SQL_NO_CACHE *FROM softdb_testWHERE id > (SELECT idFROM softdb_testORDER BY id DESCLIMIT 5 ...
PyCrpyto windows安装使用方法
PyCrypto - The Python Cryptography Toolkit PyCrypto是一个免费的加密算法库,支持常见的DES.AES加密以及MD5.SHA各种HASH运算. ---- ...
iOS 使用xib创建cell的两种初始化方式
曾几何时,被自己坑过,为了防止下次继续被自己坑,我决定了!在每个我能看到的地方,都把问题写一遍!!! 方法一: ? 1 2 3 4 第一步: [self.collectionView register ...
关于CSS动画几点要注意的地方
关于CSS动画几点要注意的地方 js操作transition无效果先看这个demo以及stackoverflow的问题 http://jsfiddle.net/ThinkingStiff/QNnnQ ...

CSS3 模拟笑脸

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

随机推荐

热门专题