经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
纯css3实现宠物小鸡实例代码_css3_CSS
来源：jb51　　时间：2018/10/10 8:47:54　　对本文有异议

最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。所以最近用css3仿写了我每天都照顾的宠物小鸡的模样，第一次写，有些细节处理的不够好。

先看最终效果图：

接下来是我书写的步骤：

首先是html,分别写出云朵，小鸡的身体，鸡冠，眼睛，嘴巴，腮红，翅膀，鸡爪

  1. <body>
  2.     <div class="content">
  3.         <!-- 天上的云 -->
  4.         <div class="cloud">
  5.             <div class="content"></div>
  6.         </div>
  7.         <!--鸡冠-->
  8.         <div class="crest"></div>
  9.         <!--翅膀-->
  10.         <div class="hand"></div>
  11.         <!-- 宠物小鸡body -->
  12.         <div class="egg">
  13.             <!--眼睛-->
  14.             <div class="eye"></div>
  15.             <!--腮红-->
  16.             <div class="blush"></div>
  17.             <!--嘴-->
  18.             <div class="mouth"></div>
  19.             <!--脚-->
  20.             <div class="feet"></div>
  21.         </div>
  22.  
  23.     </div>
  24. </body>

接下来是css设置样式：

先设置整体的背景色，使用的是线性渐变linear-gradient，设置蓝天色和草地色，并设置让元素居中。

  1. .content {
  2.         width: 100%;
  3.         height: 800px;
  4.         background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
  5.         display: flex;
  6.         justify-content: center;
  7.         align-items: center;
  8.         }

天上的云：先给一定的宽高和背景色，使用border-radius设置边框圆角效果，只设置左上和右上。效果如下：

 border-radius: 100% 100% 0 0;

在使用：：before和：：after伪元素画出一朵完整的云：

  1. .content::before,
  2.  .content::after {
  3.                 content: '';
  4.                 position: absolute;
  5.                 bottom: 0;
  6.             }
  7.   .content::before {
  8.                 width: 40px;
  9.                 height: 40px;
  10.                 background: currentColor;
  11.                 left: -20px;
  12.                 border-radius: 100% 100% 0 100%;
  13.             }
  14.    .content::after {
  15.                 width: 35px;
  16.                 height: 30px;
  17.                 background: currentColor;
  18.                 right: -20px;
  19.                 border-radius: 100% 100% 100% 0;
  20.             }

然后使用阴影在画出两朵云

  1. .content,
  2. .content::before,
  3. .content::after {
  4.                 box-shadow: 
  5.                 -200px 50px 0 -5px rgb(191, 232, 252),
  6.                  200px 60px 0 10px rgb(191, 233, 253);
  7.             }

云朵实现了。

接下来是宠物小鸡，先把身体写出来，同样用border-radius设置边框圆角效果，画出鸡蛋的模样，设置背景色，并使用box-shadow设置向内的阴影。

  1. .egg {
  2.             width: 220px;
  3.             height: 260px;
  4.             border-radius: 100%;
  5.             background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
  6.             position: absolute;
  7.             display: flex;
  8.             flex-direction: column;
  9.             align-items: center;
  10.             box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset;
  11. }

鸡冠和云朵的写法差不多

  1. .crest {
  2.             position: relative;
  3.             top: -17%;
  4.             width: 30px;
  5.             height: 25px;
  6.             background: rgb(233, 19, 19);
  7.             border-radius: 50% 100% 20% 20%;
  8.         }
  9.   .crest::before,
  10.   .crest::after {
  11.             content: '';
  12.             position: absolute;
  13.             bottom: 0; 
  14.             width: 20px; 
  15.             background: rgb(233, 19, 19);
  16.         }
  17.   .crest::before {
  18.             left: -5px;
  19.             height: 20px;
  20.             border-radius: 100% 50% 0 20%;
  21.         }
  22.   .crest::after {
  23.             right: -15px;
  24.             height: 15px;
  25.             background: rgb(233, 19, 19);
  26.             border-radius: 20% 200% 20% 30%;
  27.         }

眼睛，翅膀，腮红，分别用伪元素左右定位设置大小即可实现。嘴部使用transform旋转45&deg;并使用线性渐变设置鸡嘴的阴影效果。

全部css代码如下（我安装了sass插件，所以是scss的写法）：

  1. body {
  2.     margin: 0;
  3.     width: 100%;
  4.     height: 100%;
  5.     >.content {
  6.         width: 100%;
  7.         height: 800px;
  8.         background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
  9.         display: flex;
  10.         justify-content: center;
  11.         align-items: center;
  12.         >.cloud {
  13.             position: absolute;
  14.             top: 5%;
  15.             color: rgb(216, 242, 254);
  16.             >.content {
  17.                 width: 50px;
  18.                 height: 50px;
  19.                 background: currentColor;
  20.                 border-radius: 100% 100% 0 0;
  21.             }
  22.             >.content::before,
  23.             >.content::after {
  24.                 content: '';
  25.                 position: absolute;
  26.                 bottom: 0;
  27.             }
  28.             >.content::before {
  29.                 width: 40px;
  30.                 height: 40px;
  31.                 background: currentColor;
  32.                 left: -20px;
  33.                 border-radius: 100% 100% 0 100%;
  34.             }
  35.             >.content::after {
  36.                 width: 35px;
  37.                 height: 30px;
  38.                 background: currentColor;
  39.                 right: -20px;
  40.                 border-radius: 100% 100% 100% 0;
  41.             } 
  42.             >.content,
  43.             .content::before,
  44.             .content::after {
  45.                 box-shadow: -200px 50px 0 -5px rgb(191, 232, 252),
  46.                              200px 60px 0 10px rgb(191, 233, 253);
  47.             }
  48.         }
  49.         >.egg {
  50.             width: 220px;
  51.             height: 260px;
  52.             border-radius: 100%;
  53.             background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
  54.             position: absolute;
  55.             display: flex;
  56.             flex-direction: column;
  57.             align-items: center;
  58.             box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset;
  59.             >.eye::before,
  60.             .eye::after {
  61.                 content: '';
  62.                 position: absolute;
  63.                 top: 15%;
  64.                 width: 12px;
  65.                 height: 28px;
  66.                 border-radius: 100%;
  67.                 background: radial-gradient(white 1px, rgb(57, 56, 57) 5%);
  68.             }
  69.             > .eye::before{
  70.                 left: 28%;
  71.             }
  72.             >.eye::after {
  73.                 right: 28%;
  74.             }
  75.             >.blush::before,
  76.             .blush::after {
  77.                 content: '';
  78.                 position: absolute;
  79.                 top: 30%;
  80.                 width: 25px; 
  81.                 height: 5px;
  82.                 transform: rotate(0deg); 
  83.                 background: rgb(250, 108, 127);
  84.                 border-radius: 100%;
  85.                 box-shadow: 0 0 5px 4px rgb(250, 108, 127);
  86.             }
  87.             >.blush::before {
  88.                 left: 20%;
  89.             }
  90.             >.blush::after {
  91.                 right: 20%;
  92.             }
  93.             >.mouth {
  94.                 position: absolute;
  95.                 top: 32%;
  96.                 width: 20px;
  97.                 height: 20px;
  98.                 background: 
  99.                     linear-gradient(135deg, rgb(255, 207, 0) 50%, 
  100.                     rgb(224, 184, 2) 50%);
  101.                 transform: rotate(45deg);
  102.                 border-radius: 5% 15%;
  103.             }
  104.             > .feet::before,
  105.             .feet::after{
  106.                 content: '';
  107.                 position: absolute; 
  108.                 bottom: -12px;
  109.                 width: 10px;
  110.                 height: 15px;
  111.                 border: 7px solid rgb(71, 49, 20);
  112.             }
  113.             > .feet::before{
  114.                 left: 60px;
  115.                 border-radius: 80% 100% 100% 50%;
  116.                 transform: rotate(-10deg);
  117.                 border-color: transparent  transparent transparent rgb(71, 49, 20);
  118.             }
  119.             > .feet::after{
  120.                 right: 60px;
  121.                 border-radius: 100% 80% 50% 0%;
  122.                 transform: rotate(10deg);
  123.                 border-color: transparent rgb(71, 49, 20) transparent transparent ;
  124.             } 
  125.         }
  126.         >.crest {
  127.             position: relative;
  128.             top: -17%;
  129.             width: 30px;
  130.             height: 25px;
  131.             background: rgb(233, 19, 19);
  132.             border-radius: 50% 100% 20% 20%;
  133.         }
  134.         >.crest::before,
  135.         .crest::after {
  136.             content: '';
  137.             position: absolute;
  138.             bottom: 0; 
  139.             width: 20px; 
  140.             background: rgb(233, 19, 19);
  141.         }
  142.         >.crest::before {
  143.             left: -5px;
  144.             height: 20px;
  145.             border-radius: 100% 50% 0 20%;
  146.         }
  147.         >.crest::after {
  148.             right: -15px;
  149.             height: 15px;
  150.             background: rgb(233, 19, 19);
  151.             border-radius: 20% 200% 20% 30%;
  152.         }
  153.         > .hand{
  154.             position: relative;
  155.             top: -5%;
  156.         }
  157.         > .hand::before,
  158.         .hand::after{
  159.             content: '';
  160.             position: absolute;
  161.         }
  162.         > .hand::before{
  163.             left:-135px;
  164.             width: 20px;
  165.             height: 80px;
  166.             transform: rotate(15deg);
  167.             background: rgb(250, 242, 242);
  168.             border-radius: 100% 0 50% 50%;
  169.         }
  170.         > .hand::after{
  171.             right: -110px;
  172.             width: 20px;
  173.             height: 80px;
  174.             transform: rotate(-15deg);
  175.             background: rgb(250,242,242);
  176.             border-radius: 50% 100% 50% 50%;
  177.         }
  178.     }
  179. }

总结

以上所述是小编给大家介绍的纯css3实现宠物小鸡实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对w3xue网站的支持！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号