超能陆战队之大白制作过程
效果图如下:
友情提示:本篇文章只是用来熟练掌握css样式和布局能力,空闲时间不妨敲一遍,增加一些体验,我也不算白敲一遍。。
是不是有点心动呢?接下来请看具体步骤:
首先先把HTML部分先写完,做出整体的结构:
<!-- 定义肚子腹部 --><div class="belly"><div class="cover"></div></div><!-- 定义左臂 包括一大一小两个手指 --><div class="left_arm"><div class="l_bigFinger"></div><div class="l_smallFinger"></div></div><!-- 定义右臂 包括一大一小两个手指 --><div class="right_arm"><div class="r_bigFinger"></div><div class="r_smallFinger"></div></div><!-- 定义左腿 --><div class="left_leg"></div><!-- 定义右腿 --><div class="right_leg"></div>
</div>
为了是效果更加明显,我们把最外面的盒子背景设为灰色,并且让整个盒子居中:
body {
background: #595959;
}
.baymax {
margin: 0 auto;
height: 600px;
}
如图:
这一步就不如图了吧。。
然后再写具体的css样式,先写头部样式:
.head {
width: 100px;
height: 64px;
border-radius: 50%;
background: #fff;
margin: 0 auto;
margin-bottom: -20px;
}
.eye, .eye2 {
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/* 旋转改元素 */
transform: rotate(8deg);
}
.eye2 {
/* 使旋转对称 */
transform: rotate(-8deg);
left: 69px;
top: 17px;
}
.mouth{
width:38px;
height:1.5px;
background:#282828;
position:relative;
left:34px;
top:10px;
}
看图:
我们已经实现了一个头部,是不是有点样子了呢,哈哈,我们继续
接下来是它的一个躯干和腹部:
.torso,.belly{
margin:0 auto;
height:200px;
width:180px;
background:#fff;
border-radius:47%;
/* 设置边框 */
border-radius:5px solid #e0e0e0;
border-top:none;
z-index: 1;
}
.belly{
height:300px;
width:245px;
margin-top:-140px;
z-index: 5;
}
.cover{
width:190px;
height:150px;
background:#fff;
margin:0 auto;
position:relative;
top:-20px;
border-radius:50%;
}
就会是这样一个效果:
是不是还得来一颗小心脏呢?安排
.heart{
width:25px;
height:25px;
border-radius:50%;
position:relative;
top:40px;
right:-115px;
}
.heart::before,.heart::after{
content:"";
width:20px;
height:40px;
background:red;
position:absolute;
z-index:10;
border-radius: 50px 50px 0px 0px;
}
.heart::after{
left:14px;
transform: rotate(45deg);
}
.heart::before{
transform:rotate(-45deg);
box-shadow: -5px -5px 10px gray;
}
心脏也出来啦!
然后就该做手臂了
.left_arm,.right_arm{
width:120px;
height:270px;
border-radius:50%;
background:#fff;
margin:0 auto;
position:relative;
top:-350px;
left:-100px;
transform: rotate(20deg);
}
.right_arm{
transform: rotate(-20deg);
left:100px;
top:-620px;
}
.l_bigFinger,.r_bigFinger{
width:20px;
height:50px;
border-radius: 50%;
background:#fff;
position: relative;
top:250px;
left:50px;
transform:rotate(-50deg);
}
.r_bigFinger{
left:50px;
transform: rotate(50deg);
}
.l_smallFinger,.r_smallFinger{
width:15px;
height:35px;
border-radius:50%;
background:#fff;
position:relative;
top:195px;
left:66px;
transform: rotate(-40deg);
}
.r_smallFinger{
transform:rotate(40deg);
top:195px;
left:37px;
}
小爪子也出来啦!!
那最后一步就是它的leg了~~
.left_leg,.right_leg{
width:90px;
height:170px;
border-radius:40% 30% 10px 45%;
background:#fff;
position: relative;
top:-640px;
left:-45px;
margin:0 auto;
transform: rotate(-1deg);
}
.right_leg{
background:#fff;
border-radius:30% 40% 45% 10px;
margin:0 auto;
top:-810px;
left:50px;
transform:rotate(1deg);
}
好了,一只完整的大白已经站在你面前了!
如果想让它眨眼睛的话,可以这样
@keyframes blink {
40% {
transform: rotateX(80deg);
}
}
//回到眼睛样式
.eye, .eye2 {
width: 11px;
height: 13px;
background: #282828;
border-radius: 50%;
position: relative;
top: 30px;
left: 27px;
/* 旋转改元素 /
transform: rotate(8deg);
/ 在这里加一个动画效果 /
/ 添加动画使眼睛动起来 可设置时间 */
animation:blink 2s ease-in-out infinite alternate;
}
今天的分享会就到这儿了,拜拜~~
超能陆战队之大白制作过程相关推荐
- (转载)连连看游戏外挂详细制作过程
标 题: [原创]新人入手第一个游戏外挂,附上详细制作过程 作 者: caigui 时 间: 2013-01-09,00:56:16 链 接: http://bbs.pediy.com/showthr ...
- Js黑客帝国效果 文字下落 制作过程和思路
效果预览: http://jsfiddle.net/dtdxrk/m8R6b/embedded/result/ Js黑客帝国效果 文字向下落制作过程和思路 1.css控制文字竖显示 2.动态添加div ...
- Ireport制作过程
Ireport制作过程 1.首先要到Option下设置一下ClassPath添加文件夹 2.到预览->报表字段设置一下将要用到的字段 3.到编辑->查询报表->写sql语句,然后把语 ...
- 简易数字时钟软件详细制作过程
这是我自己用VS2010制作的简易数字时钟小软件,在制作过程中收获知识不少,希望和初学MFC编程的朋友分享一下. 一.其功能有一下三点: 1.打开软件后,其程序自动获取当前电脑系统的日期.时间和周次, ...
- 通过WiFi控制智能小车机器人制作过程详解
之前发的作品都是基于蓝牙控制的智能小车机器人,由于蓝牙的传输范围比较小,所以控制距离的局限性比较大,并且通过蓝牙传输视频会明显出现卡屏的现象. 而通过WiFi方式控制智能小车机器人能达到100米左右的 ...
- rpt水晶报表制作过程
原文:rpt水晶报表制作过程 最近公司安排一个以前的项目,里面需要用到水晶报表,由于原来做这个项目的同事离职,所在公司的同事报表做成了rdlc类型的,而这类报表在加载的时候很难动态的从数据库加载数据, ...
- 电路制版工作笔记001---印刷电路板的制作过程
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 下面这个是比较严格的过程,四层板的制作流程: PCB 印刷电路板的制作过程 我们来看一下印刷电路板 ...
- 手工制作机器人用彩泥_印度神奇芒果干制作过程,看一遍顶三遍,游客:不会再吃了...
印度神奇芒果干制作过程,看一遍顶三遍,游客:不会再吃了 随着我国经济迅速发展,人们生活水平得到了很大提升,物质消费得到满足以后,人们更注重精神需求,希望通过旅游要开放视野,放松心情,让自己体验不同地域 ...
- graphpad做饼图_走进隆江糖饼老店,探秘绿豆饼制作过程
◆ 绿豆饼,是最常见的饼类茶配之一,以惠来隆江的最为出名. ◆ 隆江绿豆饼制作工序颇为考究:制馅➱和面➱包馅➱烙烤➱包装. 01从茶配说起 潮汕人与茶,有解不开的情结,杯起杯落之间,品味生活百态.喝茶 ...
最新文章
- 《大规模Scrum:More with LeSS》访谈
- 几种常见窗函数及其MATLAB程序实现
- php生成首页 教程,简单静态页生成 过程_PHP教程
- 《需求设计:构建用户想要和需要的产品》——第1章 情境驱动设计入门1.1 对需求进行设计...
- 2015-10-15 css3
- sqoop1.4.6导出oracle实例
- LINQ学习笔记(9) LINQ to Objects---查询内存中对象的集合
- 99岁杨振宁寄语青年学子:要清楚方向、选对方向
- linux 系统忘记数据库root密码
- 高通android7.0模块编译.ko
- 10个不太为人所知的,但实用的PHP函数(转)
- base64的原理及优缺点
- webservice 测试地址 汇总
- 2020,网络安全领域有什么新趋势
- html5扁平化设计库,5个大气漂亮的扁平化设计网站赏析|HTML5酷站
- pg_repack 处理表和索引的膨胀
- 用python或者vba把一个excel表格拆分成多个excel表格
- 推荐算法工程师面试准备
- Mac下的终端(terminal)常用命令
- el-input 不能输入的解决办法
热门文章
- 【文章阅读】The Devil is in the Decoder【计算机视觉中的上采样方式-6种】
- 调用摄像头拍照和选择相册
- React报错之React hook ‘useState‘ cannot be called in a class component
- 用单链表的方式实现集合的基本运算(数据结构C语言版)
- android手机车载投屏,手机车载投屏的方法安卓、苹果的都有
- 64. Minimum Path Sum 路径最小总和
- 迹美 java_三款图像处理软件人像美容效果大比拼
- poj2942 圆桌骑士
- 详解RS232、RS485、RS485、串口握手
- 苹果cmsv10仿9080YY电影网站红色大气响应式免费模板