html+css画一个姜饼人-Toy模板网

这篇具有很好参考价值的文章主要介绍了html+css画一个姜饼人。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

html+css画一个姜饼人

浏览器查看

html+css画一个姜饼人,html,css,前端

如何实现

html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姜饼人</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <div class="wrapper">
        <!-- svg图案 :
            version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间
            stroke 属性定义边框的颜色
            stroke-width 属性定义边框的宽度
            fill 属性定义填充颜色
            <circle> 标签可用来创建一个圆：
             cx 属性定义圆形图像原点坐标的 x 轴坐标
             cy 属性定义圆形图像原点坐标的 y 轴坐标
            <line> 元素用来创建一条直线:
             x1 属性定义直线的起点坐标的 x 坐标
             y1 属性定义直线的起点坐标的 y 坐标
             x2 属性定义直线的结束坐标的 x 坐标
             y2 属性定义直线的结束坐标的 y 坐标
            <rect> 标签可用来创建一个矩形：
             rect 元素的 width 和 height 属性可定义矩形的高度和宽度
             x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
             y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
      
            svg中的元素只会按照生成顺序层叠,后者居上面
        -->
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">
            <!-- 头 -->
            <circle cx="200" cy="50" r="40" stroke="#cd803d" fill="#cd803d" />
            <!-- 左眉毛 -->
            <line x1="180" y1="35" x2="190" y2="35" stroke='#fff' stroke-width='2' />
            <!-- 右眉毛 -->
            <line x1="210" y1="35" x2="220" y2="35" stroke='#fff' stroke-width='2' />
            <!-- 左眼睛 -->
            <circle cx="185" cy="43" r="3" stroke="#fff" fill="#fff" />
            <!-- 右眼睛 -->
            <circle cx="215" cy="43" r="3" stroke="#fff" fill="#fff" />
            <!-- 手 -->
            <rect x="125" y="80" rx="20" ry="20" width="150" height="40" fill="#cd803d" stroke-width="0"
                stroke="#cd803d" />
            <!-- 嘴 -->
            <rect x="188" y="60" rx="3" ry="3" width="24" height="6" fill="#cd803d" stroke-width="2" stroke="#fff" />
            <!-- 纽扣 -->
            <circle cx="200" cy="105" r="5" stroke="#000" fill="#000" />
            <circle cx="200" cy="125" r="5" stroke="#000" fill="#000" />
        </svg>

        <!-- 左脚 -->
        <div class="left"></div>
        <!-- 右脚 -->
        <div class="right"></div>
    </div>
</body>

</html>

css代码

.wrapper {
    /* 相对定位 */
    position: relative;
    /* 包裹svg和左右腿，宽为svg的宽 */
    width: 400px;
}

svg {
    /* svg层级高于左右腿 */
    z-index: 2;
}

.left {
    /* 绝对定位 */
    position: absolute;
    /* 距离父元素顶部120像素 */
    top: 120px;
    /* 距离父元素右边140像素 */
    right: 140px;
    height: 40px;
    width: 150px;
    background-color: #cd803d;
    border-radius: 20px;
    /* 转换：按矩形左上角旋转110度 */
    transform: rotate(110deg);
    /* 层级小于svg */
    z-index: -1;
}

.right {
    /* 绝对定位 */
    position: absolute;
    /* 距离父元素顶部120像素 */
    top: 120px;
    /* 距离父元素左边140像素 */
    left: 140px;
    height: 40px;
    width: 150px;
    background-color: #cd803d;
    border-radius: 20px;
    /* 转换：按矩形左上角旋转70度 */
    transform: rotate(70deg);
    /* 层级小于svg */
    z-index: -1;
}