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 设置不需要输入密码
https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...
- DbnBase64加密处理
package com.dbn.utils; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; impo ...
- Mybatis架构学习
Mybatis架构学习 MyBatis 是支持定制化 SQL.存储过程以及高级映射的持久层框架.MyBatis 封装了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.可以对配置和原生Map使用 ...
- Python虚拟开发环境
最近,一直在不同版本的Python之间来回折腾,发现了几个Python虚拟开发环境工具,具体如下: 1. Virtualenv,可以指定开发环境的Python版本.继承已有开发环境配置,virtual ...
- iOS的多版本配置(版本分离,多环境配置)
前几天公司说一个客户要搞一个app,我说搞呗,跟我啥关系...他说,就是从咱的app上搞,什么都一样,就是一些logo啥的不一样.我一开始感觉,那就改改logo呗,后来一想,凑,百度推送,友盟统计,B ...
- [QT学习]拷贝文件
sourceDir源绝对路径,toDir目标绝对路径 //拷贝文件: bool FileOperation::copyFileToPath(QString sourceDir ,QString toD ...
- SpringBoot Schedule 配置
1. 定时任务实现方式 定时任务实现方式: Java自带的java.util.Timer类,这个类允许你调度一个java.util.TimerTask任务.使用这种方式可以让你的程序按照某一个频度执行 ...
- kali4.0 下tftpd-hpa服务无法启动的解决方案
一.前情提要: OS:Kali4.0 64bit 使用以下命令启动tftpd-hpa服务失败: sudo /etc/init.d/tftpd-hpa 二.解决方案: 1.输入以下命令: sudo in ...
- 图像预处理第9步：存为.bmp文件
//图像预处理第9步:将最终标准化后的字符图像分为单个单个的HDIB保存,并存为.bmp文件 void CChildView::OnImgprcToDibAndSave() { unsigned ch ...
- 配置sublime text 3 的Python开发环境
为了在sublime实现像Python自带idle一样的F5交互功能: 首先安装package control然后install Sublime REPL:然后配置 Preference-->P ...