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

mayaohua 发布于2019-08-30 13:00 / 3424人阅读

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽

仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。
有的同学说，用canvas不是能画得更逼真而且更简单吗？这点我也非常赞同，但我的理由还是，那就没意思了。

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

GitHub传送门：https://github.com/lancer07/css3Ultraman

第一步：头部轮廓

.ultraman header {
  border: 7px solid #000;
  border-top: 15px solid #000;
  width: 200px;
  height: 200px;
  border-radius: 50% 50% 60% 60%;
  position: absolute;
  background: #fff;
}

第二步：就算作是头发吧

.ultraman header .hair {
  position: absolute;
  top: -40px;
  left: 80px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 140px solid #000;
  border-radius: 30% 30% 50% 50%;
}

第三步：眼睛

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

.eye(@l,@r,@deg){
    border:5px solid #000;
    width: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;
}

第四步：耳朵

.ear(@deg){
    width: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
}

第五步：小身体

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

@keyframes jump{
    0%{
        background:#48e1e7;
    }
    50%{
        background:#961e1e;
    }
    100%{
        background:#48e1e7;
    }
}

.body{
        width: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{
            width:40px;
            height:40px;
            border:3px solid #000;
            position:relative;
            top:20px;
            left:30px;
            background:red;
            transform:rotate(-45deg);
            span{
                width: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;
            }
        }
    }

第六步：手

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

.hand{
        width: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);
    }

第七步：裤子

.trousers{
    border:7px solid #000;
    position:absolute;
    background:red;
    width:100px;
    height:45px;
    top:240px;
    left:50px;
    z-index:-2;
    border-radius:0 0 15% 15%;
}

第八步：腿

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

.footer{
        width: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;
        width: 18px;
        height: 30px;
        top: 286px;
        left: 97px;
        position: absolute;
        border-radius: 50%;
        border-top:7px solid #000;
    }

收工

欢迎大家吐槽

私有云云服务器二次元api 二次元网站上云服务器 css3 css3气泡

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115236.html

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

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

Codeing_ls 2019-08-02 15:54 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

摘要：仅仅使用作为身体的布局，用的各种和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。有的同学说，用不是能画得更逼真而且更简单吗这点我也非常赞同，但我的理由还是，那就没意思了。这次写的详细一点，把各个部位都拆出来分析。收工欢迎大家吐槽仅仅使用div作为身体的布局，用css3的各种transform和圆角属性来绘制各部位的形状，当然也不会使用任何图片哦。那就没意思了。有的同学说，用c...

Youngs 2019-08-05 17:47 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

摘要：原本自己也想画大白，正巧看到一位同学也用相同的方法画了。且细节相当到位。同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。原本自己也想画大白，正巧看到一位同学（github：https://github.com/shiyiwang）也用相同的方法画了。且细节相当到位。所以我就fork了一下，在此我也分享一下...

Towers 2019-08-05 17:48 评论0 收藏0
【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）

摘要：原本自己也想画大白，正巧看到一位同学也用相同的方法画了。且细节相当到位。同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。原本自己也想画大白，正巧看到一位同学（github：https://github.com/shiyiwang）也用相同的方法画了。且细节相当到位。所以我就fork了一下，在此我也分享一下...

littleGrow 2019-08-02 15:54 评论0 收藏0