zoukankan      html  css  js  c++  java
  • 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)

    2016-05-17 HTML5cn

    仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的形状,当然也不会使用任何图片哦。那就没意思了。

    有的同学说,用canvas不是能画得更逼真而且更简单吗?这点我也非常赞同,但我的理由还是,那就没意思了。

    这次写的详细一点,把各个部位都拆出来分析。

    第一步:头部轮廓

    <header></header>

    .ultraman header {

      border: 7px solid #000;

      border-top: 15px solid #000;

      200px;

      height: 200px;

      border-radius: 50% 50% 60% 60%;

      position: absolute;

      background: #fff;

    }

    第二步:就算作是头发吧

    <header>

        <div class="hair"></div>        

    </header>

    .ultraman header .hair {

      position: absolute;

      top: -40px;

      left: 80px;

      0;

      height: 0;

      border-left: 20px solid transparent;

      border-right: 20px solid transparent;

      border-top: 140px solid #000;

      border-radius: 30% 30% 50% 50%;

    }

    第三步:眼睛

    <header>

        <div class="hair"></div>

            <div class="left_eye"></div>

            <div class="right_eye"></div>

        </div>

    </header>

    因为我是用less写的嘛,所以先定义了一个眼睛的类,然后再生成2个眼睛

    .eye(@l,@r,@deg){

        border:5px solid #000;

        70px;

        height:70px;

        background:#ffc30a;

        border-radius:@l @r;

        transform:rotate(@deg);

        position:absolute;

        top:60px;

    }

    .left_eye{

        .eye(50%,80%,-15deg);

        left:10px;

    }

    .right_eye{

        .eye(80%,50%,15deg);

        right:10px;

    }

    第四步:耳朵

    <header>

        <div class="hair"></div>

        <div class="left_eye"></div>

        <div class="right_eye"></div>

        <div class="left_ear"></div>

        <div class="right_ear"></div>

    </header>

    .ear(@deg){

        20px;

        height:50px;

        border:5px solid #000;

        position:absolute;

        top:70px;

        z-index:-1;

        transform:rotate(@deg);

        background:#fff;

    }

    .left_ear{

        .ear(-7deg);

        left:-20px

    }

    .right_ear{

        .ear(7deg);

        right:-20px

    }

    第五步:小身体

    <div class="body">

        <div class="light"><span></span></div>

    </div>

    身上有个灯,时间到了,会嘀嘟嘀嘟叫的,所以加一个动画效果

    @keyframes jump{

        0%{

            background:#48e1e7;

        }

        50%{

            background:#961e1e;

        }

        100%{

            background:#48e1e7;

        }

    }

    .body{

            100px;

            height:80px;

            background:#fff;

            border:7px solid #000;

            position:absolute;

            top:180px;

            left:50px;

            border-radius:0 0 20% 20%;

            z-index:-1;

            .light{

                40px;

                height:40px;

                border:3px solid #000;

                position:relative;

                top:20px;

                left:30px;

                background:red;

                transform:rotate(-45deg);

                span{

                    8px;

                    height:8px;

                    border:2px solid #000;

                    background:#48e1e7;

                    display:block;

                    position:absolute;

                    left:3px;

                    top:26px;

                    border-radius:50%;

                    z-index:2;

                    animation:jump 0.5s infinite;

                }

            }

        }

    第六步:手

    <div class="left_hand"></div>

    <div class="right_hand"></div>

    手只要旋转一下就好了,比出一个十字

    .hand{

            30px;

            height:100px;

            border-radius:60% 60% 50% 50%;

            border:7px solid #000;

            position:absolute;

            background:#fff;

        }

        .left_hand{

            .hand;

            top:160px;

            left:30px;

        }

        .right_hand{

            .hand;

            top:160px;

            left:90px;

            transform:rotate(-90deg);

        }

    第七步:裤子

    <div class="trousers"></div>

    .trousers{

        border:7px solid #000;

        position:absolute;

        background:red;

        100px;

        height:45px;

        top:240px;

        left:50px;

        z-index:-2;

        border-radius:0 0 15% 15%;

    }

    第八步:腿

    <div class="left_footer"></div>

    <div class="right_footer"></div>

    <div class="egg"></div>

    至于egg是什么, 我就不赘述了。

    .footer{

            34px;

            height:80px;

            border-radius:50% 50% 60% 60%;

            border:7px solid #000;

            position:absolute;

            background:#fff;

            z-index:-3;

        }

        .left_footer{

            .footer;

            left:46px;

            top:260px;

            transform:rotate(20deg);

        }

        .right_footer{

            .footer;

            right:20px;

            top:270px;

            transform:rotate(-50deg);

        }

        .egg{

            background:#75d8f9;

            18px;

            height: 30px;

            top: 286px;

            left: 97px;

            position: absolute;

            border-radius: 50%;

            border-top:7px solid #000;

        }

    收工

    欢迎大家吐槽。

    作者:lancer07

    原文:https://segmentfault.com/a/1190000005101636

  • 相关阅读:
    Java实现 LeetCode 382 链表随机节点
    Java实现 LeetCode 382 链表随机节点
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 381 O(1) 时间插入、删除和获取随机元素
    Java实现 LeetCode 380 常数时间插入、删除和获取随机元素
    Java实现 LeetCode 380 常数时间插入、删除和获取随机元素
    Linux下的iwpriv(iwlist、iwconfig)的简单应用
    OCX控件的注册卸载,以及判断是否注册
    .OCX、.dll文件注册命令Regsvr32的使用
  • 原文地址:https://www.cnblogs.com/mengruying/p/5504035.html
Copyright © 2011-2022 走看看