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取负值时将拉近距离.常见的功能 ...

随机推荐

【C语言】14-返回指针的函数与指向函数的指针
前言前面我们花了接近3个章节学习指针,应该都感受到指针的强大了吧.指针可以根据地址直接操作内存中的数据,使用得当的话,不仅能使代码量变少,还能优化内存管理.提升程序性能.关于指针的内容还非常多,比如 ...
shenyi 语录
[讲师]沈逸(65480539) 2016-06-08 14:58:42 会centos 转redhat是分分钟的事 [讲师]沈逸(65480539) 2016-06-08 14:58:54 查看 ...
描述了say_hello函数的具体内容，调用zend_printf系统函数在php中打印字符串
下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构 ...
redis 配置 linux
附件启动停止脚本 redis_6433: #/bin/sh #Configurations injected by install_server below.... EXEC=/usr/local/ ...
Jenkins+Maven+Svn搭建持续集成环境持续集成和自动部署
Jenkins和Hudson有很深的渊源,Jenkins目前更新频繁,目前选用Jenkins为持续集成工具和自动部署 Jenkins的使用有很多的介绍,主要记录如下要点: 192.168.1.240: ...
Nginx 笔记与总结（16）nginx 负载均衡
nginx 反向代理时,如果后端有多台服务器,就可以实现负载均衡. 实现原理:把多台服务器用 upstream 绑定在一起并起一个组名,然后 proxy_pass 指向该组. ngx_http_ups ...
laravel 部分路由取消csrf
// app/Http/Middleware/VerifyCsrfToken protected $except = [ 'webhook/*' ];
Rochester Memory Hardware Error Research Project
http://www.cs.rochester.edu/research/os/memerror/
Support vector machine
https://en.wikipedia.org/wiki/Support_vector_machine In machine learning, support vector machines (S ...
Java中共享设计
Java中的共享设计的思路是在Java中形成一个对象池,在这个对象池中保存多个对象, 新实例化的对象如果已经在池中定义了,则不再重复新定义,而从池中直接取出继续使用. 例如,对于字符串来说,Java ...

css3画图之大白(●—●)

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

随机推荐

热门专题