css3画图之大白(●

把大白送给你~

<!DOCTYPE html>

<html>

<head>

</head>

*, body {

margin: 0;

padding: 0;

}

.wrap {

width: 480px;

height: 700px;

position: relative;

}

.background {

width: 480px;

height: 700px;

position: absolute;

background: #597370;

overflow: hidden;

}

.background_box1 {

width: 300px;

height: 50px;

margin: 0 auto;

border: 4px solid #394946;

border-top: none;

box-shadow: 0 -1px 5px rgba(0,0,0,1);

}

.background_box2 {

width: 300px;

height: 80px;

margin: 0 auto;

border: 4px solid #394946;

box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

background: #394946;

}

.background_box3 {

position: relative;

width: 300px;

height: 300px;

margin: 0 auto;

border: 4px solid #394946;

box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

background: #394946;

}

.background_box3:after {

content: "";

position: absolute;

width: 95%;

height: 97%;

margin: 1%;

border: 4px solid #394946;

background: #2f3f4e;

}

.background_box4 {

width: 100%;

height: 80px;

margin: 2px auto;

border-top: 4px solid #394946;

border-bottom: 4px solid #394946;

box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

background: #2c3733;

}

.background_box5 {

width: 100%;

height: 15px;

margin: 0 auto;

box-shadow: 0 0 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,0.3) inset;

background: #2c3733;

}

.background_line1 {

position: absolute;

left: -41px;

top: 625px;

width: 165px;

height: 3px;

margin: 0 auto;

-webkit-transform: rotate(-240deg);

-moz-transform: rotate(-240deg);

-o-transform: rotate(-240deg);

transform: rotate(-240deg);

background: rgba(0,0,0,0.3);

}

.background_line2 {

position: absolute;

left: 353px;

top: 625px;

width: 165px;

height: 3px;

margin: 0 auto;

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-o-transform: rotate(60deg);

transform: rotate(60deg);

background: rgba(0,0,0,0.3);

}

.body {

width: 480px;

height: 700px;

position: absolute;

}

.cpu {

position: absolute;

left: 270px;

top: 170px;

width: 30px;

height: 30px;

background: #E4E4E4;

border-radius: 70% 100%;

box-shadow: 0px 2px 3px rgba(0,0,0,0.2),0px 2px 3px rgba(255,255,255,1) inset;

z-index: 2;

}

.heart {

width: 16px;

height: 20px;

position: relative;

}

.heart:before {

position: absolute;

left: 10px;

top: 10px;

content:" ";

width: 8px;

height: 12px;

border: 0 solid transparent;

border-radius: 25px 10px 0 0;

background: #E24C4C;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

.heart:after {

position: absolute;

left: 14px;

top: 10px;

content:" ";

width: 8px;

height: 12px;

border: 0 solid transparent;

border-radius: 10px 25px 0 0;

background: #E24C4C;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

.head {

position: absolute;

left: 177px;

top: 67px;

width: 110px;

height: 76px;

border-radius: 50% 45%;

box-shadow: 0 10px 5px rgba(0,0,0,0.2);

background: -webkit-linear-gradient(top, #fff 30%, #d6d6d6);

z-index: 2;

}

.eye1 {

position: absolute;

left: 20px;

top: 30px;

width: 12px;

height: 12px;

border-radius: 100%;

background: #000;

-webkit-animation: eye 2s ease infinite;

-moz-animation: eye 2s ease infinite;

-o-animation: eye 2s ease infinite;

animation: eye 2s ease infinite;

}

.eye2 {

position: absolute;

left: 76px;

top: 30px;

width: 12px;

height: 12px;

border-radius: 100%;

background: #000;

-webkit-animation: eye 2s ease infinite;

-moz-animation: eye 2s ease infinite;

-o-animation: eye 2s ease infinite;

animation: eye 2s ease infinite;

}

.eyeline {

position: absolute;

left: 30px;

top: 36px;

width: 50px;

height: 1px;

background: #000;

}

@keyframes eye {

0%,20%, 100%{

-webkit-transform:scale(1,1);

-moz-transform:scale(1,1);

-o-transform:scale(1,1);

transform:scale(1,1);

}

10%{

-webkit-transform:scale(1,0.2);

-moz-transform:scale(1,0.2);

-o-transform:scale(1,0.2);

transform:scale(1,0.2);

}

@-webkit-keyframes eye {

0%,20%, 100%{

-webkit-transform:scale(1,1);

-moz-transform:scale(1,1);

-o-transform:scale(1,1);

transform:scale(1,1);

}

10%{

-webkit-transform:scale(1,0.2);

-moz-transform:scale(1,0.2);

-o-transform:scale(1,0.2);

transform:scale(1,0.2);

}

.trunk {

position: absolute;

left: 106px;

top: 100px;

z-index: 1;

}

.trunk1 {

position: absolute;

left: 27px;

top: 19px;

width: 50px;

height: 64px;

border: 79px solid #eee;

background: #eee;

border-radius: 100%;

}

.trunk2 {

position: absolute;

left: 22px;

top: 100px;

width: 100px;

height: 200px;

background: #eee;

-webkit-transform: rotate(12deg);

-moz-transform: rotate(12deg);

-o-transform: rotate(12deg);

transform: rotate(12deg);

box-shadow: -1px 1px 2px rgba(0,0,0,0.2);

}

.trunk2:after {

content: "";

position: absolute;

left: 113px;

top: -27px;

width: 100px;

height: 200px;

background: #eee;

-webkit-transform: rotate(-24deg);

-moz-transform: rotate(-24deg);

-o-transform: rotate(-24deg);

transform: rotate(-24deg);

box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

}

.trunk3 {

position: absolute;

left: 0px;

top: 201px;

width: 260px;

height: 200px;

border-radius: 100%;

box-shadow: 0 10px 5px rgba(0,0,0,0.2);

background: -webkit-linear-gradient(top, #eee 30%, #E4E4E4 60%, #e9e9e9 90%);

}

.hand {

}

.hand1 {

position: absolute;

left: 16px;

top: 196px;

width: 320px;

height: 143px;

border-top: 76px solid #eee;

border-radius: 32% 52%;

-webkit-transform: rotate(-80deg);

-moz-transform: rotate(-80deg);

-o-transform: rotate(-80deg);

transform: rotate(-80deg);

z-index: 0;

}

.hand2 {

position: absolute;

left: 136px;

top: 196px;

width: 320px;

height: 143px;

border-top: 76px solid #eee;

border-radius: 52% 32%;

-webkit-transform: rotate(80deg);

-moz-transform: rotate(80deg);

-o-transform: rotate(80deg);

transform: rotate(80deg);

z-index: 0;

}

.finger1 {

position: absolute;

left: 88px;

top: 427px;

width: 20px;

height: 48px;

border-radius: 0 0 80% 50%;

background: #eee;

-webkit-transform: rotate(-32deg);

-moz-transform: rotate(-32deg);

-o-transform: rotate(-32deg);

transform: rotate(-32deg);

}

.finger2 {

position: absolute;

left: 104px;

top: 426px;

width: 20px;

height: 43px;

border-radius: 0 0 100% 45%;

background: #eee;

-webkit-transform: rotate(-32deg);

-moz-transform: rotate(-32deg);

-o-transform: rotate(-32deg);

transform: rotate(-32deg);

}

.finger3 {

position: absolute;

left: 364px;

top: 427px;

width: 20px;

height: 48px;

border-radius: 0 0 80% 50%;

background: #eee;

-webkit-transform: rotate(32deg);

-moz-transform: rotate(32deg);

-o-transform: rotate(32deg);

transform: rotate(32deg);

}

.finger4 {

position: absolute;

left: 353px;

top: 426px;

width: 20px;

height: 43px;

border-radius: 0 0 100% 45%;

background: #eee;

-webkit-transform: rotate(32deg);

-moz-transform: rotate(32deg);

-o-transform: rotate(32deg);

transform: rotate(32deg);

}

.foot {

position: absolute;

left: 135px;

top: 455px;

z-index: 0;

}

.foot1 {

position: absolute;

left: 0;

top: 0;

width: 100px;

height: 140px;

background: -webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);

border-radius: 10% 9% 22% 62%;

}

.foot2 {

position: absolute;

left: 100px;

top: 0;

width: 100px;

height: 140px;

background: -webkit-linear-gradient(left, #cdcdcd, #e3e3e3, #cdcdcd);

border-radius: 10% 9% 62% 22%;

box-shadow: -2px 0 2px rgba(0,0,0,0.1);

}

</style>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

交流群：103791667

css3画图之大白(●—●)的更多相关文章

css3画图那些事（三角形、圆形、梯形等）
闲来无事,写写图形.当时巩固一下css3吧..前端小白,写的不好还请前辈多指教. 三角形 { width:; height:; border-bottom: 140px solid red ; bor ...
CSS3画图
众所周知,用CSS3的圆角.转换可以画出各种不同的形状,制作不同的图案,早些前先驱者已画出经典的叮当猫,iphone手机等展示CSS3的强大实力,趁最近有空我也对CSS3进行了一些实践,颇有收获. 用 ...
玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]
在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素 ...
CSS3特殊图形制作
CSS3特殊图形制作现在IE8+的浏览器都支持CSS3+HTML5了,IE8及以下的浏览器的浏览器也快告一段落了,大前端的时代来了.废话不多说,现在开始用CSS3画图 1.心型 //HTML < ...
【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）
原本自己也想画大白,正巧看到一位同学(github:https://github.com/shiyiwang)也用相同的方法画了. 且细节相当到位.所以我就fork了一下,在此我也分享一下.同时,我也 ...
一分钟可知css3版大白源码
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...
CSS3与页面布局学习总结（四）——页面布局大全
一.负边距与浮动布局 1.1.负边距所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

随机推荐

Qt connect parent widget 连接父控件的信号槽
Qt中的信号槽系统是不同类中间传递数据的神器,如果连接父子空间之间的信号槽很重要,在父类中实例化子类的时候一定要注意将父类连上,不然信号槽无法使用,比如若子类是个对话框Dialog类,一定不要忘了加t ...
Java泛型总结
1. 什么是泛型?泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类.可以把类型参数看作是使用参数化类型时指定的类型的 ...
使用安捷伦波形编辑软件产生GK101 任意波数据文件的方法（支持手绘）
软件安装包下载地址: 链接: http://pan.baidu.com/s/1bn8Lmhx 密码: v5xz 一.安捷伦IO套件安装 1.将压缩包解压,首先双击IOLibSuite_16_3_179 ...
HTTP 笔记与总结（3 ）socket 编程：发送 GET 请求
使用 PHP + socket 模拟发送 HTTP GET 请求,过程是: ① 打开连接 ② 构造 GET 请求的数据:写入请求行.请求头信息.请求主体信息(GET 请求没有主体信息) ③ 发送 GE ...
tomcat启动报错：IOException while loading persisted sessions: java.io.EOFException.
tomcat启动错误代码: 严重: IOException while loading persisted sessions: java.io.EOFException java.io.EOFExce ...
material design——设计文档
http://www.uisdc.com/comprehensive-material-design-note
如何用Apache TCPMon来截获SOAP消息
在WebService服务器和客户机之间会传递SOAP消息,有时我们需要得到这些消息以便调试,而Apache的TCPMon可以帮助我们做到这一点. TCPMon的下载地址在http://ws.apa ...
Java 常见问题思考
Java中的成员变量是选择在声明时赋值还是在构造函数中赋值? // 通过构造函数赋值 public class UserRequestImpl extends ModuleImplBase { pri ...
【转】配置 VS 2015 开发跨平台手机应用
为了使用 VS 2015 开发跨平台手机应用,VS 2015 装了很多次,遇到了很多坑,才终于弄明白怎样配置才能正常使用C#开发手机应用,现把步骤分享给大家,以免大家少走弯路. 运行环境: Windo ...
通过驱动向打印机发送一段(ESC)控制指令
这个功能看起来挺奇葩的, 写这个是因为有客户在使用驱动连接票据打印机, 但是又要开钱箱, 驱动里只能每张单据都开钱箱, 而这个打印机又不是只打印结帐单所以就需要用软件控制打印机开钱箱票据打印机一般 ...

css3画图之大白(●—●)

css3画图之大白(●—●)的更多相关文章

随机推荐

热门专题