html页面小宠物代码大全,纯css3实现宠物小鸡实例代码

最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有些细节处理的不够好。

先看最终效果图：

接下来是我书写的步骤：

首先是html,分别写出云朵，小鸡的身体，鸡冠，眼睛，嘴巴，腮红，翅膀，鸡爪

接下来是css设置样式：

先设置整体的背景色，使用的是线性渐变linear-gradient，设置蓝天色和草地色，并设置让元素居中。

.content {

width: 100%;

height: 800px;

background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);

display: flex;

justify-content: center;

align-items: center;

}

天上的云：先给一定的宽高和背景色，使用border-radius设置边框圆角效果，只设置左上和右上。效果如下：

border-radius: 100% 100% 0 0;

在使用：：before和：：after伪元素画出一朵完整的云：

.content::before,

.content::after {

content: '';

position: absolute;

bottom: 0;

}

.content::before {

width: 40px;

height: 40px;

background: currentColor;

left: -20px;

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

}

.content::after {

width: 35px;

height: 30px;

background: currentColor;

right: -20px;

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

}

然后使用阴影在画出两朵云