生成一个手绘玫瑰花html
以下是一个简单的手绘玫瑰花的HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Hand-drawn Rose</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.rose {
width: 200px;
height: 200px;
position: relative;
}
.rose:before,
.rose:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: #ff1f44;
}
.rose:before {
width: 100px;
height: 100px;
background-color: #ff4f7d;
}
.rose:after {
width: 60px;
height: 60px;
background-color: #ff8099;
}
.leaf {
position: absolute;
width: 80px;
height: 160px;
background-color: #3d941e;
transform-origin: bottom center;
}
.leaf.left {
transform: translate(-40px, -50%) rotate(-45deg);
}
.leaf.right {
transform: translate(40px, -50%) rotate(45deg);
}
.stem {
position: absolute;
width: 20px;
height: 80px;
background-color: #3d941e;
top: 100px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="rose">
<div class="leaf left"></div>
<div class="leaf right"></div>
<div class="stem"></div>
</div>
</body>
</html>
你可以将上述代码复制到一个空白的HTML文件中,并将其保存为.html文件。然后,你可以在浏览器中打开该文件,就能看到手绘玫瑰花的效果了
原文地址: https://www.cveoy.top/t/topic/hQOH 著作权归作者所有。请勿转载和采集!