html画熊代码,HTML+CSS画一朵向日葵(示例代码)
时间: 2024-01-15 14:03:44 浏览: 28
HTML画熊代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML画熊</title>
<style>
.bear {
width: 200px;
height: 150px;
position: relative;
}
.ear {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #e6b800;
position: absolute;
top: -10px;
}
.left-ear {
left: 30px;
}
.right-ear {
right: 30px;
}
.face {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #e6b800;
position: absolute;
left: 50px;
top: 40px;
}
.eye {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 60px;
}
.left-eye {
left: 60px;
}
.right-eye {
right: 60px;
}
.nose {
width: 20px;
height: 10px;
border-radius: 50%;
background-color: black;
position: absolute;
top: 80px;
left: 90px;
}
.mouth {
width: 40px;
height: 10px;
border-radius: 50%;
border-top: 2px solid black;
position: absolute;
top: 100px;
left: 80px;
}
</style>
</head>
<body>
<div class="bear">
<div class="ear left-ear"></div>
<div class="ear right-ear"></div>
<div class="face">
<div class="eye left-eye"></div>
<div class="eye right-eye"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
</div>
</body>
</html>
```
HTML+CSS画一朵向日葵代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML+CSS画一朵向日葵</title>
<style>
.sunflower {
width: 200px;
height: 200px;
position: relative;
}
.petal {
width: 80px;
height: 25px;
border-radius: 50%;
background-color: #f3af37;
position: absolute;
transform-origin: bottom center;
}
.petal1 {
transform: rotate(-45deg);
}
.petal2 {
transform: rotate(45deg);
}
.petal3 {
transform: rotate(-90deg);
}
.petal4 {
transform: rotate(90deg);
}
.petal5 {
transform: rotate(-135deg);
}
.petal6 {
transform: rotate(135deg);
}
.center {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffea00;
position: absolute;
top: 75px;
left: 75px;
}
.stem {
width: 10px;
height: 100px;
background-color: green;
position: absolute;
top: 150px;
left: 95px;
}
.leaf {
width: 30px;
height: 20px;
border-radius: 50%;
background-color: green;
position: absolute;
top: 200px;
left: 75px;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="sunflower">
<div class="petal petal1"></div>
<div class="petal petal2"></div>
<div class="petal petal3"></div>
<div class="petal petal4"></div>
<div class="petal petal5"></div>
<div class="petal petal6"></div>
<div class="center"></div>
<div class="stem"></div>
<div class="leaf"></div>
</div>
</body>
</html>
```