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

随机推荐

Java程序在向mysql中插入数据的时候出现乱码
今天在往数据库中插入数据的时候中文字符在数据库中就出现了乱码?网上有各种说法,但是适合我的,最终解决我的问题的只有下面一种! 在创建数据库的时候,注意设置编码方式. CREATE DATABASE ` ...
Oracle中的Truncate和Delete语句
Oracle中的Truncate和Delete语句首先讲一下,truncate命令: 语法:TRUNCATE TABLE table; 表格里的数据被清空,存储空间被释放. 运行后会自动 ...
ubuntu菜单面板丢了怎么找回
我的ubuntu菜单面板丢了. 我的ubuntu用的是gnome桌面环境,桌面环境分为三个区域: 1.菜单面板 (1)三个主菜单:应用程序,位置,系统. (2)快速启动区:菜单面板中间的部分称为快 ...
SQL Server存储过程和游标有关实例以及相关网址
内含游标的存储过程实例第一种写法 GO BEGIN IF (object_id('PT_FAULT_REPORT', 'P') is not null) drop proc PT_FAULT_REP ...
第一个输出程序 Console.WriteLine
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
java 中有几种方法可以实现一个线程？用什么关键字修饰同步方法? stop()和 suspend()方法为何不推荐使用？
java5 以前, 有如下两种:第一种:new Thread(){}.start();这表示调用 Thread 子类对象的 run 方法, new Thread(){}表示一个Thread 的匿名子类 ...
html mysql special character
function html_encode(str) { var s = ""; if (str.length == 0) return ""; s = str. ...
Django Web开发【2】Django入门
配置开发环境 1.安装Python,我使用的是centos 6.0,python版本为2.6.6 2.安装Django,Django版本为1.3.5 在Django官网下载对应版本之后,解压压缩包,进 ...
$()和getElementById()的区别
jQuery的成功多归功于其强大的选择器. 然而,相信不少初学jQuery的同学都会遇到下面的问题. 在javascript下,我们可以根据getElementById()来获取页面元素.如下: va ...
一年开发ASP.NET MVC4项目经验总结
一年开发ASP.NET MVC4项目所用所学技术经验总结阅读目录文章背景前端所用技术摘要后端所用技术摘要 1. 文章背景本人2014年从Java转行到C#从事BS项目的开发,刚开始接触的是A ...

CSS3 模拟笑脸

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

随机推荐

热门专题