用html制作一个四叶草
时间: 2024-01-03 22:07:52 浏览: 123
H5 Canvas四叶草背景动画特效
好的,以下是一个简单的HTML代码,可以制作出一个四叶草的形状:
```html
<!DOCTYPE html>
<html>
<head>
<title>四叶草</title>
<style>
.clover {
width: 200px;
height: 200px;
position: relative;
margin: 100px auto;
transform: rotate(45deg);
}
.leaf {
width: 100%;
height: 100%;
background-color: green;
border-radius: 50%;
position: absolute;
}
.leaf.one {
transform: rotate(-45deg);
}
.leaf.two {
transform: rotate(45deg);
}
.leaf.three {
transform: rotate(135deg);
}
.leaf.four {
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div class="clover">
<div class="leaf one"></div>
<div class="leaf two"></div>
<div class="leaf three"></div>
<div class="leaf four"></div>
</div>
</body>
</html>
```
你可以将以上代码保存为 ".html" 文件,然后在浏览器中打开,就可以看到一个四叶草的形状了。希望对你有所帮助!
阅读全文