纯css打造超能陆战队--大白

最新推荐文章于 2021-06-07 18:26:08 发布
最新推荐文章于 2021-06-07 18:26:08 发布
阅读量306 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40452803/article/details/88788457
版权

纯css打造超能陆战队–大白

要点 思路

要把大白分割，整体baymax中包含header（eye1,eye2,mouth），torso（heart），belly（cover），l-bigfinger,r-bigfinger，l-smallfinger，r-smallfinger，l-leg，r-leg。

代码

<!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <style>
           body{background: #595959;}
                #baymax{
                      margin: 0 auto;
                     height: 600px;
                }
                #head{
                     height: 64px;
                width: 100px;
                     background-color: white;
                     border-radius: 50%;
                     margin: 0 auto;
                      margin-bottom: -20px;
                     border-bottom: 5px solid #E0E0E0;
                     z-index: 100;
    /*生成相对定位的元素*/
                   position: relative;
                }
                #eye1{
                     width: 15px;
                     height: 15px;
                     background: black;
                     border-radius: 50%;
                     position: absolute;
                     left: 20px;
                     top: 20px;
                     transform: rotate(8deg);
                }
                #eye2{
                     width: 15px;
                     height: 15px;
                     background: black;
                     border-radius: 50%;
                     position: absolute;
                     transform: rotate(-8deg);
                left: 60px;
                 top: 20px;
                }
                #mouth{
                     width: 40px;
                     height: 2px;
                     background: black;
                     position: absolute;
                     left: 30px;
                     top: 27px;
                     
                }
                #torso,#belly{
                     width: 150px;
                     height: 180px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 45%;
                     border: 5px solid #DCDCDC;
                     border-top: none ;
                     z-index:1;
                }
                
                #belly{
                     width: 200px;
                     height: 240px;
                     margin-top: -145px;
                     position: relative;
                     z-index: 5;
                     }
                #cover{
                     width: 180px;
                     height: 250px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     position: relative;
                    top:-20px ;
                     }
                #heart{
                     width: 20px;
                     height:20px;
                     border-radius: 50%;
                     background: white;
                     border: 1px solid #DCDCDC;
                     box-shadow:2px 5px 2px #ccc inset;
                     margin: 0 auto;
                     z-index: 111;
                     position: relative;
                    right:-40px;
                top:50px;
                     
                }
                #left-arm,#right-arm{
                     width: 80px;
                     height: 220px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(23deg);
                     position: relative;
                     top: -270px;
                     left: -95px;
                }
                #right-arm{
                     transform:rotate(-23deg);
                     position: relative;
                     top: -490px;
                     left: 95px;
                }
                #l-bigfinger{
                     width: 20px;
                     height: 60px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(125deg);
                     position: absolute;
                     top: 190px;
                     left:35px;
                }
                #l-smallfinger{
                width: 15px;
                     height: 40px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(125deg);
                     position: absolute;
                     top: 190px;
                     left:52px; 
                }
                
                #r-smallfinger{
                     width: 15px;
                     height: 40px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(-125deg);
                     position: absolute;
                     top: 190px;
                     left:12px;
                }
                #r-bigfinger{
                     width: 20px;
                     height: 60px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     transform:rotate(-125deg);
                     position: absolute;
                     top: 190px;
                     left:25px;
                }
                #left-leg{
                     width: 75px;
                     height: 150px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     position: relative;
                     left: -40px;
                     top: -500px;
                     border-bottom-right-radius: 15%;
                }
                #right-leg{
                     width: 75px;
                     height: 150px;
                     margin: 0 auto;
                     background: white;
                     border-radius: 47%;
                     position: relative;
                     left: 40px;
                     top: -650px;
                     border-bottom-left-radius: 15%;
                }
                
           </style>
     </head>
     <body>
           <div id="baymax">
           <div id="head">
                <div id="eye1"></div>
                <div id="eye2"></div>
                <div id="mouth"></div>
           </div>
           <div id="torso">
                <div id="heart"></div>
           </div>
           <div id="belly">
                <div id="cover"></div>
           </div>
           <div id="left-arm">
                <div id="l-bigfinger"></div>
                <div id="l-smallfinger"></div>
           </div>
           <div id="right-arm">
                <div id="r-bigfinger"></div>
                <div id="r-smallfinger"></div>
           </div>
           <div id="left-leg"></div>
           <div id="right-leg"></div>
     </div>     
     </body>
</html>

效果图
在这里插入图片描述

注意

  1. 因为大白是白色，所以背景颜色（body）要设为深色。

  2. 大白居中，div居中要用margin：0 auto；

  3. 保险起见overflow：hidden

总结head文件的规范：
1.设置宽高之后以百分比定义圆角的形状 border-radius:50%
2.margin-bottom设为负值，使身体与头部有重叠
3.因为只有设置了position 为relative absolute fixed 后 ，设置z-index才生效。并且z-index是相对于同一父亲元素的所有子元素的层级关系，z-index的值越大，说明他的位置越高。
所以给头部设置position：relative，然后将层级z-index：100
其次写eye1,eye2:
用到旋转对称使左右眼对称，transform：rotate（**deg）与transform：rotate（-**deg）左右对称，左右手臂，左右手指，左右腿都会用到。

Glojish
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css打造超能陆战队--大白
Summer_water的博客
06-08 2120
超能陆战队–大白<!doctype html> <html> <head> <meta charset="gbk"> <title>超能陆战队--大白</title> <style> body{background: #000c26;} .baymax{margin: 0 auto;height: 600px;overflow: hidden;
第六届蓝桥杯大赛个人赛决赛（C/C++大学B组）
weixin_41929941的博客
11-03 947
第六届蓝桥杯大赛个人赛决赛（C/C++大学B组） 第一题 积分之迷（15分） 小明开了个网上商店，卖风铃。共有3个品牌：A，B，C。 为了促销，每件商品都会返固定的积分。 小明开业第一天收到了三笔订单： 第一笔：3个A + 7个B + 1个C，共返积分：315 第二笔：4个A + 10个B + 1个C，共返积分：420 第三笔：A + B + C，共返积分… 你能算出第三笔订单需要返积分多少吗？ 请提交该整数，不要填写任何多余的内容。 答案：105 思路：暴力枚举 解方程不可取 暴力枚举复杂度不高，可
超能陆战队观后感
heiheiwanne的专栏
03-11 1273
The only limitation is imagination. Life never goes we planned.//唯一限制我们的只有想象力，生活从来不会脱离我们的计划。 超级喜欢这句换，唯一的限制只有我们的想象力。影片中Hiro----一个天才少年，创造了科幻的小机器人，却被坏人利用拿来复仇，最终大白Baymax登场拯救了大家，当然也不能少了Hiro的天才大脑。 里面加上了
【2015年第六届蓝桥杯C/C++程序设计本科B组决赛试题】
楚江枫
05-24 784
1.积分之谜3.关联账户4.密文搜索5.居民聚会2.标题：完美正方形如果一些边长互不相同的正方形，可以恰好拼出一个更大的正方形，则称其为完美正方形。历史上，人们花了很久才找到了若干完美正方形。比如：如下边长的22个正方形 2 3 4 6 7 8 12 13 14 15 16 17 18 21 22 23 24 26 27 28 50 60 如【图1.png】那样组合，就是一种解法。此时， 紧贴
2015第六届蓝桥杯国赛决赛c/c++本科B组试题总结及解题答案
我要出家当道士
05-03 1164
积分之迷小明开了个网上商店，卖风铃。共有3个品牌：A，B，C。为了促销，每件商品都会返固定的积分。小明开业第一天收到了三笔订单：第一笔：3个A + 7个B + 1个C，共返积分：315第二笔：4个A + 10个B + 1个C，共返积分：420第三笔：A + B + C，共返积分....你能算出第三笔订单需要返积分多少吗？答案：105#include &lt;stdio.h&gt; int main...
观《超能陆战队》未来的“机器人设计师”的必备装备
天天磨刀
03-21 444
开发十年，就只剩下这套Java开发体系了 &gt;&gt;&gt;    ...
HTML加CSS技术打造超能陆战队的大白.docx
11-22
HTML和CSS是构建网页的基本技术，本教程将指导你如何运用它们来创建一个"超能陆战队"中的标志性角色——大白（Baymax）的形象。首先，了解HTML和CSS的基础知识至关重要。 HTML（HyperText Markup Language）是用于...
纯CSS写的神奇宝贝-伊布.zip
07-03
在本项目中，“纯CSS写的神奇宝贝-伊布.zip”是一个使用纯CSS技术来实现的神奇宝贝伊布的动画效果。这个压缩包可能包含了HTML、CSS和其他相关资源文件，用于展示一个无需JavaScript辅助的动态伊布图形。让我们深入...
optimize-css-assets-webpack-plugin:一个Webpack插件，用于优化\最小化CSS资产
04-28
安装： 使用npm： $ npm install --save-dev optimize-css-assets-webpack-plugin :warning: 对于webpack v3或更低版本，请使用optimize-css-assets-webpack-plugin@3.2.0 。 optimize-css-assets-webpack-plugin@...
nyancss：:rainbow:在编写纯CSS的同时获得CSS-in-JS的好处
02-04
Nyan CSS使您可以编写普通CSS，同时获得CSS-in-JS的好处。 写一个通用的设计系统。 您可以在从静态HTML + CSS开始到React和Vue.js结束的任何地方重用相同的代码，而无需实际更改CSS。 简约的。 受BEM启发的仅包含...
CSS-Tree:纯 CSS 树图
07-04
**CSS-Tree:纯CSS树图** 在网页设计和开发中，可视化数据的展示往往能够提升用户体验，使得信息更容易理解。CSS-Tree项目提供了一种纯CSS实现的树形图，无需JavaScript，仅通过CSS的强大功能就能创建出交互式的层次...
超能陆战队之大白制作过程
IKun_class的博客
07-18 522
效果图如下： 友情提示：本篇文章只是用来熟练掌握css样式和布局能力，空闲时间不妨敲一遍，增加一些体验，我也不算白敲一遍。。 是不是有点心动呢？接下来请看具体步骤： 首先先把HTML部分先写完，做出整体的结构： <!-- 定义肚子腹部 --> <div cl
IBM与麻省理工学院联合建立AI实验室 承诺投资2.4亿美元
ogog123的博客
09-09 298
IBM和麻省理工学院将通过今天宣布的一个新的联合实验室共同努力，对人工智能进行广泛的研究。麻省理工学院IBM沃森AI实验室将重点关注四个研究支柱：开发AI算法，使用物理学来创建AI计算的新硬件，将AI应用于特定行业，以及评估AI如何影响社会。        合作伙伴关系的理念是进行新的人为智能突破的基础研究。虽然这两个组织都有自主的AI研究工作，但IBM和麻省理工学院的研究人员将通过实验室进行
高桥智隆：未来机器人将取代智能手机，并成为人类的朋友
weixin_33805743的博客
03-01 130
高桥智隆的新机器人将融入智能手机的功能，这意味着你可以放弃手机了。 随着21世纪的到来，我们的生活发生了翻天覆地的变化。现在，无时无刻陪伴着我们的是智能手机，与我们面对面的是电脑屏幕……总之，每天低头不见抬头见的是各种智能硬件。不过也许再过一段时间，机器人的普及会让我们的生活更精彩。 需要怎么做，才能让机器人与智能手机一...
2015年第六届蓝桥杯C/C++程序设计本科B组决赛 模型染色(编程大题)
A place to record sth.
05-13 3612
模型染色 在电影《超能陆战队》中，小宏可以使用他的微型机器人组合成各种各样的形状。 现在他用他的微型机器人拼成了一个大玩具给小朋友们玩。为了更加美观，他决定给玩具染色。 小宏的玩具由n个球型的端点和m段连接这些端点之间的边组成。下图给出了一个由5个球型端点和4条边组成的玩具，看上去很像一个分子的球棍模型。 由于小宏的微型机器人很灵活，这些球型端点可以在空间中任意移动，同时连接相邻两个球型端
2015年第六届蓝桥杯国赛B组C++真题汇总
小李的博客
10-31 462
1. 积分之迷 小明开了个网上商店，卖风铃。共有3个品牌：A，B，C。 为了促销，每件商品都会返固定的积分。 小明开业第一天收到了三笔订单： 第一笔：3个A + 7个B + 1个C，共返积分：315 第二笔：4个A + 10个B + 1个C，共返积分：420 第三笔：A + B + C，共返积分… 你能算出第三笔订单需要返积分多少吗？ 2. 完美正方形 如果一些边长互不相同的正方形，可以恰好拼出一个更大的正方形，则称其为完美正方形。 历史上，人们花了很久才找到了若干完美正方形。比如：如下边长的22个正方形
第六届蓝桥杯决赛B组C++题解代码
Neige的博客
05-13 223
第一题 标题：积分之迷 小明开了个网上商店，卖风铃。共有3个品牌：A，B，C。 为了促销，每件商品都会返固定的积分。 小明开业第一天收到了三笔订单： 第一笔：3个A + 7个B + 1个C，共返积分：315 第二笔：4个A + 10个B + 1个C，共返积分：420 第三笔：A + B + C，共返积分… 你能算出第三笔订单需要返积分多少吗？ 请提交该整数，不要填写任何多余的内容。 答案：105 ...
超能陆战队大白html代码,HTML加CSS技术打造超能陆战队的大白
weixin_33806343的博客
06-07 222
一.应用知识点1.2实验知识点div布局CSS相对定位CSS各种属性的应用1.3实验环境本实验环境采用带桌面的Ubuntu Linux环境，实验中可能会用到桌面上的程序：Firefox：浏览器，可以用在需要前端界面的课程里，只需要打开环境里写的HTML/JS页面即可；GVim：非常好用的编辑器，最简单的用法可以参考课程Vim编辑器1.4适合人群本课程难度一般，只要你学过基本的HTML和CSS就能做...
用纯CSS画大白
weixin_30810583的博客
12-28 159
纯CSS打造网页大白知识点： 首先要把大白分割，整体baymax中包含header（eye1,eye2,mouth），torso（heart），belly（cover），l-bigfinger,r-bigfinger，l-smallfinger，r-smallfinger，l-leg，r-leg。 因为大白是白色，所以背景颜色（body）要设为深色。 大白居中，di...
postcss-px-to-viewport限制html的最大宽
最新发布
12-21
postcss-px-to-viewport是一个CSS后置处理器，可以将px单位转换为viewport单位（vw、vh、vmin、vmax）。它可以帮助开发者在不同设备上实现响应式布局。要限制html的最大宽度，可以使用postcss-px-to-viewport的配置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值