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

随机推荐

提升 web 应用程序的性能（一）
提升 web 应用程序的性能,找出瓶颈,加快客户端内容的速度. 作为 web 用户,我们知道页面加载或刷新的速度对其成功至关重要.本文将帮助您更好地理解影响 web 应用程序性能的因素.学 ...
oracle在线重定义表
在一个高可用系统中,如果需要改变一个表的定义是一件比较棘手的问题,尤其是对于7×24系统.Oracle提供的基本语法基本可以满足一般性修改,但是对于把普通堆表改为分区表,把索引组织表修改为堆表等操作就 ...
PHP IIS SPY
<?php $ObjService = new COM("IIS://localhost/w3svc"); foreach ($ObjService as $obj3w) { ...
php 上传图片
学习地址:http://www.imooc.com/video/2473 <?php header("content-type:text/html;charset=utf-8" ...
[转]IE11下Forms身份认证无法保存Cookie的问题
本文转自:http://www.cnblogs.com/jaxu/p/3698377.html ASP.NET中使用Forms身份认证常见的做法如下: 1. 网站根目录下的Web.config添加au ...
ERROR com.opensymphony.xwork2.interceptor.ParametersInterceptor.error:34 - Developer Notification
We are trying to migrate from Struts 2.2 to Struts 2.3, after getting to run the project I am seeing ...
CSS权威指南 - 浮动和定位 1
定位定位的想法很简单元素框相对于正常位置出现在哪里. 定位:static,相对, 绝对, fixed, 继承 static就是默认的位置相对就是相对于默认位置的偏移.原来的static定位位置依然 ...
emacs tutorial笔记
emacs tutorial笔记---基本控制 C-字母表示一起按下Ctrl和字母/ 表示“或者”的意思 C - ctrlM - alt C-p C-b C-f C-n C-l 当前行放中央 ...
Java IO包装流如何关闭？
问题: (1)JAVA的IO流使用了装饰模式,关闭最外面的流的时候会自动调用被包装的流的close()方吗? (2)如果按顺序关闭流,是从内层流到外层流关闭还是从外层到内存关闭? 问题(1)解释: ...
git 第一次初始化
Command line instructions Git global setup git config --global user.name "{名字}({工号})" git ...

css3画图之大白(●—●)

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

随机推荐

热门专题