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,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [ ...
随机推荐
- Concurrency vs. Parallelism
http://getakka.net/docs/concepts/terminology Terminology and Concepts In this chapter we attempt to ...
- mybatis批量插入返回主键问题
今天整合mybatis时候用到返回主键问题,批量插入总是返回不了主键还报错. 记录入下: pom版本: <mybatis.version>3.2.6</mybatis.version ...
- How To Install Java on CentOS and Fedora
PostedDecember 4, 2014 453.8kviews JAVA CENTOS FEDORA Introduction This tutorial will show you how ...
- memcached安装
memcached安装 一.安装gcc # yum -y install gcc 二.安装libevent # wget http://www.monkey.org/~provos/libevent- ...
- T-SQL编程 —— 用户自定义函数(标量函数)
用户自定义函数 在使用SQL server的时候,除了其内置的函数之外,还允许用户根据需要自己定义函数.根据用户定义函数返回值的类型,可以将用户定义的函数分为三个类别: 返回值为可更新表的函数 如果用 ...
- js设计模式总结-单例模式
单例模式 解决的问题 保证实例只有一个,避免多个实现,从全局来看,这个实例的状态是唯一的. 实现原理 设置一个变量来记录实例,通过检测该变量是否为空来决定是否创建实例 非透明单例 所谓非透明就是用户在 ...
- Control.DataBinding数据绑定简单用法：
DataBindings的用法: 第一个值:要绑定到TextBox的什么地方 第二个值:数据源是什么 第三个值:应该取数据源的什么属性 第四个值:是否开启数据格式化 第五个值:在什么时候启用数据源绑定 ...
- PHP 知识结构
- 使用layer.open时content属性传值记录
最近在做一个后台项目,正好碰上了要使用layer.open,就顺手记录一下,方便以后遇到了有个参考 - 2016/11/7 layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM.. ...
- Python_Day10_进程、线程、协程
本节内容 操作系统发展史介绍 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\ ...