HTML+CSS 画出 Batmax 「大白」 ----转载自实验楼的免费项目

最新推荐文章于 2021-06-27 03:24:54 发布
最新推荐文章于 2021-06-27 03:24:54 发布
阅读量351 收藏
点赞数
分类专栏： 前端 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangzhehao97/article/details/80307509
版权

使用HTML+CSS画出大白

附上实验楼正版项目的地址（这个实验是免费的）纯 CSS 打造网页版「大白」

我按照实验说明打的代码:
html文件

<!doctype html>
<!-- Baymax.html -->
<html>
<head>
    <meta charset="utf-8" />
    <title>Baymax</title>
    <link type="text/css"  rel="stylesheet" href="bmcss.css" />
    <style type="text/css">

    </style>
</head>
<body>
    <div id="baymax">
        <!-- head and two eyes and mouth-->
        <div id="head">
            <div id="eye"></div>
            <div id="eye2"></div>
            <div id="mouth"></div>
        </div>

        <!-- body and heart -->
        <div id="torso">
            <div id="heart"></div>
        </div>
        <!-- 定义肚子腹部，包括cover(和躯干的连接处) -->
        <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>

css文件

/*bmcss.css*/
body{
    background: #595959;
}
#baymax{
    /* 设置为居中 */
    margin: 0 auto;

    /* 设置高度 */
    height: 600px;

    /* 隐藏溢出 */
    overflow: hidden;
}
#head {
    height: 64px;
    width: 100px;

    /* 以百分比定义圆角的形状 */
    border-radius: 50%;

    /* 背景 */
    background: #fff;

    margin: 0 auto;
    margin-bottom: -20px;

    /* 设置下边框的样式 */
    border-bottom: 5px solid #e0e0e0;

    /* 属性设置元素的堆砌顺序
       拥有更高堆叠顺序的元素总是会处于堆叠熟悉较低的元素的面前
    */
    z-index: 100;

    /* 生成相对定位的元素 */
    position: relative;
}
#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: 5px solid #e0e0e0;
    border-top: none;
    z-index: 1;
}

#belly {
    height: 300px;
    width: 245px;
    margin-top: -140px;
    z-index: 5px;
}

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

    /* 向边框四周添加阴影效果 */
    box-shadow: 2px 5px 2px #ccc inset;

    right: -115px;
    top: 40px;
    z-index: 111;
    border: 1px solid #ccc;
}

#left-arm,#right-arm {
    height: 270px;
    width: 120px;
    border-radius: 50%;
    background: #fff;
    margin: 0 auto;
    position: relative;
    top: -350px;
    left: -100px;
    transform: rotate(20deg);
    z-index: -1;
}

#right-arm {
    transform: rotate(-20deg);
    left: 100px;
    top: -620px;
}

#l-bigfinger,#r-bigfinger {
    height: 50px;
    width: 20px;
    border-radius: 50px;
    background: #fff;
    position: relative;
    top:250px;
    left: 50px;
    transform: rotate(-50deg);
}

#r-bigfinger {
    left: 50px;
    transform: rotate(50deg);    
}

#l-smallfinger,#r-smallfinger {
    height: 35px;
    width: 15px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    top: 195px;
    left: 66px;
    transform: rotate(-40deg);
}

#r-smallfinger {
    background: #fff;
    transform: rotate(40deg);
    top: 195;
    left: 37px;
}

#left-leg,#right-leg {
    margin: 0 auto;
    height: 170px;
    width: 90px;
    border-radius: 40% 30% 10px 45%;
    background: #fff;
    position: relative;
    top: -640px;
    left: -45px;
    transform: rotate(-1deg);
    z-index: -2px;
}

#right-leg {
    border-radius: 30% 40% 45% 10px;
    top: -810px;
    left: 50px;
    transform: rotate(1deg);
}

最终实现的结果：
通过HTML+CSS实现Baymax的最终结果

注：以上的内容是我转载自实验楼的免费项目，在次分享给大家。这里是我的实验楼的主页。
不喜欢刷题的菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css打造超能陆战队--大白
Summer_water的博客
06-08 2080
超能陆战队–大白<!doctype html> <html> <head> <meta charset="gbk"> <title>超能陆战队--大白</title> <style> body{background: #000c26;} .baymax{margin: 0 auto;height: 600px;overflow: hidden;
纯css3绘图制作萌萌的大白动画特效特效代码
03-20
这是一款基于纯css3绘图制作萌萌的大白动画特效源码。画面中的大白呈现非常逼真的3D立体效果，且眼部可以不时的眨眼，显得很萌很有灵气。该动画效果源码采用纯css3绘制，没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或
纯css画出大白
qq_35181466的博客
06-28 486
废话不多说，直接上代码 <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="" /> <title>nina</title> <style> * { margin: 0; padding: 0;
css打造大白
doraemon_destitute的博客
03-05 238
&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;title&gt;baymax&lt;/title&gt; &lt;/head&gt; &lt;style&gt; body{ background:#595
纯html写的大白
03-31
纯html写的大白,可以参考一些css属性的用法
HTML5和CSS3实现大白绘制
步步心愿的博客
07-17 1305
源代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="{CHARSET}"&gt;         &lt;title&gt;大白设计&lt;/title&gt;         &lt;style&gt;             body {       
大白html源码,html之大白
weixin_35949256的博客
06-27 172
Baymaxbody {background: #595959;}#baymax {/*设置为 居中*/margin: 0 auto;/*高度*/height: 600px;/*隐藏溢出*/overflow: hidden;}#head {height: 64px;width: 100px;/*以百分比定义圆角的形状*/border-radius: 50%;/*背景*/background: #f...
调用自己写的html,用 HTML 和 CSS 来打造一个自己的「大白(●—●)」
weixin_42512276的博客
06-09 130
注：本文转载自实验楼课程【打造网页版「大白」】，转载请注明出处~还记得《超能陆战队》里的 “暖男” -「大白」 么？是不是很想拥有一个？我们就利用 HTML 和 CSS 来打造一个自己的「大白」吧！最终的成果是这样滴，是不是萌萌哒……PS：您最好对 HTML 和 CSS 有一定的了解，但如果你是小白也没关系，小白见「大白」也是可以的！再PS：这个「大白」的教程步骤是基于实验楼环境制作的，你也可以上...
CSS3-小白4（CSS高级技巧）
weixin_45026839的博客
09-07 221
五、CSS高级技巧 2D变形（transform） 1.移动 translate(x,y) translate移动平移的意思 注：translate移动的距离如果是按 % 的话 则不是以父亲的宽度为准，而是以自己的为准 缩放 scale(x,y) 3.旋转 rotate(deg)4.旋转中心点（transform-origin）5.倾斜 skew(deg,deg) 3D变形 1.rotateX() 2.rotateY() 3.rotateZ() 4.透视（perspective） 5.tr
字符画
RobotBing的博客
12-17 1554
在抖音上看到有人把视频转换成字符视频，感觉很有意思，就试着自己做了一下，结果只做出来图片转字符的网页版。视频转字符java代码已经做好了，但是暂时没有时间移植到服务器上。想要做视频的可以在下面留下联系方式，我会联系你。 下面是demo地址，下载按钮只对Firefox 3.5+、Google Chrome、Opera 12+、IE9+、Safari 6+这些浏览器起作用。 Demo地址：http...
纯CSS打造可爱的大白
ICode联盟
05-12 1360
最近大白横行，不会用用自己的程序造个大白，还真不敢说自己是个程序猿。
【二次元的CSS】—— 用 DIV + CSS3 画大白（详解步骤）
weixin_34217711的博客
05-17 202
原本自己也想画大白，正巧看到一位同学（github：https://github.com/shiyiwang）也用相同的方法画了。 且细节相当到位。所以我就fork了一下，在此我也分享一下。同时，我也希望有更多的同学发挥自己的想象力，来找个东西画画。 如果看过我前几次的分享，肯定能马上想到大白的各个部位是怎么实现的。 GitHub传送门...
45个值得收藏的 CSS 形状
艾欢欢的博客
04-30 448
CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。 我们还可以使用 CSS 伪元素中的 ::before 和 ::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个...
html作品实验报告,html网页制作实验报告.docx
weixin_29620579的博客
05-31 3884
《html网页制作实验报告.docx》由会员分享，可在线阅读，更多相关《html网页制作实验报告.docx(4页珍藏版)》请在装配图网上搜索。1、html网页制作实验报告网页制作实验报告实验一：站点设置一、实验目的及要求本实例是通过站点定义为对话框中的高级选项卡创建一个新站点。二、仪器用具1、生均一台多媒体电脑，组建内部局域网，并且接入国际互联网。2、安装windows*p操作系统;建立iis服务...
利用CSS画梯形
热门推荐
丹丹老师的小菜园子
07-30 4万+
首先要知道四个重要的样式: border-buttom:设置下边框 border-top: border-left: border-right: 后面几个猜都猜得出来 ---------友好的分割线-----------------------------------------------------------------------------------------------
CSS砖头盖大楼（一）
高星雨的博客
10-29 325
CSS作用： 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和维护性 层叠样式表，级联样式表，简称;样式表 实现了内容（HTML）与表现（CSS0）的分离 3.CSS与HTML之间的关系 HTML：构建网页结构 CSS： 构建HTML元素样式 4.HTML属性与CSS样式的使用原则 W3C：建议尽量使用CSS样式取代HTML属性 ；colspan属性在CSS中没有方式能够取代...
css绘图（二）：教你用css绘制一个大白！
_小郑有点困了的博客
07-25 363
教你用css绘制一个大白 不用ps，用css就可以绘制一个动漫形象。 如图： 其实很简单，就是一些盒子的堆叠，以及盒子的层级关系。 （本人绘制的稍微有点简陋，见笑） 盒子身体部分代码如下： 对应身体的样式为： body{ background: gray; } .head{ width:200px; height:120px; background: white; margin:0 auto; ...
抖音字符画一键生成以及人物抠图玩玩
一别两宽丶各生欢喜
08-27 1239
others目录会放点工作外闲暇好玩的东西。 现在是周六凌晨2.05时间，最近养成习惯周末总想鼓捣点东西。。。 1、传说中的Ascgen工具，可以根据照片生成相应字符文本或者字符图片格式。 下载地址如下链接自己亲测过的，当然，你也可以网上找下资源，注意病毒！ https://download.csdn.net/download/weixin_39855998/11431...
字符画生成工具
weixin_34413103的博客
01-08 3362
注意：以下工具均不直接支持中文/汉字。 Figlet 终端软件 安装:$ sudo apt install figlet 使用:$ figlet -f big TaceyWong 生成结果如下： 其中big是字体（font），可以在输入figet -f之后进行Tab补全查看默认支持的字体 picascii.com 在线网页工具 地址:http://picascii.com/ glassgiant...
使用CSS画一个萌萌的大白
GGdido的博客
09-27 1755
实验楼的一个项目，画一个萌萌的大白，完全使用css来画，用css3的圆角和阴影就可以达到效果，一起开始吧！ 首先要写一个html文件，定义这个大白的各个结构，然后用css将这些结构渲染表现出来。 hml文件：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bymax</title></he

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值