【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)
【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人(详解步骤)
仅仅使用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 画咸蛋超人(详解步骤)的更多相关文章
- CSS3 transform 属性详解(skew, rotate, translate, scale)
写这篇文章是因为在一个前端QQ群里,网友 "小豆豆" (应他要求要出现他的网名......) ,问skew的角度怎么算,因为他看了很多文章还是不能理解skew的原理.于是,我觉得有 ...
- CSS进阶内容—浮动和定位详解
CSS进阶内容-浮动和定位详解 我们在学习了CSS的基本知识和盒子之后,就该了解一下网页的整体构成了 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS的三种布 ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 第94天:CSS3 盒模型详解
CSS3盒模型详解 盒模型设定为border-box时 width = border + padding + content 盒模型设定为content-box时 width = content所谓定 ...
- CSS3属性transform详解【转载】
CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate) 在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- 【二次元的CSS】—— 纯CSS3做的能换挡的电扇
这次分享的电扇,和以往用css3画人物相比 多加了一点交互,就是电扇开关的地方,用到了一点点css3的 :checked +div 这个很少用到的选择器来实现的. GitHub传送门:https:// ...
- CSS3 中border-image详解
CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
随机推荐
- iOS之CGPath相关属性(一)
#ifndef CGPATH_H_ #define CGPATH_H_ForeverGuard博客园 #include <CoreFoundation/CFBase.h> #include ...
- Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析
Python数据挖掘之决策树DTC数据分析及鸢尾数据集分析 今天主要讲述的内容是关于决策树的知识,主要包括以下内容:1.分类及决策树算法介绍2.鸢尾花卉数据集介绍3.决策树实现鸢尾数据集分析.希望这篇 ...
- Jeecg-Boot前后端分离,针对敏感数据,加密传递方案
# 针对敏感数据,加密传递方案 第一步: 在vue页面引入aesEncrypt.js encryption方法.示例代码: import { encryption } from '@/utils/en ...
- hibernate抓取策略
抓取策略(fetching strategy) 是指:当应用程序需要在(Hibernate实体对象图的)关联关系间进行导航的时候, Hibernate如何获取关联对象的策略.抓取策略可以在O/R映射的 ...
- Linux CentOS CapsLock 大小写反转问题 解决
虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:
- python 中的 is 方法 总结
isidentifier: 判断变量名是否合法 iskeyword:是否为内置关键字
- DROOLS通过URL访问changset
package droolsRule; import java.net.Authenticator; import java.net.PasswordAuthentication; import ka ...
- 快速傅里叶变换(FFT)学习
首先,在写这篇博客之前,我还没有完全学会FFT. 先把会的部分打好,加深一下记忆(也可以说是做笔记吧). 初三了,还不会FFT,要退役喽-- 多项式乘法 点开这篇博客之前,你就应该知道,FFT是用来求 ...
- svn 设置快捷命令
# some more svn aliases alias svnset='svn propset svn:externals . -F' alias svnget='svn propget svn: ...
- Python-流程控制 if判断
目录 if 判断 语法 单分支结构 双分支结构 多分支结构 for循环 语法 for + break for + continue for + else range函数 for + if 练习 if ...