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,当然不同的技术所涉及到的代码复杂度和难度也不一样.但是我也有意提到了基于不同方法的实现所体现出的性能表现也不一一相同. [ ...
随机推荐
- MVC的多表单
中心思想就是在一个表单内不规定"action",在js里面用@Url.Axtion("视图层","控制器")方法来设置表单的传值. 控制器 ...
- docker私有库UI和添加私有库到本机能够push和pull
$ docker run -p 8080:8080 -e REG1=http://104.236.246.10:5000/v1/ atcol/docker-registry-ui$ docker ru ...
- cygwin安装
我安装的是cygwin2.5.2,相关下载:https://cygwin.com/setup-x86_64.exe 先安装cygwin,x86_64版本,安装时选择库(gcc-core.gcc-c++ ...
- 修改C:\WINDOWS\system32\drivers\etc\hosts 文件有什么作用
host是一个没有扩展名的系统文件,可以用记事本等工具打开,其作用就是将一些常用的网址域名与其对应的IP地址建立一个关联"数据库",当用户在浏览器中输入一个需要登录的网址时,系统会 ...
- Hibernate（开放源代码的对象关系映射框架）
Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hibernate可以自动生成SQL语句,自 ...
- 5.对与表与表之间的关系，efcore是如何处理的
public class Account { [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Accoun ...
- String常用方法测试
String.Equals()使用方法 用来比较String两个对象所表示的字符串是否相同 public class StringEquals { public static void main(St ...
- php-sql-parser sql防注入脚本
<?php /** * SQL Parser from: http://code.google.com/p/php-sql-parser/ * License: New BSD */ class ...
- JavaScript 的 defer 与 async
当解析器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...
- php : MVC 演示(使用单例工厂)
此例子是MVC的简单应用, 要达到的效果如下: 用户列表: 姓名 年龄 学历 兴趣 出生地 账号创建时间 操作 keen 20 高中 篮球,足球 广东 2016-11-08 10:00:31 删除 a ...