使用css3实现一个大象图形
时间: 2023-07-20 21:03:29 浏览: 118
可以使用CSS3中的伪元素和变形来实现一个大象图形。以下是一个简单的示例代码:
```
.elephant {
position: relative;
width: 200px;
height: 150px;
background-color: #ccc;
}
.elephant:before {
content: "";
position: absolute;
top: 0;
left: 30%;
width: 40%;
height: 60%;
background-color: #ccc;
border-radius: 50% 50% 0 0;
transform: skewX(-20deg);
}
.elephant:after {
content: "";
position: absolute;
bottom: 0;
left: 30%;
width: 40%;
height: 60%;
background-color: #ccc;
border-radius: 0 0 50% 50%;
transform: skewX(20deg);
}
.elephant .trunk {
position: absolute;
bottom: 30%;
left: 0;
width: 30%;
height: 40%;
background-color: #ccc;
border-radius: 50% 50% 0 0;
transform-origin: bottom center;
transform: skewX(-20deg) rotate(30deg);
}
.elephant .ear {
position: absolute;
top: 20%;
right: 0;
width: 20%;
height: 20%;
background-color: #ccc;
border-radius: 50%;
transform: skewY(-15deg);
}
.elephant .eye {
position: absolute;
top: 30%;
right: 0;
width: 10%;
height: 10%;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
```
在HTML中,可以这样使用:
```
<div class="elephant">
<div class="trunk"></div>
<div class="ear"></div>
<div class="eye"></div>
</div>
```
这段代码会生成一个灰色的大象形状,并且有一个带有斜角的鼻子、两只耳朵和一只眼睛。你可以根据自己的需求和喜好调整和改变CSS属性,来创建出更加个性化的大象图形。
阅读全文