using border-radius to make a worker
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Robert</title>
6 <link href="worker.css" rel="stylesheet" type="text/css">
7 <script src="worker.js"></script>
8 </head>
9 <body>
10 <div id="main">
11 <div class="hat"></div>
12 <div class="head">
13 <div class="eyes">
14 <div class="eye">
15 <div class="eye_ball"></div>
16 </div>
17 <div class="eye">
18 <div class="eye_ball"></div>
19 </div>
20 </div>
21 <div class="nose"></div>
22 <div class="mouse"></div>
23 </div>
24 <div class="neck"></div>
25 <div class="body">
26 <div class="hand_left"></div>
27 <div class="body_main"></div>
28 <div class="hand_right"></div>
29 </div>
30 <div class="legs">
31 <div class="leg_left"></div>
32 <div class="leg_right"></div>
33 </div>
34 <div class="foot">
35 <div class="foot_left"></div>
36 <div class="foot_right"></div>
37 </div>
38 </div>
39 </body>
40 </html>
worker.html
1#main{
2 position: relative;
3 width: 600px;
4 font-size:;
5 margin: 0 auto;
6 border: 1px solid transparent;
7 opacity: 0.2;
8 -webkit-transform-origin: 50% 20%;
9 -moz-transform-origin: 50% 20%;
10 -ms-transform-origin: 50% 20%;
11 -o-transform-origin: 50% 20%;
12 transform-origin: 50% 20%;
13 -webkit-transform: scale(0.3);
14 -moz-transform: scale(0.3);
15 -ms-transform: scale(0.3);
16 -o-transform: scale(0.3);
17 transform: scale(0.3);
18 -webkit-transition: -webkit-transform 2s linear,opacity 2s linear;
19 -moz-transition: -moz-transform 2s linear,opacity 2s linear;
20 -ms-transition: -ms-transform 2s linear,opacity 2s linear;
21 -o-transition: -o-transform 2s linear,opacity 2s linear;
22 transition: transform 2s linear,opacity 2s linear; }
23
24 #main .hat{
25 position: absolute;
26 width: 150px;
27 height: 80px;
28 background: #f66;
29 top:;
30 left: 50%;
31 margin-left: -75px;
32 border-radius: 70px 70px 0 0 ; }
33
34 #main .head{
35 width: 100px;
36 height: 100px;
37 background: rgb(255, 255, 104);
38 padding-top: 20px;
39 margin: 50px auto 0;
40 border-radius: 100px; }
41
42 #main .head .eyes{
43 width: 97px;
44 height: 30px;
45 margin: 10px auto;}
46
47 #main .head .eye{
48 display: inline-block;
49 width: 20px;
50 height: 20px;
51 background: #f00;
52 padding: 0 3px;
53 margin:0 10px;
54 border-radius: 30px;}
55
56 #main .head .eye_ball{
57 width: 15px;
58 height: 15px;
59 background: #1ac137;
60 margin: 2.5px auto;
61 border-radius: 15px;}
62
63 #main .head .eye,.eye_ball{
64 -webkit-transition: background 4s linear;
65 -moz-transition: background 4s linear;
66 -ms-transition: background 4s linear;
67 -o-transition: background 4s linear;
68 transition: background 4s linear; }
69
70 #main .head .nose{
71 width: 2px;
72 height: 10px;
73 background: rgb(155, 155, 194);
74 margin: 0 auto; }
75
76 #main .head .mouse{
77 width: 30px;
78 height: 10px;
79 background: rgba(224, 82, 82, 0.49);
80 margin: 10px auto 0;
81 border-radius: 5px 5px 20px 20px; }
82
83 #main .neck{
84 width: 40px;
85 height: 40px;
86 background: rgb(255, 255, 104);
87 margin: 0 auto; }
88
89 #main .body{
90 position: relative;
91 width: 280px;
92 height: 240px;
93 margin: 0 auto;
94 overflow: hidden;
95 border-radius: 80px 80px 10px 10px; }
96
97 #main .body .hand_left{
98 position: absolute;
99 top: 70px;
100 left:;
101 width: 45px;
102 height: 170px;
103 background: rgba(122, 12, 204, 0.5);
104 border-radius: 10px; }
105
106 #main .body_main{
107 width: 180px;
108 height: 240px;
109 margin: 0 auto;
110 background: rgba(122, 12, 204, 0.5);
111 border-radius: 80px 80px 10px 10px; }
112
113 #main .body .hand_right{
114 position: absolute;
115 top: 70px;
116 right:;
117 width: 45px;
118 height: 170px;
119 background: rgba(122, 12, 204, 0.5);
120 border-radius: 10px; }
121
122
123
124
125 #main .legs{
126 position: relative;
127 width: 150px;
128 height: 300px;
129 margin: 0 auto;
130 border-radius: 10px;}
131
132 #main .leg_left{
133 position: absolute;
134 top:;
135 left:;
136 width: 60px;
137 height: 300px;
138 background: rgb(117, 117, 43);
139 border-radius: 10px; }
140
141 #main .leg_right{
142 position: absolute;
143 top:;
144 right:;
145 width: 60px;
146 height: 300px;
147 background: rgb(117, 117, 43);
148 border-radius: 10px; }
149
150
151 #main .foot{
152 position: relative;
153 width: 190px;
154 height: 100px;
155 margin: 0 auto;
156 border-radius: 10px;}
157 #main .foot_left{
158 position: absolute;
159 top:;
160 left:;
161 width: 70px;
162 height: 30px;
163 background: rgb(255, 255, 104);
164 border-radius: 10px; }
165
166 #main .foot_right{
167 position: absolute;
168 top:;
169 right:;
170 width: 70px;
171 height: 30px;
172 background: rgb(255, 255, 104);
173 border-radius: 10px; }
worker.css
1 myReady(function(){
2 var main = document.getElementById('main'),
3 eye = getClassName('eye','main'),
4 eyeball = getClassName('eye_ball','main'),
5 bodyM = getClassName('body_main','main');
6
7
8 document.onmouseover = function(){
9 eye[0].style.background = 'rgba(146, 130, 158, 0.5)';
10 eye[1].style.background = 'rgba(146, 130, 158, 0.5)';
11 eyeball[0].style.background = '#000';
12 eyeball[1].style.background = '#000';
13 main.style.opacity = 1;
14 main.style.webkitTransform = 'scale('+0.6+','+ 0.7+')';
15 main.style.mozTransform = 'scale('+0.6+','+ 0.7+')';
16 main.style.msTransform = 'scale('+0.6+','+ 0.7+')';
17 main.style.oTransform = 'scale('+0.6+','+ 0.7+')';
18 main.style.transform = 'scale('+0.6+','+ 0.7+')';
19 }
20 })
21
22
23
24 //事件加载 —— 兼容IE低版本和其他浏览器
25 function myReady(fn){
26 if(document.addEventListener){
27 document.addEventListener('DOMContentLoaded',fn,false);
28 }else{
29 IEcontentLoaded(fn);
30 }
31 //兼容IE低版本
32 function IEcontentLoaded(fn){
33 var d = window.document;
34 var done = false;
35 var init =function(){
36 if(!done){
37 done = true;
38 fn();
39 }
40 };
41
42 (function(){
43 try{
44 d.documentElement.doScroll('left');
45 }catch(e){
46 setTimeout(arguments.callee,50)
47 return;
48 }
49 init();
50 })();
51
52 d.onreadystatechange = function(){
53 if(d.readyState == 'complete'){
54 d.onreadystatechange = null;
55 init();
56 }
57 }
58 }
59 }
60
61
62 //获取类名
63 function getClassName(name,parent){
64 var oParent = parent ? document.getElementById(parent) : document,
65 names = oParent.getElementsByTagName('*'),
66 ns = [];
67 for(var i=0; i<names.length; i++){
68 if(names[i].className == name){
69 ns.push(names[i]);
70 }
71 }
72 return ns;
73 }
worker.js
using border-radius to make a worker的更多相关文章
- 重温CSS：Border属性
边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
- jquery/zepto 圣诞节雪花飞扬
下载地址: http://www.html5tricks.com/jquery-html5-christ-snow.html 演示地址: http://www.html5tricks.com/jque ...
- 为 Web 设计师准备的 20 款 CSS3 工具
1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...
- jQuery实践——属性和css篇
属性: attr html:<div>demo1</div> jQuery:$("div").attr("id","demo1 ...
- Designing for iOS: Graphics & Performance
http://robots.thoughtbot.com/designing-for-ios-graphics-performance [原文] In the previous article, w ...
- Quartz2D复习（一）--- 基础知识 / 绘制线段圆弧 / 图片水印 / 截图
1.Quartz 2D是一个二维绘图引擎,同时支持ios和Mac系统: Quart2D的API是纯C语言的,API来自于Core Graphics框架: 2.Quartz 2D可以绘制图形(线段/三 ...
- [css]需警惕CSS3属性的书写顺序
转载张鑫旭:http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7% ...
- 为什么要使用sass
或许你已经听过一个叫作Sass的东东?可能你已经了解它,并且你能像大师一样写出一些函数? 对于不清楚我在讲什么的读者或者客户,你们可以想想web开发过程,你们的期望和站点用户的体验想要怎样的.无论如何 ...
- CSS模版收集
Css Reset by Eric MeyerURL:http://www.ahrefmagazine.com/web-design/30-useful-css-snippets-for-develo ...
- iOS图形处理和性能(转)
在之前的文章里,我们探讨了基于多种不同技术来实现自定义的UIButton,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [ ...
随机推荐
- 关于工程结合git的配置
我们通常把代码放到git sever中,(scm manager)中,上传,下载代码, 可是通常工程的代码改动会有图标提示,改动过的,或者新增的,那么需要在eclipse的工程中做一下简单配置 1,工 ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- Oracle(控制用户权限)
权限允许用户访问属于其它用户的对象或执行程序, ORACLE系统提供权限:Object 对象级.System 系统级 查看权限的数据字典: 字典名 含义 ROLE_SYS_PRIVS System p ...
- (收集)linux环境下乱码的解决方法
**************************** 就是从数据库中取出来时,在存入linux的文件里时,在字符流时制定编码格式.代码如下: FileOutputStream fos=new Fi ...
- js 求点到直线的距离（由2点确定的直线，求到第三点的距离）
需要用到2个数学公式 1,已知2点求其直线方程 2,点到直线的距离 1,Y=kX+b 分别将两点带入以上方程,求出k 和b 例如: p0={x:?,y:?}, p1={x:?,y:?} 可解得方程: ...
- 搞清css的单位 px,em,rem的区别
前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...
- Window 注册程序关联后缀文件，双击运行
一般来说,很多软件都会有自定义后缀的文件,比如.cpp..doc等,那么如果我们想把这些后缀与我们的软件关联起来,如何做呢 #pragma once #include "StdAfx.h&q ...
- 关于json-p
关于json-p 目录 关于json-p json-p是什么 json-p原理分析 json-p的缺点 json-p是什么 json-p实际上是一种跨域ajax发送http请求的方法,它不是什么全新的 ...
- Qt编程'""hello world
#include<QApplication>#include<QLabel>int main(int argc,char*argv[]){QApplicatin app(arg ...
- 浅谈C#Socket
好不容易把socket通信搞懂一点,比较喜欢做笔记,嘿嘿~ 希望共同学习,共同进步! socket通信是C#中非常基础的一个知识点,我这里用到的是基于Tcp协议的socket通信.Tcp会有三次握手连 ...