您现在的位置是：网站首页> 编程资料编程资料

纯css3实现宠物小鸡实例代码css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-04 881人已围观

简介最近看了很多关于css3的知识和文章，觉得css3用起来很方便，使用css3的话，在页面布局上可以省去很多不必要的代码。下面小编给大家带来了纯css3实现宠物小鸡的相关知识，感兴趣的朋友一起看看吧

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

先看最终效果图：

接下来是我书写的步骤：

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

接下来是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;

在使用：：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; }

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

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

云朵实现了。

接下来是宠物小鸡，先把身体写出来，同样用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; }

鸡冠和云朵的写法差不多

 .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实现宠物小鸡实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

上一篇：css实现三栏布局的几种方法及优缺点CSS经典三栏布局方案（6种方法）浅谈CSS三栏布局的Ｎ种实现CSS实现三栏布局的四种方法示例CSS三栏布局探讨——中间固定宽度两边自适应宽度CSS Float布局过程与老生常谈的三栏布局 DIV+CSS 三栏布局实例代码

下一篇：使用CSS content的attr实现鼠标悬浮提示（tooltip）效果CSS实现鼠标悬浮无限向下级展示的实例代码CSS鼠标悬浮DIV后显示DIV外的按钮解决方法CSS3制作了一个动画导航效果(鼠标悬浮会放大)css实现缕空遮罩层的示例代码css3遮罩层镂空效果的多种实现方法CSS实现带遮罩层可关闭的弹窗效果CSS实现鼠标移至图片上显示遮罩层效果CSS 鼠标悬浮在图片上添加遮罩层效果的实现

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢