wdmsyf
- 浏览: 1608554 次
- 性别:
- 来自: 厦门
-
文章分类
- 全部博客 (603)
- T_java (145)
- T_script&ASP (51)
- T_C/C++ (25)
- T_PowerBuilder (11)
- T_Database (53)
- T_odoo (7)
- T_应用服务器 (50)
- T_专_条形码 (6)
- T_专_负载均衡器 (4)
- T_操作系统 (94)
- T_信息安全 (41)
- T_专_搜索引擎 (14)
- T_L_PHP (58)
- T_L_Delphi (18)
- T_L_.NET、C#、VisualStudio (25)
- T_L_Objective-C (6)
- T_移动开发 (53)
- T_网络 (109)
- T_大数据 (2)
- T_嵌入式 (2)
- T_小众技术 (24)
- T_未分类 (58)
- L_旅游印记 (1)
- L_生活随笔 (48)
- L_中国文化 (18)
- L_户外与生存 (0)
最新评论
-
csbean4004：
不知道哪传来得恶习，发帖子不好好发，故意弄错一些东西，很讨厌
让HTML5支持后置摄像头 -
withthewind：
终于找到一个可以用的了。。。
如何用VBA取得Word文档中的标题前面的序号 -
busbby：
兄弟，无法下载，说文件不完整
一个好用的Outlook ost格式文件转pst文件的工具 -
yijavakevin：
密码啊~解压密码多少？
一个二维条形码组件 -
vipbooks：
你给的那个链接根本无法下载，跳到官网看了下最新版12M，但点下 ...
十步以内完成精细web打印
请用FireFox或非IE浏览器看，不听劝告者后果自负。
<!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>我是灰太狼</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#bigBigWolf {
position: absolute;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -300px;
width: 600px;
height: 600px;
}
#bigBigWolf div {
position: absolute;
}
#bigBigWolf #url a {
position: absolute;
left: 0;
top: 0;
width: 600px;
height: 600px;
z-index: 100;
}
#bigBigWolf .face {
left: 127px;
bottom: 67px;
width: 380px;
height: 380px;
border: 3px solid #181818;
background: #666B6F;
z-index: 0;
-webkit-border-radius: 230px 180px 300px 220px;
-moz-border-radius: 230px 180px 300px 220px;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#bigBigWolf .face .left {
left: 30px;
top: 317px;
width: 180px;
height: 106px;
border: 3px solid #181818;
border-top: 0;
background: #666B6F;
z-index: 10;
-webkit-border-bottom-left-radius: 2800px 1200px;
-moz-border-radius-bottomleft: 2800px 1200px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#bigBigWolf .face .right {
left: 105px;
top: -45px;
width: 160px;
height: 90px;
border: 3px solid #181818;
border-bottom: 0;
background: #666B6F;
z-index: 10;
-webkit-border-top-left-radius: 2800px 2000px;
-moz-border-radius-topleft: 2800px 2000px;
transform: rotate(335deg);
-webkit-transform: rotate(335deg);
-moz-transform: rotate(335deg);
-o-transform: rotate(335deg);
}
#bigBigWolf .face .cover1 {
left: 160px;
top: 415px;
width: 28px;
height: 40px;
border: 3px solid #181818;
border-bottom: 0;
background: #FFF;
z-index: 20;
-webkit-border-top-left-radius: 600px 1200px;
-webkit-border-top-right-radius: 400px 700px;
-webkit-border-bottom-left-radius: 400px 150px;
-webkit-border-bottom-right-radius: 400px 150px;
-moz-border-radius-topleft: 600px 1200px;
-moz-border-radius-topright: 400px 700px;
-moz-border-radius-bottomleft: 400px 150px;
-moz-border-radius-bottomright: 400px 150px;
}
#bigBigWolf .face .cover2 {
left: 163px;
top: 433px;
width: 40px;
height: 40px;
background: #FFF;
z-index: 30;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
#bigBigWolf .face .cover3 {
left: 53px;
top: 285px;
width: 74px;
height: 74px;
background: #666B6F;
z-index: 40;
-webkit-border-radius: 37px;
-moz-border-radius: 37px;
}
#bigBigWolf .face .cover4 {
left: 227px;
top: -80px;
width: 25px;
height: 40px;
border: 3px solid #181818;
border-bottom: 0;
background: #FFF;
z-index: 20;
-webkit-border-top-left-radius: 600px 1200px;
-webkit-border-top-right-radius: 400px 700px;
-webkit-border-bottom-left-radius: 400px 150px;
-webkit-border-bottom-right-radius: 400px 150px;
-moz-border-radius-topleft: 600px 1200px;
-moz-border-radius-topright: 400px 700px;
-moz-border-radius-bottomleft: 400px 150px;
-moz-border-radius-bottomright: 400px 150px;
transform: rotate(170deg);
-webkit-transform: rotate(170deg);
-moz-transform: rotate(170deg);
-o-transform: rotate(170deg);
}
#bigBigWolf .face .cover5 {
left: 214px;
top: -90px;
width: 60px;
height: 30px;
background: #FFF;
z-index: 40;
transform: rotate(28deg);
-webkit-transform: rotate(28deg);
-moz-transform: rotate(28deg);
-o-transform: rotate(28deg);
}
#bigBigWolf .ear {
z-index: 0;
}
#bigBigWolf .ear .left {
left: 48px;
top: 167px;
width: 180px;
height: 120px;
border: 3px solid #181818;
border-right: 0;
background: #666B6F;
z-index: 0;
-webkit-border-top-left-radius: 295px 200px;
-moz-border-radius-topleft: 295px 200px;
transform: rotate(51deg);
-webkit-transform: rotate(51deg);
-moz-transform: rotate(51deg);
-o-transform: rotate(51deg);
}
#bigBigWolf .ear .left .inner {
left: -3px;
top: 88px;
width: 180px;
height: 30px;
border: 3px solid #181818;
border-right: 0;
background: #96979C;
z-index: 10;
-webkit-border-top-left-radius: 1000px 200px;
-moz-border-radius-topleft: 1000px 200px;
}
#bigBigWolf .ear .left .cover1 {
left: 83px;
top: 30px;
width: 132px;
height: 65px;
background: #666B6F;
z-index: 20;
-webkit-border-bottom-right-radius: 1200px 200px;
-moz-border-radius-bottomright: 1200px 200px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#bigBigWolf .ear .left .cover2 {
left: 111px;
top: 91px;
width: 12px;
height: 8px;
border: 3px solid #181818;
border-right: 0;
background: #666B6F;
z-index: 30;
-webkit-border-top-left-radius: 30px 20px;
-moz-border-radius-topleft: 30px 20px;
transform: rotate(345deg);
-webkit-transform: rotate(345deg);
-moz-transform: rotate(345deg);
-o-transform: rotate(345deg);
}
#bigBigWolf .ear .left .cover3 {
left: 114px;
top: 104px;
width: 12px;
height: 6px;
border: 3px solid #181818;
border-right: 0;
background: #666B6F;
z-index: 30;
-webkit-border-top-left-radius: 30px 20px;
-moz-border-radius-topleft: 30px 20px;
transform: rotate(325deg);
-webkit-transform: rotate(325deg);
-moz-transform: rotate(325deg);
-o-transform: rotate(325deg);
}
#bigBigWolf .ear .left .cover4 {
left: 123px;
top: 113px;
width: 11px;
height: 4px;
border: 3px solid #181818;
border-right: 0;
border-top: 0;
background: #666B6F;
z-index: 30;
-webkit-border-bottom-left-radius: 30px 20px;
-moz-border-radius-bottomleft: 30px 20px;
transform: rotate(62deg);
-webkit-transform: rotate(62deg);
-moz-transform: rotate(62deg);
-o-transform: rotate(62deg);
}
#bigBigWolf .ear .right {
left: 340px;
top: 78px;
width: 140px;
height: 100px;
border: 3px solid #181818;
border-left: 0;
background: #666B6F;
z-index: 10;
-webkit-border-top-right-radius: 245px 190px;
-moz-border-radius-topright: 245px 190px;
transform: rotate(275deg);
-webkit-transform: rotate(275deg);
-moz-transform: rotate(275deg);
-o-transform: rotate(275deg);
}
#bigBigWolf .ear .right .inner {
left: -1px;
top: 68px;
width: 140px;
height: 30px;
border: 3px solid #181818;
border-left: 0;
background: #96979C;
z-index: 10;
-webkit-border-top-right-radius: 1200px 300px;
-moz-border-radius-topright: 1200px 300px;
}
#bigBigWolf .ear .right .cover1 {
left: -49px;
top: 25px;
width: 120px;
height: 40px;
border: 3px solid #181818;
border-bottom: 0;
background: #666B6F;
z-index: 20;
-webkit-border-top-right-radius: 1200px 300px;
-moz-border-radius-topright: 1200px 300px;
transform: rotate(101deg);
-webkit-transform: rotate(101deg);
-moz-transform: rotate(101deg);
-o-transform: rotate(101deg);
}
#bigBigWolf .ear .right .cover2 {
left: -135px;
top: 117px;
width: 145px;
height: 40px;
border: 3px solid #181818;
border-bottom: 0;
background: #666B6F;
z-index: 30;
-webkit-border-top-right-radius: 1100px 300px;
-moz-border-radius-topright: 1100px 300px;
transform: rotate(133deg);
-webkit-transform: rotate(133deg);
-moz-transform: rotate(133deg);
-o-transform: rotate(133deg);
}
#bigBigWolf .ear .right .cover3 {
left: -85px;
top: 15px;
width: 80px;
height: 80px;
background: #666B6F;
z-index: 40;
}
#bigBigWolf .ear .right .cover4 {
left: -142px;
top: 144px;
width: 40px;
height: 40px;
background: #666B6F;
z-index: 50;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
#bigBigWolf .ear .right .cover5 {
left: 32px;
top: 87px;
width: 30px;
height: 30px;
border: 3px solid #181818;
border-bottom: 0;
border-left: 0;
background: #FFF;
z-index: 50;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
transform: rotate(313deg);
-webkit-transform: rotate(313deg);
-moz-transform: rotate(313deg);
-o-transform: rotate(313deg);
}
#bigBigWolf .hat {
left: 137px;
top: 115px;
width: 238px;
height: 100px;
border: 3px solid #181818;
background: #E09E86;
z-index: 40;
-webkit-border-top-left-radius: 2000px 1000px;
-webkit-border-top-right-radius: 700px 700px;
-webkit-border-bottom-left-radius: 300px 200px;
-webkit-border-bottom-right-radius: 450px 450px;
-moz-border-radius-topleft: 2000px 1000px;
-moz-border-radius-topright: 700px 700px;
-moz-border-radius-bottomleft: 300px 200px;
-moz-border-radius-bottomright: 450px 450px;
transform: rotate(338deg);
-webkit-transform: rotate(338deg);
-moz-transform: rotate(338deg);
-o-transform: rotate(338deg);
}
#bigBigWolf .hat .inner {
right: -1px;
top: 1px;
width: 238px;
height: 80px;
border: 3px solid #181818;
background: #CF6A36;
z-index: 0;
-webkit-border-top-left-radius: 2400px 1200px;
-webkit-border-top-right-radius: 800px 800px;
-webkit-border-bottom-left-radius: 400px 200px;
-webkit-border-bottom-right-radius: 450px 450px;
-moz-border-radius-topleft: 2400px 1200px;
-moz-border-radius-topright: 800px 800px;
-moz-border-radius-bottomleft: 400px 200px;
-moz-border-radius-bottomright: 450px 450px;
transform: rotate(357deg);
-webkit-transform: rotate(357deg);
-moz-transform: rotate(357deg);
-o-transform: rotate(357deg);
}
#bigBigWolf .hat .patch {
right: -3px;
top: -7px;
width: 110px;
height: 50px;
border: 3px solid #181818;
background: #EFC978;
z-index: 10;
-webkit-border-top-left-radius: 500px 300px;
-webkit-border-top-right-radius: 300px 200px;
-webkit-border-bottom-left-radius: 100px 100px;
-webkit-border-bottom-right-radius: 100px 100px;
-moz-border-radius-topleft: 500px 300px;
-moz-border-radius-topright: 300px 200px;
-moz-border-radius-bottomleft: 100px 100px;
-moz-border-radius-bottomright: 100px 100px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
#bigBigWolf .hat .patch .line1, #bigBigWolf .hat .patch .line2, #bigBigWolf .hat .patch .line3, #bigBigWolf .hat .patch .line4, #bigBigWolf .hat .patch .line5, #bigBigWolf .hat .patch .line6, #bigBigWolf .hat .patch .line7, #bigBigWolf .hat .patch .line8, #bigBigWolf .hat .patch .line9, #bigBigWolf .hat .patch .line10 {
left: -7px;
top: 30px;
width: 18px;
height: 2px;
font-size: 0;
background: #181818;
z-index: 20px;
transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-moz-transform: rotate(350deg);
-o-transform: rotate(350deg);
}
#bigBigWolf .hat .patch .line2 {
left: -13px;
top: 42px;
width: 20px;
transform: rotate(340deg);
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-o-transform: rotate(340deg);
}
#bigBigWolf .hat .patch .line3 {
left: 5px;
top: 50px;
width: 17px;
transform: rotate(300deg);
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-o-transform: rotate(300deg);
}
#bigBigWolf .hat .patch .line4 {
left: 20px;
top: 53px;
width: 17px;
transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
}
#bigBigWolf .hat .patch .line5 {
left: 35px;
top: 50px;
width: 14px;
transform: rotate(290deg);
-webkit-transform: rotate(290deg);
-moz-transform: rotate(290deg);
-o-transform: rotate(290deg);
}
#bigBigWolf .hat .patch .line6 {
left: 50px;
top: 52px;
width: 19px;
transform: rotate(275deg);
-webkit-transform: rotate(275deg);
-moz-transform: rotate(275deg);
-o-transform: rotate(275deg);
}
#bigBigWolf .hat .patch .line7 {
left: 70px;
top: 50px;
width: 15px;
transform: rotate(290deg);
-webkit-transform: rotate(260deg);
-moz-transform: rotate(260deg);
-o-transform: rotate(260deg);
}
#bigBigWolf .hat .patch .line8 {
left: 85px;
top: 51px;
width: 19px;
transform: rotate(250deg);
-webkit-transform: rotate(250deg);
-moz-transform: rotate(250deg);
-o-transform: rotate(250deg);
}
#bigBigWolf .hat .patch .line9 {
left: 102px;
top: 45px;
width: 13px;
transform: rotate(230deg);
-webkit-transform: rotate(230deg);
-moz-transform: rotate(230deg);
-o-transform: rotate(230deg);
}
#bigBigWolf .hat .patch .line10 {
left: 106px;
top: 34px;
width: 12px;
transform: rotate(220deg);
-webkit-transform: rotate(220deg);
-moz-transform: rotate(220deg);
-o-transform: rotate(220deg);
}
#bigBigWolf .eye {
left: 213px;
top: 221px;
width: 287px;
height: 185px;
z-index: 20;
}
#bigBigWolf .eye .left, #bigBigWolf .eye .right {
width: 121px;
height: 121px;
border: 3px solid #181818;
background: #DBDBDB;
z-index: 0;
-webkit-border-radius: 61px;
-moz-border-radius: 61px;
}
#bigBigWolf .eye .left {
left: 0;
bottom: 0;
}
#bigBigWolf .eye .right {
right: 0;
top: 0;
}
#bigBigWolf .eye .inner {
left: 2px;
top: 2px;
width: 114px;
height: 114px;
background: #FFF;
z-index: 10;
-webkit-border-radius: 57px;
-moz-border-radius: 57px;
}
#bigBigWolf .eye .pupil {
left: 8px;
top: 26px;
width: 54px;
height: 54px;
border: 2px solid #181818;
z-index: 20;
-webkit-border-radius: 27px;
-moz-border-radius: 27px;
background: #404972;
background: -webkit-gradient(linear, 43% 0%, 39% 100%, from(#181818), to(#455289), color-stop(1.0, #455289));
background: -moz-linear-gradient(50% 25% 260deg, #181818, #455289, #455289 100%);
-webkit-animation: 'pupil' 2s linear;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes pupil {
0% {
left: 8px;
top: 26px;
}
25% {
left: 29px;
top: 33px;
}
50% {
left: 50px;
top: 40px;
}
75% {
left: 29px;
top: 33px;
}
100% {
left: 8px;
top: 26px;
}
}
#bigBigWolf .eye .pupil .inner {
left: 9px;
top: 9px;
width: 36px;
height: 36px;
background: #1A1A1A;
z-index: 30;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
}
#bigBigWolf .eye .light1 {
left: 21px;
bottom: 3px;
width: 16px;
height: 16px;
background: #FFF;
z-index: 40;
-webkit-border-radius: 15px 7px 10px 10px;
-moz-border-radius: 20px 7px 20px 10px;
transform: rotate(320deg);
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-o-transform: rotate(320deg);
}
#bigBigWolf .eye .light2 {
left: 7px;
bottom: 11px;
width: 14px;
height: 6px;
background: #FFF;
z-index: 40;
-webkit-border-top-left-radius: 500px 300px;
-webkit-border-top-right-radius: 300px 200px;
-webkit-border-bottom-left-radius: 100px 100px;
-webkit-border-bottom-right-radius: 100px 100px;
-moz-border-radius-topleft: 20px 20px;
-moz-border-radius-topright: 30px 20px;
-moz-border-radius-bottomleft: 5px 5px;
-moz-border-radius-bottomright: 5px 5px;
transform: rotate(285deg);
-webkit-transform: rotate(285deg);
-moz-transform: rotate(285deg);
-o-transform: rotate(285deg);
}
#bigBigWolf .eye .light3 {
right: 2px;
top: 4px;
width: 30px;
height: 13px;
background: #FFF;
z-index: 40;
-webkit-border-top-left-radius: 40px 40px;
-webkit-border-top-right-radius: 100px 50px;
-webkit-border-bottom-left-radius: 15px 15px;
-webkit-border-bottom-right-radius: 15px 15px;
-moz-border-radius-topleft: 40px 40px;
-moz-border-radius-topright: 100px 50px;
-moz-border-radius-bottomleft: 15px 15px;
-moz-border-radius-bottomright: 15px 15px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
#bigBigWolf .eyebrow {
left: 187px;
top: 173px;
width: 280px;
height: 130px;
z-index: 70;
}
#bigBigWolf .eyebrow .left {
left: 0;
top: 48px;
width: 110px;
height: 40px;
background: #181818;
z-index: 0;
-webkit-border-top-left-radius: 400px 200px;
-webkit-border-top-right-radius: 400px 200px;
-moz-border-radius-topleft: 400px 200px;
-moz-border-radius-topright: 400px 200px;
transform: rotate(330deg);
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-o-transform: rotate(330deg);
}
#bigBigWolf .eyebrow .left .inner {
left: 0;
top: 20px;
width: 120px;
height: 30px;
background: #666B6F;
z-index: 0;
-webkit-border-top-left-radius: 400px 200px;
-webkit-border-top-right-radius: 400px 200px;
-moz-border-radius-topleft: 400px 200px;
-moz-border-radius-topright: 400px 200px;
}
#bigBigWolf .eyebrow .left .eyebrow1, #bigBigWolf .eyebrow .left .eyebrow2, #bigBigWolf .eyebrow .right .eyebrow1 {
left: -22px;
top: 36px;
width: 22px;
height: 2px;
font-size: 0;
background: #181818;
z-index: 10px;
transform: rotate(86deg);
-webkit-transform: rotate(86deg);
-moz-transform: rotate(86deg);
-o-transform: rotate(86deg);
}
#bigBigWolf .eyebrow .left .eyebrow2 {
left: -15px;
top: 32px;
width: 20px;
}
#bigBigWolf .eyebrow .right .eyebrow1 {
left: 93px;
top: 24px;
width: 20px;
}
#bigBigWolf .eyebrow .right {
right: 17px;
top: -3px;
width: 100px;
height: 40px;
background: #181818;
z-index: 0;
-webkit-border-top-left-radius: 400px 200px;
-webkit-border-top-right-radius: 400px 200px;
-moz-border-radius-topleft: 400px 200px;
-moz-border-radius-topright: 400px 200px;
transform: rotate(355deg);
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
-o-transform: rotate(355deg);
}
#bigBigWolf .eyebrow .right .inner {
right: -7px;
top: 20px;
width: 120px;
height: 30px;
background: #666B6F;
z-index: 0;
-webkit-border-top-left-radius: 400px 200px;
-webkit-border-top-right-radius: 400px 200px;
-moz-border-radius-topleft: 400px 200px;
-moz-border-radius-topright: 400px 200px;
}
#bigBigWolf .nose {
right: 158px;
bottom: 203px;
width: 74px;
height: 74px;
z-index: 30;
background: #4B4B4B;
-webkit-border-radius: 160px 40px 160px 40px;
-moz-border-radius: 160px 30px 160px 40px;
transform: rotate(25deg);
-webkit-transform: rotate(25deg);
-moz-transform: rotate(25deg);
-o-transform: rotate(25deg);
}
#bigBigWolf .nose .outer {
right: 1px;
top: -2px;
width: 72px;
height: 72px;
z-index: 0;
background: #181818;
-webkit-border-radius: 150px 40px 150px 40px;
-moz-border-radius: 150px 40px 150px 40px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
}
#bigBigWolf .nose .inner {
right: 18px;
top: 13px;
width: 24px;
height: 24px;
z-index: 10;
background: #4F4F4F;
-webkit-border-radius: 150px 50px 150px 50px;
-moz-border-radius: 150px 50px 150px 50px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#bigBigWolf .nose .light {
right: 16px;
top: 3px;
width: 20px;
height: 20px;
z-index: 20;
background: #FFF;
-webkit-border-radius: 150px 70px 150px 70px;
-moz-border-radius: 150px 70px 150px 70px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}
#bigBigWolf .mouth {
right: 62px;
bottom: 108px;
width: 290px;
height: 60px;
border: 3px solid #181818;
background: #FFF;
z-index: 50;
-webkit-border-top-left-radius: 700px 0;
-webkit-border-top-right-radius: 700px 0;
-webkit-border-bottom-left-radius: 2800px 1200px;
-webkit-border-bottom-right-radius: 2800px 1200px;
-moz-border-radius-topleft: 700px 0;
-moz-border-radius-topright: 700px 0;
-moz-border-radius-bottomleft: 2800px 1200px;
-moz-border-radius-bottomright: 2800px 1200px;
transform: rotate(341deg);
-webkit-transform: rotate(341deg);
-moz-transform: rotate(341deg);
-o-transform: rotate(341deg);
}
#bigBigWolf .mouth .inner {
right: -3px;
bottom: 41px;
width: 289px;
height: 20px;
border: 3px solid #181818;
border-top: 0;
background: #666B6F;
z-index: 0;
-webkit-border-top-left-radius: 700px 0;
-webkit-border-top-right-radius: 700px 0;
-webkit-border-bottom-left-radius: 7800px 1500px;
-webkit-border-bottom-right-radius: 7800px 1500px;
-moz-border-radius-topleft: 700px 0;
-moz-border-radius-topright: 700px 0;
-moz-border-radius-bottomleft: 7800px 1500px;
-moz-border-radius-bottomright: 7800px 1500px;
}
#bigBigWolf .tooth1, #bigBigWolf .tooth2, #bigBigWolf .tooth3, #bigBigWolf .tooth4, #bigBigWolf .tooth5, #bigBigWolf .tooth6, #bigBigWolf .tooth7, #bigBigWolf .tooth8, #bigBigWolf .tooth9, #bigBigWolf .tooth10, #bigBigWolf .tooth11, #bigBigWolf .tooth12, #bigBigWolf .tooth13, #bigBigWolf .tooth14, #bigBigWolf .tooth15, #bigBigWolf .tooth16, #bigBigWolf .tooth17, #bigBigWolf .tooth18, #bigBigWolf .tooth19, #bigBigWolf .tooth20, #bigBigWolf .tooth121, #bigBigWolf .tooth122, #bigBigWolf .tooth123 {
left: -1px;
top: 18px;
width: 20px;
height: 2px;
font-size: 0;
background: #181818;
z-index: 60px;
transform: rotate(26deg);
-webkit-transform: rotate(26deg);
-moz-transform: rotate(26deg);
-o-transform: rotate(26deg);
}
#bigBigWolf .tooth2 {
left: 13px;
top: 12px;
width: 22px;
transform: rotate(125deg);
-webkit-transform: rotate(125deg);
-moz-transform: rotate(122deg);
-o-transform: rotate(125deg);
}
#bigBigWolf .tooth3 {
left: 18px;
top: 17px;
width: 30px;
transform: rotate(76deg);
-webkit-transform: rotate(76deg);
-moz-transform: rotate(76deg);
-o-transform: rotate(76deg);
}
#bigBigWolf .tooth4 {
left: 36px;
top: 26px;
width: 9px;
transform: rotate(340deg);
-webkit-transform: rotate(340deg);
-moz-transform: rotate(340deg);
-o-transform: rotate(340deg);
}
#bigBigWolf .tooth5 {
left: 40px;
top: 30px;
width: 12px;
transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
}
#bigBigWolf .tooth6 {
left: 46px;
top: 35px;
width: 14px;
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
}
#bigBigWolf .tooth7 {
left: 58px;
top: 37px;
width: 24px;
transform: rotate(12deg);
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
}
#bigBigWolf .tooth8, #bigBigWolf .tooth10 {
left: 21px;
top: 16px;
width: 20px;
height: 1px;
background: #FFF;
transform: rotate(76deg);
-webkit-transform: rotate(76deg);
-moz-transform: rotate(76deg);
-o-transform: rotate(76deg);
}
#bigBigWolf .tooth9, #bigBigWolf .tooth11, #bigBigWolf .tooth12 {
left: 14px;
top: 15px;
width: 20px;
height: 1px;
background: #FFF;
transform: rotate(122deg);
-webkit-transform: rotate(122deg);
-moz-transform: rotate(122deg);
-o-transform: rotate(122deg);
}
#bigBigWolf .tooth10 {
left: 21px;
top: 18px;
height: 2px;
}
#bigBigWolf .tooth11 {
left: 14px;
top: 20px;
height: 3px;
}
#bigBigWolf .tooth12 {
left: 13px;
top: 18px;
height: 2px;
}
#bigBigWolf .tooth13 {
left: 270px;
top: 17px;
width: 18px;
transform: rotate(335deg);
-webkit-transform: rotate(335deg);
-moz-transform: rotate(335deg);
-o-transform: rotate(335deg);
}
#bigBigWolf .tooth14 {
left: 254px;
top: 11px;
width: 22px;
transform: rotate(55deg);
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
}
#bigBigWolf .tooth15 {
left: 242px;
top: 16px;
width: 29px;
transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
}
#bigBigWolf .tooth16 {
left: 243px;
top: 25px;
width: 13px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
#bigBigWolf .tooth17 {
left: 237px;
top: 29px;
width: 11px;
transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
}
#bigBigWolf .tooth18 {
left: 219px;
top: 36px;
width: 24px;
transform: rotate(165deg);
-webkit-transform: rotate(165deg);
-moz-transform: rotate(165deg);
-o-transform: rotate(165deg);
}
#bigBigWolf .tooth19, #bigBigWolf .tooth21, #bigBigWolf .tooth23 {
left: 255px;
top: 15px;
width: 22px;
height: 1px;
background: #FFF;
transform: rotate(55deg);
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
-o-transform: rotate(55deg);
}
#bigBigWolf .tooth20, #bigBigWolf .tooth22 {
left: 247px;
top: 17px;
width: 22px;
height: 1px;
background: #FFF;
transform: rotate(100deg);
-webkit-transform: rotate(100deg);
-moz-transform: rotate(100deg);
-o-transform: rotate(100deg);
}
#bigBigWolf .tooth21 {
left: 255px;
top: 16px;
height: 2px;
}
#bigBigWolf .tooth22 {
left: 248px;
top: 19px;
height: 4px;
}
#bigBigWolf .tooth23 {
left: 255px;
top: 19px;
height: 2px;
}
#bigBigWolf .beard {
left: 190px;
bottom: 50px;
width: 370px;
height: 200px;
z-index: 80;
}
#bigBigWolf .beard1, #bigBigWolf .beard2, #bigBigWolf .beard3, #bigBigWolf .beard4, #bigBigWolf .beard5, #bigBigWolf .beard6, #bigBigWolf .beard7, #bigBigWolf .beard8, #bigBigWolf .beard9, #bigBigWolf .beard10, #bigBigWolf .beard11, #bigBigWolf .beard12 {
right: -1px;
top: 32px;
width: 40px;
height: 2px;
font-size: 0;
background: #181818;
z-index: 0;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
}
#bigBigWolf .beard2 {
right: 23px;
top: 68px;
width: 24px;
transform: rotate(355deg);
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
-o-transform: rotate(355deg);
}
#bigBigWolf .beard3 {
right: 34px;
top: 90px;
width: 22px;
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#bigBigWolf .beard4 {
right: 54px;
top: 120px;
width: 28px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-o-transform: rotate(50deg);
}
#bigBigWolf .beard5 {
right: 89px;
top: 132px;
width: 22px;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#bigBigWolf .beard6 {
right: 115px;
top: 148px;
width: 16px;
transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-moz-transform: rotate(70deg);
-o-transform: rotate(70deg);
}
#bigBigWolf .beard7 {
right: 145px;
top: 162px;
width: 24px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#bigBigWolf .beard8 {
right: 175px;
top: 166px;
width: 16px;
transform: rotate(110deg);
-webkit-transform: rotate(110deg);
-moz-transform: rotate(110deg);
-o-transform: rotate(110deg);
}
#bigBigWolf .beard9 {
right: 210px;
top: 173px;
width: 22px;
transform: rotate(60deg);
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
#bigBigWolf .beard10 {
right: 245px;
top: 173px;
width: 14px;
transform: rotate(130deg);
-webkit-transform: rotate(130deg);
-moz-transform: rotate(130deg);
-o-transform: rotate(130deg);
}
#bigBigWolf .beard11 {
right: 275px;
top: 168px;
width: 20px;
transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
}
#bigBigWolf .beard12 {
right: 300px;
top: 156px;
width: 16px;
transform: rotate(140deg);
-webkit-transform: rotate(140deg);
-moz-transform: rotate(140deg);
-o-transform: rotate(140deg);
}
#bigBigWolf .scar, #bigBigWolf .scar1, #bigBigWolf .scar2, #bigBigWolf .scar3, #bigBigWolf .scar4, #bigBigWolf .scar5 {
left: 142px;
bottom: 154px;
width: 120px;
height: 2px;
font-size: 0;
background: #181818;
z-index: 60px;
transform: rotate(43deg);
-webkit-transform: rotate(43deg);
-moz-transform: rotate(43deg);
-o-transform: rotate(43deg);
}
#bigBigWolf .scar1 {
left: -2px;
top: -5px;
width: 25px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#bigBigWolf .scar2 {
left: 20px;
top: 2px;
width: 29px;
transform: rotate(80deg);
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-o-transform: rotate(80deg);
}
#bigBigWolf .scar3 {
left: 50px;
top: -2px;
width: 29px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
#bigBigWolf .scar4 {
left: 74px;
top: -4px;
width: 22px;
transform: rotate(92deg);
-webkit-transform: rotate(92deg);
-moz-transform: rotate(92deg);
-o-transform: rotate(92deg);
}
#bigBigWolf .scar5 {
left: 95px;
top: -2px;
width: 25px;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
</style>
</head>
<body>
<div id="bigBigWolf">
<div id="url"><a href="http://www.jzc.in"></a></div>
<div class="face">
<div class="left"></div>
<div class="right"></div>
<div class="cover1"></div>
<div class="cover2"></div>
<div class="cover3"></div>
<div class="cover4"></div>
<div class="cover5"></div>
</div>
<div class="ear">
<div class="left">
<div class="inner"></div>
<div class="cover1"></div>
<div class="cover2"></div>
<div class="cover3"></div>
<div class="cover4"></div>
<div class="cover5"></div>
</div>
<div class="right">
<div class="inner"></div>
<div class="cover1"></div>
<div class="cover2"></div>
<div class="cover3"></div>
<div class="cover4"></div>
<div class="cover5"></div>
</div>
</div>
<div class="eye">
<div class="left">
<div class="inner">
<div class="pupil">
<div class="inner"></div>
<div class="light1"></div>
<div class="light2"></div>
<div class="light3"></div>
</div>
</div>
</div>
<div class="right">
<div class="inner">
<div class="pupil">
<div class="inner"></div>
<div class="light1"></div>
<div class="light2"></div>
<div class="light3"></div>
</div>
</div>
</div>
</div>
<div class="eyebrow">
<div class="left">
<div class="inner"></div>
<div class="eyebrow1"></div>
<div class="eyebrow2"></div>
</div>
<div class="right">
<div class="inner"></div>
<div class="eyebrow1"></div>
</div>
</div>
<div class="nose">
<div class="outer">
<div class="inner"></div>
<div class="light"></div>
</div>
</div>
<div class="mouth">
<div class="inner">
<div class="tooth1"></div>
<div class="tooth2"></div>
<div class="tooth3"></div>
<div class="tooth4"></div>
<div class="tooth5"></div>
<div class="tooth6"></div>
<div class="tooth7"></div>
<div class="tooth8"></div>
<div class="tooth9"></div>
<div class="tooth10"></div>
<div class="tooth11"></div>
<div class="tooth12"></div>
<div class="tooth13"></div>
<div class="tooth14"></div>
<div class="tooth15"></div>
<div class="tooth16"></div>
<div class="tooth17"></div>
<div class="tooth18"></div>
<div class="tooth19"></div>
<div class="tooth20"></div>
<div class="tooth21"></div>
<div class="tooth22"></div>
<div class="tooth23"></div>
</div>
</div>
<div class="beard">
<div class="beard1"></div>
<div class="beard2"></div>
<div class="beard3"></div>
<div class="beard4"></div>
<div class="beard5"></div>
<div class="beard6"></div>
<div class="beard7"></div>
<div class="beard8"></div>
<div class="beard9"></div>
<div class="beard10"></div>
<div class="beard11"></div>
<div class="beard12"></div>
</div>
<div class="scar">
<div class="scar1"></div>
<div class="scar2"></div>
<div class="scar3"></div>
<div class="scar4"></div>
<div class="scar5"></div>
</div>
<div class="hat">
<div class="inner">
<div class="patch">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
<div class="line7"></div>
<div class="line8"></div>
<div class="line9"></div>
<div class="line10"></div>
</div>
</div>
</div>
</div>
</body>
</html>
在firefox下的效果：
- 大小: 42.5 KB
分享到：
发表评论
-
pdf2htmlEX：把PDF转换成HTML的神器
2017-03-15 19:00 2771pdf2htmlEX：将 PDF 转为 HTML 网页 反 ... -
子div撑不开父div的几种解决方法
2017-02-26 11:39 2864子div撑不开父div的几种解决方法 子div撑不开 ... -
两个相同放大镜叠加焦距计算
2016-09-16 19:47 2415关于两个相同放大镜叠加后焦距的计算公式： F={ ( f ... -
八款优秀的Linux天文学软件
2016-02-21 20:31 2909八款优秀的Linux天文学软件 天文学是一门研究恒 ... -
Odoo相关资源(持续更新中)
2015-09-07 16:08 790http://odoo-documention-user. ... -
Odoo安装脚本
2015-08-17 23:25 1237#!/bin/bash ################# ... -
Office激活莫名变为非激活的解决办法
2014-12-16 09:29 1308Office2010已激活，用的好好的，前两天突然报告未激活 ... -
去除Odoo主页中的提示: Your Odoo is not supported.
2014-12-11 12:54 0有两种方法可Odoo主页中的提示: Your Odoo is ... -
微信公众号开发辅助工具
2014-12-08 09:31 0Weixin-simulator: 微信公众平台没有本地调 ... -
JAVA开源资源（非大全）
2014-11-19 14:22 1273java开源 目录 1框架 2门户 ... -
Node.js的一些缺点分析（转）
2014-11-13 13:05 1076身为重度Node.js用户，我也来说说我的理解吧。 计算机语 ... -
谷歌点击率计算
2014-11-13 12:54 0每秒400-500的请求数量可以说是相当不错。谷歌是世界上最大 ... -
Crack + Keygen Atlassian Jira all versions
2014-05-09 18:50 0[Download] Crack + Keygen Atla ... -
京东夺宝岛抢拍插件（转）
2014-03-12 13:17 3406最近两天京东夺宝岛 ... -
OpenERP报表相关资源
2014-02-27 09:29 0JasperReport for OpenERP: ht ... -
别老扯什么Hadoop了，你的数据根本不够大
2013-09-20 17:45 1086英文原文：Don't use Hado ... -
开源产品记录(1)
2013-09-20 16:23 27991、Untangle （http://www.untang ... -
Xcode 官方全版本下载 从xcode3.2到xcode4.5
2013-04-14 11:56 4088注：无法使用浏览器下载，请复制下面的连接，然后使用迅雷下载（自 ... -
在Delphi中使用Zebra条码打印机打印中文
2013-03-15 13:53 2773在Delphi中使用条码打印机打印中文标签时，由于多数打印 ... -
Java正则表达式教程（转）
2013-02-27 23:00 0<!-- <style type="te ...
相关推荐
- 使用`fillStyle`和`fill()`来填充灰太狼的各个部分，通过调整颜色和透明度来实现逼真的效果。 - 如果有需要，可以使用`strokeStyle`和`stroke()`来描绘边框。 - 为了创建动画效果，可能需要通过定时器（如`...
3. **JavaScript对象**：在JavaScript中，游戏的每个元素（如锅、灰太狼、得分等）都可以表示为对象，每个对象有自己的属性（如位置、速度）和方法（如移动、碰撞检测）。 4. **事件监听**：通过addEventListener...
总的来说，"HTML5锅打灰太狼网页版游戏"展示了HTML5在游戏开发领域的应用，结合了HTML、CSS、JavaScript等多种技术，创造出一个具有趣味性和互动性的在线游戏。开发者通过巧妙地运用HTML5的各种特性，实现了游戏的...
【锅拍灰太狼js代码实现】是一款基于JavaScript技术开发的网页游戏，它利用了HTML、CSS和JavaScript的强大力量来创建一个交互式的用户体验。在这个项目中，JavaScript扮演着核心角色，负责处理游戏逻辑、用户交互...
自己制作的元旦小动画，寄给朋友家人或者小朋友都是不错的选择。
JavaScript是一种广泛应用于网页和网络...通过这个小游戏，开发者可以学习和实践JavaScript的基本概念以及如何用它来创造互动性的娱乐体验。同时，这也是一个很好的实例，展示了JavaScript在现代网页开发中的强大能力。
2. 设置属性：同样使用`.attr()`方法，但传入两个参数，第二个参数为新属性值，如`$("#element").attr("attributeName", "newValue")`。 3. 删除属性：使用`.removeAttr()`方法移除元素的属性，如`$("#element")....
首先，jQuery的核心在于其选择器功能，它允许开发者用CSS语法快速定位到页面上的特定元素。在“锅拍灰太狼”游戏中，例如使用`$("#elementID")`选取ID为"elementID"的元素，或者`$(".classSelector")`选取具有指定...
在这个实例中，开发者可能使用了`beginPath()`、`moveTo()`、`lineTo()`、`arc()`等方法来定义和绘制灰太狼的轮廓。 `beginPath()`是开始一个新路径的命令，而`moveTo(x, y)`则将当前绘图位置移动到指定的坐标(x, y...
"锅打灰太狼"听起来像是一个以经典动画角色灰太狼为主题的JavaScript小游戏。在这个游戏中，可能玩家需要操控某种“锅”来与灰太狼进行互动或者抵御灰太狼的进攻。JavaScript是一种广泛用于网页和互联网应用开发的...
首先，可能使用`drawImage()`方法来加载灰太狼的图片资源，并将其绘制到Canvas上。该方法通常接收3个参数：图像源、X坐标和Y坐标，或者9个参数来精确控制缩放和裁剪。 ```javascript var img = new Image(); img....
在这个版本中，我们用JavaScript来实现“打灰太狼”这一主题，将编程与娱乐完美结合，通过软件/插件的形式展现出来。下面，我们将深入探讨实现这个游戏所需的关键知识点。 1. **HTML布局**： 游戏界面通常由多个...
这种游戏通常由用户通过鼠标点击出现在屏幕上的地鼠（或在本例中可能是灰太狼）来得分，游戏的目标是尽可能多地击中地鼠，同时避免错过任何一只。下面将详细探讨构建网页版打地鼠小游戏所需的技术和知识点。 1. ...
2. **层叠与优先级**：当多个CSS规则应用于同一个元素时，会根据层叠规则决定最终样式。内联样式、内部样式表和外部样式表有不同权重，ID选择器优先级高于类选择器，类选择器高于标签选择器。 3. **盒模型**：CSS中...
这涉及到JavaScript事件监听和处理，当用户点击特定的HTML元素（可能是用CSS定位的图像或Canvas上的特定区域）时，触发相应的得分或扣分逻辑。 HTML5还引入了Web Storage（包括localStorage和sessionStorage）来...
它是一个 CSS，HTML 和 JS 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式； AJAX，创建交互式网页应用的网页开发技术。 前端游戏设计是游戏开发中至关重要的一部分，它涉及到游戏的外观、交互...
2. 使用CSS对这些元素进行美化，设置合适的动画效果，如灰太狼出现和消失的动画。 3. 利用JavaScript编写游戏逻辑，包括灰太狼随机出现的算法、玩家点击判断、计分系统、游戏结束条件等。 4. 进行测试和调试，确保...
即懒人之家上次推荐的一款用canvas实现的灰太狼效果后，相关链接如下： http://www.lanrenzhijia.com/js/css3/2861.html 今天再给大家推荐一个用同样方法绘画的喜洋洋图像效果，效果很赞。 懒人之家原创，转载请...
例如，可以使用CSS3的`transform`属性实现游戏对象的平移、旋转和缩放，`animation`则可用于创建复杂的动画效果。 3. JavaScript编程 JavaScript是H5小游戏的核心，负责处理游戏逻辑、用户输入和网络通信等。...
在IT行业中，将WebView放进自定义画廊来制作杂志效果是一种常见的数字出版技术，它可以将传统的纸质杂志转化为互动性强、视觉效果丰富的数字形式。这里我们将深入探讨如何实现这个功能，以及涉及的相关知识点。 ...