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

2016-05-17 HTML5cn

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

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

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

第一步:头部轮廓

<header></header>

.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;

}

第二步:就算作是头发吧

<header>

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

</header>

.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%;

}

第三步:眼睛

<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;

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;

}

第四步:耳朵

<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){

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

}

第五步:小身体

<div class="body">

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

</div>

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

@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;

}

}

}

第六步:手

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

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

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

.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);

}

第七步:裤子

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

.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%;

}

第八步:腿

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

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

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

至于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;

}

收工

欢迎大家吐槽。

作者:lancer07

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

【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)的更多相关文章

  1. CSS3 transform 属性详解(skew, rotate, translate, scale)

    写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...

  2. CSS进阶内容—浮动和定位详解

    CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...

  3. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  4. 第94天:CSS3 盒模型详解

    CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...

  5. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  6. 《网页设计基础——CSS的四种引入方式详解》

    网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格 ...

  7. 【二次元的CSS】—— 纯CSS3做的能换挡的电扇

    这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的. GitHub传送门:https:// ...

  8. CSS3 中border-image详解

    CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

  9. css控制UL LI 的样式详解

    用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...

随机推荐

  1. iOS之CGPath相关属性(一)

    #ifndef CGPATH_H_ #define CGPATH_H_ForeverGuard博客园 #include <CoreFoundation/CFBase.h> #include ...

  2. Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析

    Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析 今天主要讲述的内容是关于决策树的知识,主要包括以下内容:1.分类及决策树算法介绍2.鸢尾花卉数据集介绍3.决策树实现鸢尾数据集分析.希望这篇 ...

  3. Jeecg-Boot前后端分离,针对敏感数据,加密传递方案

    # 针对敏感数据,加密传递方案 第一步: 在vue页面引入aesEncrypt.js encryption方法.示例代码: import { encryption } from '@/utils/en ...

  4. hibernate抓取策略

    抓取策略(fetching strategy) 是指:当应用程序需要在(Hibernate实体对象图的)关联关系间进行导航的时候, Hibernate如何获取关联对象的策略.抓取策略可以在O/R映射的 ...

  5. Linux CentOS CapsLock 大小写反转问题 解决

    虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:

  6. python 中的 is 方法 总结

    isidentifier: 判断变量名是否合法 iskeyword:是否为内置关键字

  7. DROOLS通过URL访问changset

    package droolsRule; import java.net.Authenticator; import java.net.PasswordAuthentication; import ka ...

  8. 快速傅里叶变换(FFT)学习

    首先,在写这篇博客之前,我还没有完全学会FFT. 先把会的部分打好,加深一下记忆(也可以说是做笔记吧). 初三了,还不会FFT,要退役喽-- 多项式乘法 点开这篇博客之前,你就应该知道,FFT是用来求 ...

  9. svn 设置快捷命令

    # some more svn aliases alias svnset='svn propset svn:externals . -F' alias svnget='svn propget svn: ...

  10. Python-流程控制 if判断

    目录 if 判断 语法 单分支结构 双分支结构 多分支结构 for循环 语法 for + break for + continue for + else range函数 for + if 练习 if ...