纯css打造QQ企鹅

最新推荐文章于 2022-03-04 13:31:28 发布
最新推荐文章于 2022-03-04 13:31:28 发布
阅读量1.3k 收藏
点赞数
分类专栏： css&css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ruizhengyun/article/details/8885622
版权 

<!DOCTYPE html>
<html>
<head>
        <meta charset="gbk" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">
/**
此类用来管理QQ的动作
比如，挤眼，走路，跳跃,听歌等
*/
function qq(){
    this.eye_wink_flag = false;        //控制眨眼的标记
    this.eye_flag = false;               //眼睛状态标记
    this.words = new Array(
        '今天的天气很好的哇,主人为何不出去走走呢？',
        '主人辛苦了！',
        '今天的天气可不怎么好啊',
        '哎,又是一个情深深雨朦朦的季节！',
        '想死了啊,糟糕！',
        '我勒个艹！',
        '在炎热的夏季一定要记得睡午觉哦！',
        '据说班花在想你哦 <img src="../blog/face/f26.gif" />',
        '多读书,多看报,少吃零食,多睡觉!'
    );
    this.setEyes();
    this.setHover();
    this.setShake();
    this.setWords();
}
qq.prototype = {
    //控制挤眼动作
    setEyes: function(){
        setInterval(function(){
            qq.eye_wink_flag? qq.eye_wink_flag=false:qq.eye_wink_flag=true;
        }, 5000);
        setInterval(function(){
            qq.eye_flag? qq.eye_flag=false:qq.eye_flag=true;
            if ( qq.eye_wink_flag ){
                if ( qq.eye_flag ){
                $(".qeye").css({"-moz-transform":"scale(1,0.08)","-o-transform":"scale(1,0.08)","-webkit-transform":"scale(1,0.08)",});
                }else{
                $(".qeye").css({"-moz-transform":"scale(1,1)","-o-transform":"scale(1,1)","-webkit-transform":"scale(1,1)",});
                qq.eye_wink_flag = false;
                }
            }
        }, 150);
    },
    //当鼠标晃到眼睛上面时，眼睛闭上
    setHover: function(){
        $(".qeye").hover(function(){
            $(this).css({"-moz-transform":"scale(1,0.08)","-webkit-transform":"scale(1,0.08)","-o-transform":"scale(1,0.08)","cursor":"pointer"});
        }, function(){
            $(this).css({"-moz-transform":"scale(1,1)","-webkit-transform":"scale(1,1)","-o-transform":"scale(1,1)"});
        });
    },
    //晃动身体
    setShake: function(){
        setInterval(function(){
            if ( Math.random() <= 0.5 ){
                $("#qq_body").css({"-moz-transform":"rotate(10deg)",
                    "-o-transform":"rotate(10deg)", "-webkit-transform":"rotate(10deg)"
                });
                setTimeout(function(){$("#qq_body").css({"-moz-transform":"rotate(0deg)",
                    "-o-transform":"rotate(0deg)", "-webkit-transform":"rotate(0deg)"
                });}, 850);
            }else{
                $("#qq_body").css({"-moz-transform":"rotate(-10deg)",
                    "-o-transform":"rotate(-10deg)", "-webkit-transform":"rotate(-10deg)"
                });
                setTimeout(function(){$("#qq_body").css({"-moz-transform":"rotate(0deg)",
                    "-o-transform":"rotate(0deg)", "-webkit-transform":"rotate(0deg)"
                });}, 850);
            }
        }, 30000);
    },
    //互动语言
    setWords: function(){
        setInterval(function(){
            $("#qq_tip p").html(qq.words[Math.ceil(Math.random()*qq.words.length-1)]);
            $("#qq_tip").css({"opacity":"1"});
            setTimeout(function(){$("#qq_tip p").html("");$("#qq_tip").css({"opacity":"0"});}, 6000);
        }, 30000);
    }
}
</script>
<style>
body { font-family:"Lucida Sans Unicode"; font-size:14px; color:#4b4b4b; text-align:center; }
* { padding:0px; margin:0px; word-break:break-all; }
/* 外围容器 */
#container { position:relative; margin-left:auto; margin-right:auto; width:1000px; top:150px; left:150px;}
.qq { position:absolute; width:200px; height:210px; top:50px; }
/* 企鹅的头部 */
#qq_head { position:absolute; width:150px; height:100px; left:25px;
    border-radius:150px 150px 150px 150px / 140px 140px 50px 50px;
    background:-moz-radial-gradient(100px 35px, circle, rgb(70,70,70) 0%, rgb(50,50,50) 30%, rgb(30,30,30) 100%);
    background:-o-radial-gradient(100px 35px, circle, rgb(70,70,70) 0%, rgb(50,50,50) 30%, rgb(30,30,30) 100%);
 background:-webkit-gradient(radial, 100 35, 0, 156 36, 160,
from(rgb(70,70,70)), to(rgb(30,30,30)), color-stop(30%, rgb(50,50,50)));
}
.qeye { position:absolute; width:22px; height:32px; border-radius:100%; background:rgb(235,235,235); top:28px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.8), 0 0 1px rgba(255,255,255,0.3);
    -moz-transition:-moz-transform 0.1s linear;
    -o-transition:-o-transform 0.1s linear;
    -webkit-transition:-webkit-transform 0.1s linear;
}
.eyeball { position:absolute; width:12px; height:15px; border-radius:100%; background:rgb(45,45,45);
    box-shadow:0 1px 1px rgba(0,0,0,0.5);
}
#lball { left:6px; top:12px; }
#rball { left:4px; top:12px; }
#qleye { left:50px; }
#qreye { left:85px; }
#qmouth { position:absolute; width:84px; height:22px; top:62px; left:34px; border-radius:100%;
    box-shadow:inset 0 0 1px rgba(0,0,0,0.5), 0 0 1px rgba(255,255,255,0.3); background:rgb(255,156,6);
}
#lip { position:absolute; width:64px; height:24px; border-radius:100%; background:rgb(255,156,6); top:1px; left:10px;
    box-shadow:0 2px 1px rgb(45,45,45), inset 0 -6px 0 orange;
}
/* 企鹅的肚子 */
#qq_stomach { position:absolute; width:180px; height:120px; top:75px; left:10px;
    box-shadow:0 1px 1px rgba(0,0,0,0.5);
    border-radius:46px 46px 160px 160px / 100px 100px 120px 120px;
    background:-moz-linear-gradient(top, rgb(45,45,45), rgb(25,25,25));
    background:-webkit-gradient(linear, center top, center bottom, from(rgb(45,45,45)), to(rgb(25,25,25)));
    background:-o-linear-gradient(top, rgb(45,45,45), rgb(25,25,25));
}
#stomach_wrap { position:absolute; width:150px; height:100px; bottom:2px; left:15px; background:seashell;
    border-radius:46px 46px 160px 160px / 100px 100px 120px 120px;
}
#stomach_wrap:before { content:'CSS3'; position:absolute; font-size:14px; left:100px; top:30px; font-weight:bold;
    text-shadow:0 1px 0 orange; -moz-transform:rotate(-10deg); -o-transform:rotate(-10deg); -webkit-transform:rotate(-10deg);
}
/* 企鹅的围巾 */
#chief { position:absolute; width:156px; height:80px; left:22px; top:40px; }
#chief_wrap { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:100%;
    box-shadow:inset 0 -6px 6px rgba(0,0,0,0.5), inset 0 -22px 0 red;
}
#chief_tail { position:absolute; width:20px; height:40px; background:red; top:60px; left:30px;
    border-radius:5px 20px 5px 5px / 5px 15px 5px 5px;
    box-shadow:inset 0 15px 15px rgba(0,0,0,0.3), 2px 2px 2px rgba(0,0,0,0.5), 2px 3px 0 darkred;
    -moz-transform-origin:0px 10px; -webkit-transform-origin:0px 10px;
    -moz-animation:qqwind 3s linear infinite; -webkit-animation:qqwind 3s linear infinite;
    -moz-animation-delay:2s; -webkit-animation-delay:2s;
}
@-moz-keyframes qqwind {
    30% { -moz-transform:rotate(6deg); }
    70% { -moz-transform:rotate(-6deg); }
}
@-webkit-keyframes qqwind {
    30% { -webkit-transform:rotate(6deg); }
    70% { -webkit-transform:rotate(-6deg); }
}
/* 企鹅的双脚 */
#lfoot,#rfoot { position:absolute; width:80px; height:40px; border-radius:100% / 90%; top:170px; }
#lfoot { left:16px;
    box-shadow:2px 2px 2px rgba(0,0,0,0.5), inset -4px -2px 2px rgba(0,0,0,0.5), inset 2px 5px 2px rgba(255,156,6,0.8);
    background:-o-radial-gradient(0px 0px, circle, rgb(255,156,6) 0%, rgb(255,100,0) 30%, rgb(117,0,0) 100%);
 background:-webkit-gradient(radial, 0 0, 0, 10 10, 100,
from(rgb(255,100,0)), to(rgb(117,0,0)), color-stop(30%,
rgb(255,100,0)));
    background:-moz-radial-gradient(0px 0px, circle, rgb(255,156,6) 0%, rgb(255,100,0) 30%, rgb(117,0,0) 100%);
}
#rfoot { right:16px;
    box-shadow:-2px 2px 2px rgba(0,0,0,0.5), inset 4px -2px 2px rgba(0,0,0,0.5), inset -2px 5px 2px rgba(255,156,6,0.8);
    background:-o-radial-gradient(100% 0%, circle, rgb(255,156,6) 0%, rgb(255,100,0) 30%, rgb(117,0,0) 100%);
 background:-webkit-gradient(radial, 80 0, 0, 70 10, 100,
from(rgb(255,100,0)), to(rgb(117,0,0)), color-stop(30%,
rgb(255,100,0)));
    background:-moz-radial-gradient(100% 0%, circle, rgb(255,156,6) 0%, rgb(255,100,0) 30%, rgb(117,0,0) 100%);
}
#lsole,#rsole { position:absolute; width:30px; height:20px; border-radius:100% / 85%; top:16px; }
#lsole { left:3px; box-shadow:inset 3px -1px 1px rgba(0,0,0,0.3);
    -moz-transform:rotate(16deg); -o-transform:rotate(16deg); -webkit-transform:rotate(16deg);
}
#rsole { right:3px; box-shadow:inset -3px -1px 1px rgba(0,0,0,0.3);
    -moz-transform:rotate(-16deg); -o-transform:rotate(-16deg); -webkit-transform:rotate(-16deg);
}
/* 企鹅的双手 */
#lhand { position:absolute; width:40px; height:100px; left:25px; top:82px;
    background:-moz-radial-gradient(10px 85px, circle, rgb(50,50,50) 0%, rgb(45,45,45) 15%, #000 100%);
    background:-o-radial-gradient(10px 85px, circle, rgb(50,50,50) 0%, rgb(45,45,45) 15%, #000 100%);
    background:-webkit-gradient(radial, 10 85, 0, 10 85, 80, from(rgb(50,50,50)), to(#000), color-stop(15%, rgb(45,45,45)));
    border-radius:100px 20px 100px 20px / 160px 20px 200px 20px;
    -moz-transform-origin:100% 0%; -webkit-transform-origin:100% 0%; -o-transform-origin:100% 0%;
    -moz-transform:rotate(35deg); -webkit-transform:rotate(35deg); -o-transform:rotate(35deg);
}
#rhand { position:absolute; width:40px; height:100px; right:25px; top:82px;
    background:-moz-radial-gradient(30px 85px, circle, rgb(50,50,50) 0%, rgb(45,45,45) 15%, #000 100%);
    background:-o-radial-gradient(30px 85px, circle, rgb(50,50,50) 0%, rgb(45,45,45) 15%, #000 100%);
    background:-webkit-gradient(radial, 30 85, 0, 30 85, 80, from(rgb(50,50,50)), to(#000), color-stop(15%, rgb(45,45,45)));
    border-radius:20px 100px 20px 100px / 20px 160px 20px 200px;
    -moz-transform-origin:0 0; -webkit-transform-origin:0 0; -o-transform-origin:0 0;
    -moz-transform:rotate(-35deg); -webkit-transform:rotate(-35deg); -o-transform:rotate(-35deg);
}
/* 企鹅的语言 */
#qq_tip { position:absolute; width:210px; height:60px; background:rgb(160,160,160); left:180px; top:-40px;
    border-radius:50%; box-shadow:inset 0 0 1px 1px orange; opacity:0;
    -moz-transition:opacity 0.5s linear;
    -o-transition:opacity 0.5s linear;
    -webkit-transition:opacity 0.5s linear;
}
#qq_tip p { margin-top:15px; font-size:13px; text-align:center; width:176px; margin-left:16px; }
#qq_tip:before { content:''; position:absolute; width:56px; height:26px; background:rgb(160,160,160);
    left:0; top:70px; border-radius:50%; box-shadow:inset 0 0 1px 1px orange; opacity:0.7;
}
/* 主要用于身体的摆动，本身没有什么显示效果 */
#qq_body { width:100%; height:100%;
    -moz-transform-origin:50% 100%;
    -o-transform-origin:50% 100%;
    -webkit-transform-origin:50% 100%;
    -moz-transition:-moz-transform 0.3s linear;
    -o-transition:-o-transform 0.3s linear;
    -webkit-transition:-webkit-transform 0.3s linear;
}
</style>
        <title>纯css打造QQ企鹅</title>
</head>
<body>
<section id="container">
        <div class="qq">
                <div id="lfoot"><div id="lsole"></div></div>
                <div id="rfoot"><div id="rsole"></div></div>
                <div id="qq_body">
                        <div id="lhand"></div>
                        <div id="rhand"></div>
                        <div id="qq_stomach">
                                <div id="stomach_wrap"></div>
                        </div>
                        <div id="qq_head">
                                <div id="qleye" class="qeye">
                                        <div id="lball" class="eyeball"></div>
                                </div>
                                <div id="qreye" class="qeye">
                                        <div id="rball" class="eyeball"></div>
                                </div>
                                <div id="qmouth">
                                        <div id="lip"></div>
                                </div>
                        </div>
                        <div id="chief">
                                <div id="chief_tail"></div>
                                <div id="chief_wrap"></div>
                        </div>
                </div>
                <div id="qq_tip"><p></p></div>
        </div>
</section>
<script type="text/javascript">
     var qq = new qq();
</script>
</body>
</html>


编程之上
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3绘制QQ企鹅图片动画特效代码
03-20
CSS3绘制QQ企鹅图片动画代码，兼容主流浏览器，包括IE,谷歌等。
如何使用HTML5+CSS3绘制一个QQ 企鹅Logo
luojiandecsdn的博客
03-01 3178
看了腾讯全端团队AlloyTeam发布的这篇《使用CSS3绘制腾讯QQ的企鹅Logo》文章，自己仿照了一下，做了个是山寨版的QQ企鹅。 之所以称之为山寨版，是因为原版绘出来的是这样： 而我绘出来的是这样： 好吧，由于不知道原始的数据，绘出来真的有点胖，有点别扭所以我叫他胖企鹅大笑大笑大笑。 当然，尽管没绘好，不过也因此掌握了绘制方法，也算是不枉我辛辛苦苦了几小时。不多说，直接得上代码：
CSS3制作QQ绘制企鹅（超强悍）
tianpeiwen的专栏
12-21 1100
摘要: 今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。网络上经常能够看到一些用CSS3绘制的精致图形，它们通常由矩形，圆形，椭圆，三角形,梯形等组合而成。要想绘制我们自己的图形，就要先了解下基本图形的绘制 ... CSS3绘制腾讯QQ的企鹅Logo效果   今天和大家分享一下使用CSS3绘制腾讯QQ的企鹅Logo的过程。   一、如何使用CSS3来绘制图
纯css样式制作qq企鹅
atom_hc的博客
12-07 472
html代码部分：全部采用div制作<body> <div id="tou"></div> <div id="w"></div> <div id="tou_eye_left"></div> <div id="tou_eye_right"></div> <div id="eye_left_in"></div> <div id="eye_right_in"
纯css3绘制qq企鹅动画特效
09-08
【纯CSS3绘制QQ企鹅动画特效】是一个利用现代浏览器支持的CSS3技术来实现的交互式动画设计。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，它极大地扩展了CSS的功能，引入了诸如选择器、边框、背景、...
纯css3绘制QQ企鹅动画特效.zip
07-11
实现效果： ... 纯css3绘制QQ企鹅动画特效，我们在网站中可以做成这样的小图，也可以加上动画效果，例如企业网站或者商城网站里面的在线联系，那我们就可以自己使用css3来做一个这样的效果，从而不使用图片！
纯CSS打造相册效果项目完整源码
最新发布
04-15
纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整源码纯CSS打造相册效果项目完整...
h5 css3绘制qq企鹅动画特效
11-08
本教程将深入探讨如何利用H5和CSS3来创建一个生动有趣的QQ企鹅动画特效。这个特效将使你的网页更加吸引用户，提升用户体验。 首先，我们来了解HTML5的基本结构。HTML5引入了一些新的标签，如`<header>`, `<nav>`, `...
纯css3绘制情侣企鹅特效
07-28
"纯css3绘制情侣企鹅特效"是一个利用CSS3特性的项目，旨在创建一对牵手的卡通企鹅形象，为网页添加互动性和趣味性。 首先，我们要理解CSS3的基本概念。CSS3引入了模块化结构，如选择器、边框和背景、文本效果、布局...
css绘图（三）：教你用css绘制一个qq企鹅！
_小郑有点困了的博客
07-25 311
教你用css绘制一个qq企鹅！ 效果如下： 盒子身体部分代码如下： 对应的样式如下： #wrap{ width: 116px; height: 130px; background: white; margin: 100px auto; border: 1px solid green; position: relative; } #wrap .head{ width: 76px; height:...
用纯CSS画一个萌萌哒的QQ企鹅
huang_xiao_rong的博客
03-04 268
今天一时兴起，想用css画个企鹅。 先分析一下结构，页面分为一个容器，里面包括头部、左右眼、鼻子、围巾、肚子、左右脚、左右手共10个div，代码如下: html部分： <div class="container"> <!-- 头部 --> <div class="header"> </div> <!-- 左眼 --> <div class="eye
说说CSS学习中的瓶颈
09-13 217
by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年，但未就学习专门写过文章，这回破处了。苍蝇不叮没有缝隙的鸡蛋，领导不做没有跟拍的表演，同样，想到写CSS学习的文章也是有原因的（虽然我的不少行为没有原因）。 情景再现（尊重隐私，下面故事中...
qq css,CSS3绘制腾讯QQ企鹅
weixin_42310572的博客
08-03 295
绘制我们的企鹅前提，你已经看过CSS3绘制图形基本原理一文，已对一些基本图形绘制了解。开始着手于QQ 企鹅的绘制, 第一步基本框架的绘制。result.png通过对Logo图像的观察，按照层次划分来组合最终的效果。选择使用绝对位置position:absolute;来布局各个元素。主要划分为头部，身体，围脖，双手，双脚。基本框架结构就是这样的，QQ 对于容器是通过绝对定位来对每个元素布局进行设置的...
6张思维导图搞定html、css(画QQ企鹅)
Extraor
05-23 3241
html、css
css 去色
热门推荐
江湖再见
04-14 3万+
有这么一个样式，可以在你实现无色和加色之间游刃有余。 网站设计师在设计网页时，有时将一块图片设计成灰色，鼠标移上去，图片就有颜色。一般的逻辑是做两张图片，然后在鼠标上做图片切换事件。当然这种方法可以完美是实现，  不过有个小瑕疵，就是你要切一倍的图片（有色 + 无色）。下面介绍样式实现，可以减少一倍量的工作哦。 // HTML CSS .grayscale img{filter: g
css 实现只改变背景透明度，不改变子元素透明度
江湖再见
06-12 3372
其实就是使用rgba这个属性 显示文字
制作列表菜单的Hover效果
江湖再见
04-08 2531
HTML 目的 这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。下面我们一起来简单的学习这种效果的制作。 -- 首页 -- 照片墙 -- 语录本 CSS body { margin:0 auto; width:900px; paddin
css 解决方案-3px bug 和左浮动右侧顶部对齐
江湖再见
03-16 2008
3px bug 和左浮动右侧顶部对齐 *{ margin:0; padding:0; } body{ font-family:"Lucida Console", Monaco, monospace,"宋体"; font-size:16px; } a,img{ border:0 none; } .w
纯CSS打造美观个人中心导航菜单
这个资源介绍了一种纯CSS实现的美观导航菜单设计，特别适合用于个人中心界面。它提供了HTML代码示例，展示了一个包含多个导航项（如新闻、优先事项、指派任务等）的菜单，每个导航项都有图标和状态提示（如未读消息...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值