阅读 25

最近牙签很火,那就画个牙签吧

最近大家对某凡品牌的牙签很感兴趣!

我们也来画一个牙签吧!

画牙签

牙签这样画,只需要建个长方形,然后用border-radius切成针

//样式
<style>
    .wyf {
        background: #ffd993;
        height: 200px;
        width: 4px;
        border-radius: 50% 50% 0 0;
        margin: auto;
        position: relative;
        z-index: 3;
        box-shadow: 0px 1px 1px 0px #000;
    }
</style>

<!-- 针 -->
<div class="wyf"></div>
复制代码

这样牙签就画好了!!!

image.png

为了生动点!!!我们加个手握着的样子

建一只小手!!!

<style>
    .hand {
        width: 150px;
        margin: auto;
        transform: rotate(312deg);
        padding-left: 150px;
    }

    .finger {
        background: #fff;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border:2px solid #ccc;
        position: relative;
        z-index: 2;
    }

    .arm {
        background: #fff;
        width: 150px;
        height: 200px;
        border-radius: 80% 80% 0 0;
        border: 2px solid #ccc;
        position: relative;
        margin-top: -50px;
        border-bottom: none;
    }
</style>

<!-- 手臂 -->
<div class="hand">
    <div class="finger"></div>
    <div class="arm"></div>
</div>
复制代码

然后就出现手臂了!!!

image.png

牙签和手臂合起来!!!

image.png

全部代码:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>牙签</title>
    <style>
        .wyf {
            background: #ffd993;
            height: 200px;
            width: 4px;
            border-radius: 50% 50% 0 0;
            margin: auto;
            position: relative;
            z-index: 3;
            box-shadow: 0px 1px 1px 0px #000;
        }

        .hand {
            width: 150px;
            margin: auto;
            transform: rotate(312deg);
            padding-left: 150px;
        }

        .finger {
            background: #fff;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            border:2px solid #ccc;
            position: relative;
            z-index: 2;
        }

        .arm {
            background: #fff;
            width: 150px;
            height: 200px;
            border-radius: 80% 80% 0 0;
            border: 2px solid #ccc;
            position: relative;
            margin-top: -50px;
            border-bottom: none;
        }
    </style>
</head>

<body>
    <!-- 针 -->
    <div class="wyf"></div>
    <!-- 手臂 -->
    <div class="hand">
        <div class="finger"></div>
        <div class="arm"></div>
    </div>
</body>

</html>
复制代码

某凡牙签,如此嚣张!!! 微信图片_20210607203456.png

文章分类
前端
文章标签