h5网站建设的具体内容,网页设计实验报告实验1,网站建设公司薪酬,简单的cms源码效果如下#xff1a; pinia小菠萝分为头部和身体#xff0c;头部三片叶子#xff0c;菠萝为身体 头部
先绘制头部的盒子#xff0c;将三片叶子至于头部盒子中 先绘制中间的叶子#xff0c;利用border-radius实现叶子的效果#xff0c;可以借助工具来快速实现圆角的预想…效果如下 pinia小菠萝分为头部和身体头部三片叶子菠萝为身体 头部
先绘制头部的盒子将三片叶子至于头部盒子中 先绘制中间的叶子利用border-radius实现叶子的效果可以借助工具来快速实现圆角的预想效果 https://9elements.github.io/fancy-border-radius/ div classcenter_lafe/div.center_lafe{width: 100px;height: 200px;background: linear-gradient(-130deg,#61d572,#52ce63);border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;::before{content: ;width: 100px;height: 200px;position: absolute;border-radius: 50% 50% 50% 50% / 100% 100% 0% 0% ;background: linear-gradient(-180deg,rgba(255,255,255,0.2) 30%,transparent);}
}再绘制两侧的叶子方法和绘制中间的叶子一样
div classleft_lafe/div
div classright_lafe/div.left_lafe{width: 100px;height: 100px;background: linear-gradient(-130deg,#86e798,#52ce63);border-radius: 5% 95% 50% 50% / 5% 50% 50% 95% ;position: absolute;left: 50px;bottom: -16px;transform: rotate(5deg);
}
.right_lafe{width: 100px;height: 100px;background: linear-gradient(-130deg,#86e798,#52ce63);border-radius: 95% 5% 50% 50% / 50% 5% 95% 50% ;position: absolute;right: 20px;bottom: -30px;transform: rotate(5deg);
}两篇叶子的层级在中间叶子和菠萝身体之下所以两片叶子的被覆盖的地方有一层阴影用来表示层级阴影用伪元素配合渐变实现下面是左侧叶子的阴影绘制一个和左侧叶子一样的形状利用渐变和颜色透明度实现
.left_lafe::before{content: ;width: 100px;height: 100px;position: absolute;border-radius: 5% 95% 50% 50% / 5% 50% 50% 95% ;background: linear-gradient(-25deg,rgba(51, 51, 51,0.3),transparent);
}右侧叶子同理看一下头部叶子的整体效果 身体
开始绘制小菠萝身体部分 身体部分利用border-radius实现身体部分的层级高于叶子
div classpiniaBody/div.piniaBody{width: 300px;height: 320px;background: #ccc;border-radius: 50% 50% 48% 48% / 65% 65% 38% 38% ;background: linear-gradient(to bottom,#ffe56c,#ffc73b);margin-top: -20px;z-index: 10;position: relative;
}额头
绘制额头上的X图案其实就是绘制一侧的斜线另一侧同样的写法更改位置和角度即可。 div classforehead/div.forehead{width: 70px;height: 70px;position: absolute;left: 50%;top: 30px;transform: translate(-50%);::before,::after{content: ;width: 100%;height: 8px;position: absolute;background: #ffc73b;border-radius: 6px;left: 45%;top: 40%;transform: translateX(-50%) rotate(50deg);}::after{content: ;left: 55%;top: 40%;transform: translateX(-50%) rotate(-50deg);}
}眼睛
眼睛部分利用三个圆形分别堆叠即可分别是眼白、黑眼球、高光
div classleft_eyesBox/div.left_eyesBox{width: 50px;height: 50px;background: #fff;border-radius: 50%;position: relative;::before{content: ;position: absolute;width: 30px;height: 30px;background: black;border-radius: 50%;left: 50%;top: 50%;transform: translate(-50%,-50%);}::after{content: ;width: 12px;height: 12px;background: #fff;border-radius: 50%;position: absolute;left: 25%;top: 35%;}
}眼睛下面有一个眼影这里新建一个div圆角50%层级在眼睛之下。
div classeyeshadow/div.eyeshadow{width: 40px;height: 20px;background: #eaadcc;position: relative;top: 40px;left: -10px;z-index: -1;border-radius: 50%;
}右眼的写法和左眼一致把左眼拿过来更改一下位置即可。 嘴巴
嘴巴部分先绘制一个椭圆椭圆的背景色为透明色给椭圆设置阴影阴影向下偏移5px只保留阴影的颜色就可以得到嘴巴的效果了
div classmouth/div.mouth{width: 40px;height: 20px;position: absolute;left: 50%;bottom: 20px;border-radius: 50%;transform: translate(-50%) scale(1);box-shadow: 0px 5px 0px 0px black;
}底部
小菠萝底部的X图案跟额头的X图案绘制方法大致相同例如左侧横线旋转45deg右侧横线旋转-45deg即可得到一个交叉的Xwidth就是横线的长度调整左右侧横线长度的比例即可得到不规则的X图案剩下的只需要调整斜线的位置和比例即可左右的X图案绘制方法是一样的。
div classleft_jaw/div
div classright_jaw/div.left_jaw,.right_jaw{width: 90px;height: 70px;position: absolute;bottom: 40px;::before{content: ;width: 100%;height: 8px;position: absolute;background: #ecb732;border-radius: 6px;left: 45%;top: 40%;transform: translateX(-50%) rotate(50deg);}::after{content: ;width: 100%;height: 8px;position: absolute;background: #ecb732;border-radius: 6px;left: 55%;top: 40%;transform: translateX(-50%) rotate(-50deg);}
}.left_jaw{left: 30px;::after{width: 70%;}
}
.right_jaw{right: 30px;::before{width: 70%;}
}到这里我们的小菠萝就绘制完成了 最后看一下官网的原图
技巧总结
1、利用border-radius绘制大部分不规则的椭圆 2、高光利用背景色和层级叠加实现 3、不规则的交叉图案使用translate调整旋转位置 4、元素的层级表现利用线性渐变和颜色透明度来实现 5、利用z-index调整画面层级表现 案例源码https://gitee.com/wang_fan_w/css-diary
如果觉得这篇文章对你有帮助欢迎点赞、收藏、转发哦~
