【CSS艺术】性感大鹅，在线教学：汉堡从0到1

开发调优
,
24

我开KFC的能卖你生堡蛋子~

1 个赞
25

我就说在这里能学到真东西 :rofl:

1 个赞
26

现学现卖，还得进化

1 个赞
27

一起学习 cpc

1 个赞
28

太酷啦

1 个赞
29

不酷就要被端上餐桌啦 1f641-new

2 个赞
30

image
image1062×1122 26.4 KB

呐，吸铁石 :tieba_006:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>汉堡包</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            height: 100vh;
            display: grid;
            place-items: center;
            background: #ffffe1;
        }

        /* 主体 */
        div {
            height: 80px;
            width: 200px;
            /* 上半部分 */
            background-image: linear-gradient(to bottom, #d66425, #fbc34c);
            border-radius: 50px 50px 20% 20%;
            /* 下半部分 */
            box-shadow:
                0 5px #ffdf3f, 0 10px #e1432a,
                -40px 40px 0 -35px #e1432a, 40px 40px 0 -35px #e1432a,
                0 25px #532702, 0 35px #81a833, 0 55px #db6528;
            position: relative;
            scale: 1.4;
        }

        /* 溢出奶黄 */
        div::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 80px;
            left: 40px;
            border-top: 15px solid #ffdf3f;
            border-left: 100px solid transparent;
            border-right: 50px solid transparent;
        }

        /* 芝麻与菜叶 */
        div::after {
            --g: #81a833;
            content: '';
            width: 15px;
            height: 15px;
            position: absolute;
            top: 105px;
            left: 10px;
            color: #feed94;
            background-color: var(--g);
            border-radius: 100% 3px 100% 3px;
            box-shadow:
                5px 1px #d66425, 15px 1px var(--g),
                25px 1px 0 -1px var(--g), 25px 0 #d66425,
                65px 3px 0 -1px var(--g), 160px -1px 0 -1px var(--g),
                162px -3px 0 -1px #d66425, 170px -5px 0 2px var(--g),
                4px -105px 0 -5px, 20px -103px 0 -5px,
                28px -108px 0 -5px, 12px -90px 0 -5px,
                38px -105px 0 -5px, 58px -95px 0 -5px,
                70px -98px 0 -6px, 75px -105px 0 -6px,
                80px -102px 0 -5px, 100px -105px 0 -5px,
                110px -105px 0 -5px, 100px -100px 0 -5px,
                120px -95px 0 -6px, 88px -88px 0 -5px;
            transform: skewX(-10deg)
        }


        div .magnet {
            content: '';
            position: absolute;
            width: 80px;
            height: 40px;
            background-color: #c0c0c0;
            bottom: -70px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px 10px 0 0;
            box-shadow: 
                inset -2px -2px 5px rgba(0,0,0,0.3),
                inset 2px 2px 5px rgba(255,255,255,0.3);
        }


        div .magnet::before,
        div .magnet::after {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            bottom: 0;
        }

        div .magnet::before {
            left: 0;
            background-color: #ff0000;
            border-radius: 10px 0 0 0;
        }

        div .magnet::after {
            right: 0;
            background-color: #0000ff;
            border-radius: 0 10px 0 0;
        }

        div .magnet span {
            position: absolute;
            bottom: 5px;
            color: white;
            font-weight: bold;
            font-size: 20px;
        }

        div .magnet span:first-child {
            left: 15px;
        }

        div .magnet span:last-child {
            right: 15px;
        }
    </style>
</head>
<body>
    <div>
        <span class="magnet">
            <span>N</span>
            <span>S</span>
        </span>
    </div>
</body>
</html>
2 个赞
31

实践派 tieba13

1 个赞
32

没有鸡腿、可乐，我不是很认可呀

1 个赞
33

可以的,楼主牛逼

1 个赞
34

大鹅只偷到了汉堡配方，我再努力努力 cpc

1 个赞
35

前来捉大鹅！

1 个赞
36

捕捉WIKI佬！

1 个赞
37

我有一个大胆的想法

1 个赞
38

:partying_face:可恶，摸鱼的时候居然还能学习

1 个赞
39

鹅佬！性感大鹅，在线教学！ :tieba_001:

1 个赞
40

在摸鱼中学习，一举两得，岂不美哉！ tieba87

1 个赞
41

不行，不可以，达咩 1f611

1 个赞
42

太强了 佬

1 个赞
43

你更强

1 个赞