HTML部分：

<body>

        <div id="baymax">

        <!-- 定义头部，包括两个眼睛、嘴 -->

        <div id="head">

            <div id="eye"></div>

            <div id="eye2"></div>

            <div id="mouth"></div>

        </div>

        <!-- 定义躯干，包括心脏 -->

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

css样式：

     <style>

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

     /*生成相对定位的元素*/

     position: relative;

 }

 #eye,

 #eye2 {

     width: 11px;

     height: 13px;

     background: #282828;

     border-radius: 50%;

     position: relative;

     top: 30px;

     left: 27px;

     /*旋转该元素*/

     transform: rotate(8deg);

 /*眼睛的动画*/

     animation:myfirst 5s;

     -moz-animation:myfirst 5s; /* Firefox */

     -webkit-animation:myfirst 5s; /* Safari and Chrome */

      -o-animation:myfirst 5s; /* Opera */

       animation-iteration-count:infinite;/*动画无限的循环*/

 }

 #eye2 {

     /*使其旋转对称*/

     transform: rotate(-8deg);

     left: 69px;

     top: 17px;

     animation:myfirst 5s;

    -moz-animation:myfirst 5s; /* Firefox */

    -webkit-animation:myfirst 5s; /* Safari and Chrome */

     -o-animation:myfirst 5s; /* Opera */

     animation-iteration-count:infinite;

 }

 @keyframes myfirst

 {

 from {background:black;}

 to {background:white;}

 }

 @-moz-keyframes myfirst /* Firefox */

 {

 from {background:black;}

 to {background:white;}

 }

 @-webkit-keyframes myfirst /* Safari and Chrome */

 {

 from {background:black;}

 to {background:white;}

 }

 @-o-keyframes myfirst /* Opera */

 {

 from {background:black;}

 to {background:white;}

 }

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

 }

 #belly {

     height: 300px;

     width: 245px;

     margin-top: -140px;

     z-index:;

 }

 #cover {

     width: 190px;

     background: #fff;

     height: 150px;

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

   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: 50%;

     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: 195px;

     left: 37px;

 }

 #left-leg,

 #right-leg {

     height: 170px;

     width: 90px;

     border-radius: 40% 30% 10px 45%;

     background: #fff;

     position: relative;

     top: -640px;

     left: -45px;

     transform: rotate(-1deg);

     z-index: -2;

     margin: 0 auto;

 }

 #right-leg {

     background: #fff;

     border-radius:30% 40% 45% 10px;

     margin: 0 auto;

     top: -810px;

     left: 50px;

     transform: rotate(1deg);

 }

 </style>

纯CSS打造萌萌哒大白的更多相关文章

  1. 【CSS Demo】纯 CSS 打造 Flow-Steps 导航

    low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三   通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...

  2. Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float，实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写，小写转大写，数字保留，其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform

    Expression构建DataTable to Entity 映射委托   1 namespace Echofool.Utility.Common { 2 using System; 3 using ...

  3. 纯CSS打造银色MacBook Air（完整版）

    上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...

  4. 纯CSS打造可折叠树状菜单

    1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...

  5. 纯CSS打造BiliBili样式博客主题

    前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...

  6. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  7. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  8. 学用纯CSS打造可折叠树状菜单

    随着CSS3的发布,国外研究正如火如荼,但在国内还有很多人抱着IE不支持CSS3的想法,始终无动于衷不肯去学习.但是历史告诉我们,好的东西必将盛行,CSS3也终将也会替代CSS2,下面就和大家分享一个 ...

  9. 纯 css 打造一个小提示 tooltip

    最后编辑:2019/11/26 前 无意间在寻找资料时候,发现一个不错的小提示,查看源码竟然是纯手工 css 编写(文章底部参考链接). 效果 使用的特性 css2 中的 attr 函数,所以现在(2 ...

随机推荐

  1. 还是Go 为了伟大的未来

    今天,还是想讲讲Go 我觉得还没讲够,哈哈哈 其实,是想把框架再清晰些,因为上一篇框架没能引入goroutine(协程),感觉比较遗憾 下边,我就用上goroutine,但这里的协程仅是为了演示,没有 ...

  2. iOS UI布局-定时器

    定时器是比较常用的一个UI控件,在付款.抢购时,经常会使用到.提取成一个通用的方法 /** * 倒计时GCD通用方法 * 通常用的计时器都是用NSTimer,但是NSTimer在线程很吃紧的时候效果不 ...

  3. iOS 开发笔记-加载/初始化

    ViewDidLoad 一般我们会在这里做界面上的初始化操作,比如往view中添加一些子视图.从数据库或者网络加载模型数据装配到子视图中 在自定义控制里 initWithFrame:一般用于添加控件, ...

  4. Solaris 10主机名和IP地址步骤

    1.修改主机名: hostname newname vi /etc/hosts vi /etc/hostname.e1000g0 vi /etc/nodename init 6 #重启 --confi ...

  5. sqli-labs(十)（过滤注释符）

    第二十三关: 这关还是一个GET型.字符串.单引符号.的有报错的sql注入,输入?id=1'  ,页面会报错 我们继续按照之前的套路来,先输入?id=1' or '1'='1 页面正常显示,说明这个地 ...

  6. js区别手机和电脑打开网页

    Navigator对象 首先来了解一下Navigator 对象,Navigator 对象包含有关浏览器的信息,下面的userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代 ...

  7. beego 初体验 - orm - 增删改查

    本文记录一下 beego orm 简单的增删改查,大牛请绕道. 首先,注册4个增删改查的路由: 其次,在 views 文件夹下增加对应的模板(页面): controller 类里写上增删改查的方法: ...

  8. C# Dapper 简单实例

    /// <summary> /// 分页信息 /// </summary> public class PageInfo<T>     {         /// & ...

  9. 水题B

    国际象棋的棋盘是黑白相间的8 * 8的方格,棋子放在格子中间.如下图所示: 王.后.车.象的走子规则如下: 王:横.直.斜都可以走,但每步限走一格. 后:横.直.斜都可以走,每步格数不受限制. 车:横 ...

  10. python windows环境下安装

    下载python安装包,双击安装后, 在cmd中输入python 若无反应, 在cmd设置环境变量 变量 : set PATH=C:\...\...\...[python的编译器的路径]:%PATH% ...