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

随机推荐

linux中shell变量$#,$@,$*,$?,$$,$!,$_,$0,$1,$2的含义解释
变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代码(返回值) ...
imread() not working in OpenCV 2.4.11 Debug mode
The OpenCV function imread() not working in OpenCV 2.4.11 Debug mode of VS2010 under Win32, the way ...
Add Customerlize Button in More Button List In Odoo
There're two commen type of actions in odoo: ir.actions.server,ir.actions.client_multi 1.Using ir.ac ...
eclipse java工程和maven工程的互相转换
eclipse java工程和maven工程的互相转换 maven转为工程一般工程: 工程右键--->Maven--->Disable Maven Nature转为一般工程. 一般工程转为 ...
thinkphp框架中session常识
在看别人代码时候,发现他,在tp框架中使用session没有些session_start();然后我去查看了手册初始化设置方法无需手动调用,在App类的初始化工作结束后会自动调用,通常项目只需要配置 ...
Eclipse代码提示功能是不是利用反射
希望看到这个空文章的你能够说说你的意见………………
Shrink磁盘
30857(分区的总容量) = 10160(可修改的这个10610表示Shrink之后的空闲分区) + 20697(Shrink之后分区中占用掉的容量)
字符串&数组的相互转换
字符串 -> 数组方法一: $str = "abcd" $s2 = $str.GetEnumerator() #$s2是无法使用下标的方式进行索引的,因为其不是array ...
OpenStack手动从数据库中删除实例 - ugyn109的专栏 - 博客频道 - CSDN.NET
由于某种原因我将OpenStack的一个计算节点移除了,但移除前并没有删除在其上运行的实例,后来想通过dash删除这些实例,于是N天过去了,我的dash还显示如下内容:很碍眼是不是?于是我打算手动从数 ...
GIT: 远程建立一个仓库，然后复制到本地
1. 登录 GIT,创建一个新的仓库 gitskills 2. 创建的时候,要选择 Initialize this repository with a readme ,让GitHub初始化仓库 3. ...

css3画图之大白(●—●)

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

随机推荐

热门专题