制作一头小猪{第一部分}

.box{width: 1500px;

height:1500px;

border:1px solid blue;

position: relative;}

.box1{width:550px;

height:500px;

background-color:#FFCCCC;

border-radius:50%;

margin:50px auto;

position:relative;

z-index:1;}

.nose{width:200px;

height:150px;

background:#FF99CC;

border-radius:50%;

margin:0 auto;

position:absolute;

bottom: 90px;

left: 180px;}

.list{width:150px;

height:50px;

margin:35px auto;

margin-left:30px;}

.list1{width:50px;

height: 50px;

background-color:#FF9999;

float:left;

border-radius:50%;

margin:10px;

}

.box2 div{width:30px;

height: 30px;

background-color:black;

border-radius:50%;

float:left;

z-index: 1}

.box2{width:220px;

height:30px;

margin:0 auto;

position:absolute;

top:120px;

left: 165px;

}

.eyes2{position:absolute;

top:0;

right:0;}

.shadow{width:100px;

height:100px;

background-color:#CC9900;

border-radius:50%;

position: absolute;

left:140px;

top:80px}

.ear1{width:200px;

height:200px;

background-color:#FFCCCC;

float:left;

border-radius:0% 50% 0% 100%;

position:absolute;

left:-150px;

top: 20px;}

.ear2{width:200px;

height:200px;

background-color:#FFCCCC;

float:left;

border-radius:50% 0 100% 0;

position:absolute;

right:-150px;

top: 20px;}

.duzi{width:400px;

height:500px;

background-color:#FFCCCC;

position:absolute;

left: 550px;

top: 500px;

border-radius:45%;}

.leg1,.leg2{float: left;}

.leg1{position: absolute;

width:80px;

height: 80px;

background-color:#FFCCCC;

top:30px;

left: -30px;

border-radius:30% 60% 0 60%;}

.leg2{position: absolute;

width:80px;

height: 80px;

background-color:#FFCCCC;

right:-30px;

top: 30px;

border-radius:60% 30% 60% 0%;}

.leg3{position: absolute;

width:80px;

height: 80px;

background-color:#FFCCCC;

bottom:-80px;

left:100px;

border-radius:40%;}

.leg4{position: absolute;

width:80px;

height: 80px;

background-color:#FFCCCC;

bottom:-80px;

right:100px;

border-radius:40%;}

.f1{position: absolute;

width:10px;

height:30px;

background-color:white;

border-radius:40%;

bottom:-1px;

left:19px;}

.f2{position: absolute;

width:10px;

height:30px;

background-color:white;

border-radius:40%;

bottom:-1px;

right:19px;}

.f3{position: absolute;

width:10px;

height:30px;

background-color:white;

border-radius:40%;

bottom:-1px;

left:19px;}

.f4{position: absolute;

width:10px;

height:30px;

background-color:white;

border-radius:40%;

bottom:-1px;

right:19px;}

.red1{width:220px;

height:100px;

background-color: red;

position:absolute;

left:90px;

top: -40px;

border-radius:0 0 50% 50%;}

.red2{width:50px;

height:200px;

background-color:red;

position:absolute;

top:30px;

left:180px;

border-radius:100%;}

}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标
    各种纯css图标 CSS3可以实现很多漂亮的图形，我收集了32种图形，在下面列出。直接用CSS3画出这些图形，要比...
    剑残阅读 9,688评论 0赞 8
  • css中各种图形的制作
    1.长方形 #Rectangle{ width: 200px; height: 50px; background-...
    一直以来都很好阅读 518评论 0赞 0
  • css画五角星
    5.椭圆 #ellipse{ width: 200px; height: 100px; background-co...
    小茶叶叶阅读 2,123评论 0赞 1
  • 实用的60个CSS代码片段
    1、垂直对齐 如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，...
    kiddings阅读 3,200评论 0赞 11
  • 藏在梅花中的生灵
    藏在梅花中的生灵 ——缯青 走在高原的小镇上，趁着雪还没有下的很大，匆忙地从店里往家中走。夜色中，朵朵雪花飘洒人间...
    缯青阅读 343评论 0赞 0