以下是一个简单的手绘玫瑰花的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文件。然后,你可以在浏览器中打开该文件,就能看到手绘玫瑰花的效果了

生成一个手绘玫瑰花html

原文地址: https://www.cveoy.top/t/topic/hQOH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录