一起来用css画画
hello，大白来了。。。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>baymax</title>
<style type="text/css">
.wrap {
width:500px;
height:700px;
border:1px solid rgba(0,0,0,0.2);
position:relative;
margin:0 auto;
background:-webkit-radial-gradient(center, #555, #000);
background: -moz-radial-gradient(center, #ccc, #555);
background: radial-gradient(center, #ccc, #555);
}
.header{
width:114px;
height:76px;
background:-webkit-linear-gradient(top, #fff 30%, #d6d6d6);
background: -moz-linear-gradient(top, #fff 30%, #ccc 60%, #d6d6d6 90%);
background: linear-gradient(top, #fff 30%, #d6d6d6);
border-radius:50% 50% 45% 45%;
margin:0 auto;
margin-top:60px;
position:relative;
box-shadow:0 10px 5px rgba(0,0,0,0.2);
z-index:500;
}
.mouth{
position:absolute;
width:60px;
height:5px;
border-radius:50%;
box-shadow:0 1px 0 #333;
top:32px;
left:26px;
}
.lefteye{
position:absolute;
width:14px;
height:14px;
border-radius:50%;
background:#333;
top:30px;
left:23px;
-webkit-animation:duang 2s ease infinite;
-moz-animation:duang 2s ease infinite;
animation:duang 2s ease infinite;
}
.righteye{
position:absolute;
width:14px;
height:14px;
border-radius:50%;
background:#333;
top:30px;
left:74px;
-webkit-animation:duang 2s ease infinite;
-moz-animation:duang 2s ease infinite;
animation:duang 2s ease infinite;
}
@keyframes duang{
0%,20%, 100%{
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
-moz-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
@-webkit-keyframes duang{
0%,20%, 100%{
-webkit-transform:scale(1,1);
-moz-transform:scale(1,1);
transform:scale(1,1);
}
10%{
-webkit-transform:scale(1,0.2);
-moz-transform:scale(1,0.2);
transform:scale(1,0.2);
}
}
.body_top{
width:226px;
height:160px;
background:red;
position:absolute;
top:118px;
left:135px;
border-radius:105px 105px 5px 5px;
background:-webkit-linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
background: -moz-linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
background: linear-gradient(top, #f9f9f9 30%, #f1f2ed 60%, #eee 90%);
z-index:400;
}
.cpu{
width:30px;
height:30px;
background:#eee;
position:absolute;
top:60px;
left:155px;
border-radius:50%;
box-shadow:0px 3px 1px rgba(0,0,0,0.1),
0px 3px 2px rgba(255,255,255,1) inset;
-webkit-transform:skew(10deg,0) rotate(10deg);
-moz-transform:skew(10deg,0) rotate(10deg);
-ms-transform:skew(10deg,0) rotate(10deg);
-o-transform:skew(10deg,0) rotate(10deg);
transform:skew(10deg,0) rotate(10deg);
overflow:hidden;
}
.cpu span{
position:absolute;
width:8px;
height:1px;
background:rgba(0,0,0,0.1);
top:15px;
}
.cpu span:nth-child(1){
left:0px;
top:16px;
}
.cpu span:nth-child(2){
width:6px;
left:7px;
top:14px;
transform:rotate(-45deg);
}
.cpu span:nth-child(3){
width:8px;
left:12px;
top:12px;
}
.cpu span:nth-child(4){
width:6px;
left:19px;
top:14px;
transform:rotate(45deg);
}
.cpu span:nth-child(5){
left:24px;
top:16px;
}
.body_left{
width:200px;
height:280px;
background:#eee;
position:absolute;
top:200px;
left:115px;
border-radius:15% 30%;
z-index:400;
transform:rotate(10deg);
z-index:390;
box-shadow:-3px 0 3px rgba(0,0,0,0.1);
}
.body_right{
width:200px;
height:280px;
background:#eee;
position:absolute;
top:200px;
left:180px;
border-radius:30% 15%;
z-index:400;
transform:rotate(-10deg);
z-index:390;
box-shadow:3px 0 3px rgba(0,0,0,0.1);
}
.body_bot{
width:286px;
height:233px;
background:red;
position:absolute;
top:290px;
left:103px;
border-radius:50%;
background:-webkit-linear-gradient(top, #eee 30%, #d2d2d2 60%, #e9e9e9 90%);
background:-moz-linear-gradient(top, #eee 30%, #d2d2d2 60%, #e9e9e9 90%);
background:linear-gradient(top, #eee 30%, #d2d2d2 60%, #e9e9e9 90%);
box-shadow:0 7px 5px rgba(0,0,0,0.2);
z-index:400;
}
.hand_left1{
position:absolute;
width:260px;
height:150px;
background:#eee;
transform:rotate(-48deg);
border-radius:50%;
top:170px;
left:36px;
z-index:300;
}
.hand_left2{
position:absolute;
width:100px;
height:220px;
background:#eee;
transform:rotate(12deg);
border-radius:50%;
top:215px;
left:48px;
z-index:300;
}
.hand_left3{
position:absolute;
width:80px;
height:210px;
background:-webkit-linear-gradient(top, #eee 20%, #ccc 50%);
background:-moz-linear-gradient(top, #eee 20%, #ccc 50%);
background:linear-gradient(top, #eee 20%, #ccc 50%);
transform:rotate(2deg);
border-radius:50%;
top:270px;
left:39px;
z-index:300;
}
.hand_left4{
position:absolute;
width:30px;
height:80px;
background:#ccc;
background:-webkit-linear-gradient(top, #ccc 50%, #ddd 70%);
background:-moz-linear-gradient(top, #ccc 50%, #ddd 70%);
background:linear-gradient(top, #ccc 50%, #ddd 70%);
transform:rotate(-30deg);
border-radius:50%;
top:430px;
left:60px;
z-index:300;
}
.hand_left5{
position:absolute;
width:25px;
height:50px;
background:#ccc;
background:-webkit-linear-gradient(top, #ccc 50%, #ddd 70%);
background:-moz-linear-gradient(top, #ccc 50%, #ddd 70%);
background:linear-gradient(top, #ccc 50%, #ddd 70%);
transform:rotate(-20deg);
border-radius:50%;
top:440px;
left:90px;
z-index:300;
}
.hand_right1{
position:absolute;
width:260px;
height:150px;
background:#eee;
transform:rotate(48deg);
border-radius:50%;
top:170px;
left:196px;
z-index:300;
}
.hand_right2{
position:absolute;
width:100px;
height:200px;
background:#eee;
transform:rotate(-10deg);
border-radius:50%;
top:222px;
left:338px;
z-index:300;
}
.hand_right3{
position:absolute;
width:80px;
height:210px;
background:-webkit-linear-gradient(top, #eee 20%, #ccc 50%);
background: -moz-linear-gradient(top, #eee 20%, #ccc 50%);
background: linear-gradient(top, #eee 20%, #ccc 50%);
transform:rotate(-2deg);
border-radius:50%;
top:270px;
left:368px;
z-index:300;
}
.hand_right4{
position:absolute;
width:30px;
height:80px;
background:#ccc;
background:-webkit-linear-gradient(top, #ccc 50%, #ddd 70%);
background: -moz-linear-gradient(top, #ccc 50%, #ddd 70%);
background: linear-gradient(top, #ccc 50%, #ddd 70%);
transform:rotate(30deg);
border-radius:50%;
top:430px;
left:400px;
z-index:300;
}
.hand_right5{
position:absolute;
width:25px;
height:50px;
background:#ccc;
background:-webkit-linear-gradient(top, #ccc 50%, #ddd 70%);
background: -moz-linear-gradient(top, #ccc 50%, #ddd 70%);
background: linear-gradient(top, #ccc 50%, #ddd 70%);
transform:rotate(20deg);
border-radius:50%;
top:440px;
left:375px;
z-index:300;
}
.foot_left{
position:absolute;
width:118px;
height:180px;
background:#eee;
top:450px;
left:132px;
border-radius:10% 20% 18% 58%;
box-shadow:-1px 0px 8px rgba(0,0,0,0.2) inset;
background:-webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
background: -moz-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
background: linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
z-index:100;
}
.foot_right{
position:absolute;
width:118px;
height:180px;
background:#eee;
top:450px;
left:250px;
border-radius:20% 10% 58% 18%;
box-shadow:-1px 0px 8px rgba(0,0,0,0.2) inset;
background:-webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
background: -moz-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
background: linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);
z-index:100;
}
.shadow{
position:absolute;
width:100px;
height:80px;
bottom:100px;
left:180px;
z-index:99;
}
.shadow:before{
content:"";
position:absolute;
width:150px;
height:80px;
bottom:0px;
left:20px;
box-shadow:-100px 80px 30px rgba(0,0,0,0.2);
z-index:99;
}
.shadow:after{
content:"";
position:absolute;
width:150px;
height:80px;
bottom:0px;
left:10px;
box-shadow:50px 80px 30px rgba(0,0,0,0.2);
z-index:99;
}
.bg{
position:absolute;
width:100%;
height:100%;
background:#597370;
z-index:1;
top:0;
overflow:hidden;
}
.bg1{
width:340px;
height:40px;
border:4px solid #394946;
border-top:none;
margin:0 auto;
box-shadow:0 -1px 5px rgba(0,0,0,1);
}
.bg2{
width:340px;
height:75px;
background:#394946;
border:4px solid #394946;
margin:0 auto;
box-shadow:0 0px 5px rgba(0,0,0,1),
0 0 10px rgba(0,0,0,0.3) inset;
}
.bg3{
width:340px;
height:280px;
background:#394946;
border:4px solid #394946;
margin:0 auto;
position:relative;
box-shadow:0 0px 5px rgba(0,0,0,1),
0 0 10px rgba(0,0,0,0.3) inset;
}
.bg3:after{
content:"";
width:96%;
position:absolute;
height:98%;
background:#2f3f4e;
border:4px solid #394946;
margin:1%;
}
.bg4{
width:100%;
height:80px;
background:#2c3733;
border:4px solid #394946;
border-left:0;
border-right:0;
margin:0 auto;
position:relative;
box-shadow:0 0px 5px rgba(0,0,0,1),
0 0 10px rgba(0,0,0,0.3) inset;
}
.bg5{
width:100%;
height:20px;
background:#2c3733;
margin:0 auto;
position:relative;
box-shadow:0 0px 5px rgba(0,0,0,1),
0 0 10px rgba(0,0,0,0.3) inset;
}
.bg-line1{
width:3px;
height:230px;
background:rgba(0,0,0,0.3);
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
position:absolute;
left:50px;
bottom:-36px;
}
.bg-line2{
width:3px;
height:230px;
background:rgba(0,0,0,0.3);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
position:absolute;
right:50px;
bottom:-36px;
}
.copy p{
text-align:center;
padding:30px 0;
color:rgba(0,0,0,0.2);
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
text-transform:capitalize;
margin:0 auto;
}
</style>
</head> <body>
<div class="wrap">
<!--头部开始-->
<div class="header">
<div class="mouth"></div>
<div class="lefteye"></div>
<div class="righteye"></div>
</div>
<!--身体开始-->
<div class="body">
<!--上半身拼凑开始-->
<div class="body_top">
<div class="cpu">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div>
<div class="body_left"></div>
<div class="body_right"></div>
</div>
<div class="body_bot"></div>
<!--手开始-->
<div class="hand">
<!--左手开始-->
<div>
<div class="hand_left1"></div>
<div class="hand_left2"></div>
<div class="hand_left3"></div>
<div class="hand_left4"></div>
<div class="hand_left5"></div>
</div>
<!--右手开始-->
<div>
<div class="hand_right1"></div>
<div class="hand_right2"></div>
<div class="hand_right3"></div>
<div class="hand_right4"></div>
<div class="hand_right5"></div>
</div>
</div>
<!--腿开始-->
<div>
<div class="foot_left"></div>
<div class="foot_right"></div>
</div>
<!--身体投影-->
<div class="shadow"></div>
</div>
<!--场景开始-->
<div class="bg">
<div class="bg1"></div>
<div class="bg2"></div>
<div class="bg3"></div>
<div class="bg4"></div>
<div class="bg5"></div>
<div class="bg-line1"></div>
<div class="bg-line2"></div>
</div>
</div> </body>
</html>
一起来用css画画的更多相关文章
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- 用CSS box-shadow画画
原理:找一幅画,每隔5 pixel取一个点的RGB,在CSS中用box-shadow描绘出这个点 Python from PIL import Image if __name__ == '__main ...
- [css]我要用css画幅画(七) - 哆啦A梦
接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...
- [css]我要用css画幅画(二)
接着之前的[css]我要用css画幅画(一) , 今天,我又画一个房子,很简单,屋顶.墙壁.门. 现在开始,做得效果都只兼容chrome,所以下面的css3的属性可能只有-webkit-前缀. 我只是 ...
- 经典面试题：浏览器是怎样解析CSS的？
摘要: 理解浏览器原理. 解析 一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS.这可以是单个文档内的 CSS.<style>标记内的 CSS,也可以是 DO ...
- canvas里设置width和css里设置width和js里设置width的区别
canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...
- day041 前端HTML CSS基本选择器(未整理完毕)
标签: <b> :加粗 <i> :倾斜体 <u>: 下划线 <s>: 删除线 <p>:段落 <h1> - <h6> ...
- Web基础 HTML CSS JS JQuery AJAX
1. Web基础 网页的骨骼HTML 什么是HTML超文本标记语言:Hyper Text Markup Language 这都不重要,重要的是:HTML是Web网页的基本组成部分HTML中定义的元素, ...
随机推荐
- python--day4--迭代器、生成器
列表生成式: 需求:列表[1,2,3,4,5,6,7,8,9]每个值加1,实现的方法: a = [0,1,2,3,4,5,6,7,8,9] b = [] for i in a:b.append(i+1 ...
- Golang--计算文件的MD5值
参考: http://blog.csdn.net/u014029783/article/details/53762363 用法: $ go run 01.go -f 1.txt b9d228f114d ...
- 在SpringMVC的controller控制器中使用Servlet原生的API
只需要在控制器的方法里添加相应的Servlet 参数即可! 支持以下参数: 新建一个controller类,部分代码如下:(省略xml配置文件) @RequestMapping("servl ...
- Arrar.prototype.map()的用法
---恢复内容开始--- map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组. array.map(callback[, thisArg]) 注:[]在语法中[]内的内 ...
- 淘淘商城_day09_课堂笔记
今日大纲 实现购物车 基于Mysql实现读写分离 购物车 需求描述 用户可以在登录状态下将商品添加到购物车 用户可以在未登录状态下将商品添加到购物车 用户可以使用购物车一起结算下单 用户可以查询自己的 ...
- Black Jack
Black Jack 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5602 记忆化搜索 用dp[0][i][j]记录当player为i,banker为 ...
- Sass与Compress实战：第三章
概要:这一章将介绍Compass如何使Web设计中最基础的部分——布局变得简单. 本章内容: ● 网格布局的基本原理以及何时使用网格布局 ● 使用Compass时的CSS网格布局框架选项 ● 使用排版 ...
- 1、Eclipse的安装
下载地址:http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/indigosr1 2.java jdk 的 ...
- 使用NGUI实现拖拽功能（拼图小游戏）
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
- uint8与double，二维矩阵显示灰度图
double型0~1对应uint8型0~255,转换用im2double和im2uint8 如果直接用uint8(double型),则为0~1的uint8型数据,图像全黑. 处理数据过程推荐用doub ...