css3绘图制作萌萌的大白样式代码

时间:2018-01-31 09:11:04 浏览人数: 栏目:帮助中心

直接上代码,

css3绘图,css3大白,通过趣味,来突出代码的功能,这幅大白是以css3写的,不涉及一张图,希望大家喜欢。送妹子靠谱!


<!DOCTYPE html>

<html>

<head>

<title>大白</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<style type="text/css">

*, 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 class="wrap">

<div class="background">

<div class="background_box1"></div>

<div class="background_box2"></div>

<div class="background_box3"></div>

<div class="background_box4"></div>

<div class="background_box5"></div>

<div class="background_line1"></div>

<div class="background_line2"></div>

</div>

<div class="body">

<div class="cpu">

<div class="heart"></div>

</div>

<div class="head">

<div class="eye1"></div>

<div class="eye2"></div>

<div class="eyeline"></div>

</div>

<div class="trunk">

<div class="trunk1"></div>

<div class="trunk2"></div>

<div class="trunk3"></div>

</div>

<div class="hand">

<div class="hand1"></div>

<div class="hand2"></div>

<div class="hand3"></div>

<div class="hand4"></div>

<div class="finger1"></div>

<div class="finger2"></div>

<div class="finger3"></div>

<div class="finger4"></div>

</div>

<div class="foot">

<div class="foot1"></div>

<div class="foot2"></div>

</div>

</div>

</div>

</body>

</html>


Copyright © 2011-2018 加速度网络 保留公司所有权利   冀ICP备11003175号-1 网站地图

在线
客服

在线客服服务时间:8:30-17:30

客服
热线

4000-309-369
7*24小时客服服务热线

关注
微信

扫描加好友
顶部