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

随机推荐

CSS Sprite小图片自动合并工具
css-sprite是将css样式中零星的小图标,小图片合并成大图显示,这样能减小服务器并发连接数,减小服务器负载和带宽使用,有很高的实用价值.这里介绍一些自动合并图片并生成样式的工具. NodeJS ...
Eclipse\MyEclipse 安装tomcat插件后，还需要配置Tomcat Home
Eclipse 安装tomcat插件后,配置Tomcat Home的步骤如下: MyEclipse 安装tomcat插件后,配置Tomcat Home的步骤如下:
前端页面优化：javascript图片延迟加载
自己写了个简单的图片延迟加载小插件. 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应 ...
JQuery初识
一.什么是JQuery JQuery官方网站上是这样解释的:JQuery是一个快速简洁的JavaScript库,它可以简化HTML文档的元素遍历.事件处理.动画及Ajax交互,快速开发We ...
C/C++中使用的正则表达式库
正则表达式正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 正则引擎主要可以分 ...
Spring jdbcTemplate + EasyUI 物理分页
前文说到,新项目中,用到的是SpringMVC + jdbcTemplate,前台是EasyUI,发现同事以前封装分页是逻辑分页,于是,自己动手封装了下物理分页. 这个是核心分页实体: import ...
利用Comparator排序
import java.util.Comparator; class Studentxx { private String nameString; private int age; ...
php-Eclipse对php中的namespace关键字报语法错误的问题
namespace是php5.3以上才支持的, 解决办法:升级IDE 切换Eclipse中的php版本 Window > Preferences > PHP > PHP Int ...
阿里云ECS每天一件事D8：nginx1.7整合php5.4
nginx本身的并不能解析php或者jsp,要转发给后端的php或者tomcat以及其他类似的应用程序服务器来提供服务. 首先我需要完成的配置是实现与php的整合,典型的配置信息如下: server ...

CSS3 模拟笑脸

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

随机推荐

热门专题