首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

纯css3实现宠物小鸡实例代码

Posted in HTML / CSS onOctober 08, 2018

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

先看最终效果图：

纯css3实现宠物小鸡实例代码

接下来是我书写的步骤：

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

<body>
    <div class="content">
        <!-- 天上的云 -->
        <div class="cloud">
            <div class="content"></div>
        </div>
        <!--鸡冠-->
        <div class="crest"></div>
        <!--翅膀-->
        <div class="hand"></div>
        <!-- 宠物小鸡body -->
        <div class="egg">
            <!--眼睛-->
            <div class="eye"></div>
            <!--腮红-->
            <div class="blush"></div>
            <!--嘴-->
            <div class="mouth"></div>
            <!--脚-->
            <div class="feet"></div>
        </div>

    </div>
</body>

接下来是css设置样式：

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

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

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

 border-radius: 100% 100% 0 0;

纯css3实现宠物小鸡实例代码

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

.content::before,
 .content::after {
                content: '';
                position: absolute;
                bottom: 0;
            }
  .content::before {
                width: 40px;
                height: 40px;
                background: currentColor;
                left: -20px;
                border-radius: 100% 100% 0 100%;
            }
   .content::after {
                width: 35px;
                height: 30px;
                background: currentColor;
                right: -20px;
                border-radius: 100% 100% 100% 0;
            }

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

纯css3实现宠物小鸡实例代码

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

纯css3实现宠物小鸡实例代码

云朵实现了。

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

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

纯css3实现宠物小鸡实例代码

鸡冠和云朵的写法差不多

.crest {
            position: relative;
            top: -17%;
            width: 30px;
            height: 25px;
            background: rgb(233, 19, 19);
            border-radius: 50% 100% 20% 20%;
        }
  .crest::before,
  .crest::after {
            content: '';
            position: absolute;
            bottom: 0; 
            width: 20px; 
            background: rgb(233, 19, 19);
        }
  .crest::before {
            left: -5px;
            height: 20px;
            border-radius: 100% 50% 0 20%;
        }
  .crest::after {
            right: -15px;
            height: 15px;
            background: rgb(233, 19, 19);
            border-radius: 20% 200% 20% 30%;
        }

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

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

body {
    margin: 0;
    width: 100%;
    height: 100%;
    >.content {
        width: 100%;
        height: 800px;
        background: linear-gradient(rgb(170, 227, 253) 60%, rgb(149, 219, 126) 80px);
        display: flex;
        justify-content: center;
        align-items: center;
        >.cloud {
            position: absolute;
            top: 5%;
            color: rgb(216, 242, 254);
            >.content {
                width: 50px;
                height: 50px;
                background: currentColor;
                border-radius: 100% 100% 0 0;
            }
            >.content::before,
            >.content::after {
                content: '';
                position: absolute;
                bottom: 0;
            }
            >.content::before {
                width: 40px;
                height: 40px;
                background: currentColor;
                left: -20px;
                border-radius: 100% 100% 0 100%;
            }
            >.content::after {
                width: 35px;
                height: 30px;
                background: currentColor;
                right: -20px;
                border-radius: 100% 100% 100% 0;
            } 
            >.content,
            .content::before,
            .content::after {
                box-shadow: -200px 50px 0 -5px rgb(191, 232, 252),
                             200px 60px 0 10px rgb(191, 233, 253);
            }
        }
        >.egg {
            width: 220px;
            height: 260px;
            border-radius: 100%;
            background: linear-gradient(rgb(254, 249, 249) 60%,rgb(221, 213, 213));
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 -10px 10px 3px rgba(211, 194, 194,0.4) inset;
            >.eye::before,
            .eye::after {
                content: '';
                position: absolute;
                top: 15%;
                width: 12px;
                height: 28px;
                border-radius: 100%;
                background: radial-gradient(white 1px, rgb(57, 56, 57) 5%);
            }
            > .eye::before{
                left: 28%;
            }
            >.eye::after {
                right: 28%;
            }
            >.blush::before,
            .blush::after {
                content: '';
                position: absolute;
                top: 30%;
                width: 25px; 
                height: 5px;
                transform: rotate(0deg); 
                background: rgb(250, 108, 127);
                border-radius: 100%;
                box-shadow: 0 0 5px 4px rgb(250, 108, 127);
            }
            >.blush::before {
                left: 20%;
            }
            >.blush::after {
                right: 20%;
            }
            >.mouth {
                position: absolute;
                top: 32%;
                width: 20px;
                height: 20px;
                background: 
                    linear-gradient(135deg, rgb(255, 207, 0) 50%, 
                    rgb(224, 184, 2) 50%);
                transform: rotate(45deg);
                border-radius: 5% 15%;
            }
            > .feet::before,
            .feet::after{
                content: '';
                position: absolute; 
                bottom: -12px;
                width: 10px;
                height: 15px;
                border: 7px solid rgb(71, 49, 20);
            }
            > .feet::before{
                left: 60px;
                border-radius: 80% 100% 100% 50%;
                transform: rotate(-10deg);
                border-color: transparent  transparent transparent rgb(71, 49, 20);
            }
            > .feet::after{
                right: 60px;
                border-radius: 100% 80% 50% 0%;
                transform: rotate(10deg);
                border-color: transparent rgb(71, 49, 20) transparent transparent ;
            } 
        }
        >.crest {
            position: relative;
            top: -17%;
            width: 30px;
            height: 25px;
            background: rgb(233, 19, 19);
            border-radius: 50% 100% 20% 20%;
        }
        >.crest::before,
        .crest::after {
            content: '';
            position: absolute;
            bottom: 0; 
            width: 20px; 
            background: rgb(233, 19, 19);
        }
        >.crest::before {
            left: -5px;
            height: 20px;
            border-radius: 100% 50% 0 20%;
        }
        >.crest::after {
            right: -15px;
            height: 15px;
            background: rgb(233, 19, 19);
            border-radius: 20% 200% 20% 30%;
        }
        > .hand{
            position: relative;
            top: -5%;
        }
        > .hand::before,
        .hand::after{
            content: '';
            position: absolute;
        }
        > .hand::before{
            left:-135px;
            width: 20px;
            height: 80px;
            transform: rotate(15deg);
            background: rgb(250, 242, 242);
            border-radius: 100% 0 50% 50%;
        }
        > .hand::after{
            right: -110px;
            width: 20px;
            height: 80px;
            transform: rotate(-15deg);
            background: rgb(250,242,242);
            border-radius: 50% 100% 50% 50%;
        }
    }
}

总结

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

纯css3实现宠物小鸡实例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
需要知道的CSS3动画技术
Jan 01 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5实现简单图片上传所遇到的问题及解决办法
Jan 20 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
html5调用app分享功能示例（WebViewJavascriptBridge）
Mar 21 HTML / CSS
html5唤醒APP小记
Mar 27 HTML / CSS
CSS 制作波浪效果的思路
May 18 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 #HTML / CSS
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
Sep 10 #HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 #HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 #HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 #HTML / CSS
CSS3实现背景透明文字不透明的示例代码
Jun 25 #HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 #HTML / CSS
远程登录(2) 远程控制(1) 防火墙(2) Windows server 2008(5) Windows server 2019(5) Ubuntu Server(6) DHCP(2) 3389(1) 域控制器(1) FTP(9)
You might like
深入探讨PHP中的内存管理问题
2011/08/31 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
jquery弹出框的用法示例(一)
2013/08/26 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
checkbox在vue中的用法小结
2018/11/13 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
Python操作MySQL简单实现方法
2015/01/26 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python实现杨辉三角思路
2017/07/14 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
人力资源主管的岗位职责
2014/03/15 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
幼儿园大班评语大全
2014/04/17 职场文书
怎样写离婚协议书
2015/01/26 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
教你使用pyinstaller打包Python教程
2021/05/27 Python
Pytest中skip和skipif的具体使用方法
2021/06/30 Python