- 所在位置：
- 首页 >
- 编程技术 >
- CSS/HTML >
- CSS3怎样制作一个支付宝的宠物小鸡
CSS3怎样制作一个支付宝的宠物小鸡
Admin 2022-06-06 群英技术资讯 361 次浏览
今天就跟大家聊聊有关“CSS3怎样制作一个支付宝的宠物小鸡”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“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;
在使用：：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怎样制作一个支付宝的宠物小鸡”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
HTML5中video标签如何使用，怎么设置自动播放视频
本篇文章主要的介绍了关于HTML中的视频标签html5 video标签的用法和介绍等，还有一些视频格式，在web中支持视频播放的，接下来让我们一起来看看这篇文章吧
-
CSS中行内元素与块级元素的不同在哪，如何转换？
CSS中行内元素与块级元素的不同在哪？因为在CSS中，不同元素标签被分为了行内元素和块级元素，很多新手在学习的时候容易混淆，对此本文就给大家来讲讲CSS中行内元素与块级元素的区别，及转换方法，感兴趣的朋友就继续往下看吧。
-
用css怎样做类似淘宝页面留白的效果？
用css怎样做类似淘宝页面留白的效果？页面留白的效果就是当我们在缩小浏览器页面的时候，内容部分不缩小，留白部分缩小，就像淘宝页面一样，当然这个效果很多网站都可以实现，接下来我们就来看看这是怎样实现的。
-
HTML中如何实现表单居中，有什么技巧
之前碰到一个作业，给了一张图片，让按照图片样式做一个表单，但是一直表单无法居中，在网上找了各种例子之后，终于成功，今天就来介绍一下，感兴趣的可以了解一下
-
CSS中图片边框渐变色的效果怎样做？
CSS中图片边框渐变色的效果怎样做？对于边框的使用，大家应该都比较熟悉，一般设置边框默认都是纯黑的，这样看起来就比较单调，如果给边框设置成渐变色，应该能增加不少美感，对此这篇就和大家来分享一下CSS中图片边框渐变色的效果的实现，实现代码及效果如下:
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
