纯CSS实现“Rake”
我正在参加“掘金挑战守则”。详情请见： 掘金挑战赛来了！
耙
介绍
我在想这周六周日去哪里过中秋节呢！
突然想起上周五晚上去吃的腌鱼，当时就点了一份。 红糖糯米耙
非常柔软可口，但这周六和周日绝对不会去。所以画一个耙子，并纪念它！
项目截图
耙实现
1.先画一个桶
你肯定需要一个铲斗，所以让我们先拿出一个。
＃ 圆柱 {
位置：相对；
宽度：200px；
高度：150px；
边距：20px 0；
背景：#a9a8ab；
边界半径：50% / 10%；
白颜色;
文本对齐：居中；
文本缩进：0.1em；
}
复制代码
可以看到这个桶目前没有腰部（比较细），我们把它的腰部露出来让它更像一个桶
我们可以给这个桶，添加 伪元素
气缸：之前 {
内容： '';
位置：绝对；
z-指数：99；
前10名％;
底部：10%；
右：- 5%；
左：- 5%；
背景：继承；
边界半径：11% / 50%；
}
复制代码
2.填满耙子
我们都知道，耙的时候，桶里什么都没有。
所以我们是 绝对定位 调整下位，即可达到灌装效果， 三维 满了
< div 类 = “椭圆” ></ div >
.椭圆形 {
位置：绝对；
z-指数：0；
宽度：200px；
高度：100px；
背景：#fff;
边框-半径：100px / 50px；
}
复制代码
三、外观风格
填完上面，可以看到还是很不错的
但是总觉得少了点什么！
为了不那么单调，我加了两只眼睛和邪恶的笑容！
< div 类 = "eye1" ></ div >
< div 类 = "eye2" ></ div >
<div类=“微笑”></ div >
.眼睛{
位置：绝对；
最高：44%；
左：50%；
变换：翻译（- 50%，- 50%）；
z-指数：999；
宽度：100%；
高度：30px；
显示：弯曲；
证明-内容：居中；
}
.眼睛1 {
宽度：30px；
高度：30px；
背景：#000；
边界半径：50%；
边距右：10px；
}
.眼睛2 {
宽度：30px；
高度：30px；
背景：#000；
边界半径：50%；
边距-左：10px；
}
.微笑 {
位置：绝对；
z-指数：999；
左：61px；
顶部：24px；
宽度：80px；
高度：104px；
边界半径：50%；
box-shadow 阴影：15px 15px 0 0 # 000;
变换：旋转（42度）；
}
复制代码
嗯，看起来更舒服
剩下的就是生成，耙 工具
4. 工具
工具绝对是 木头 的颜色，这里填写相关颜色
.俱乐部1 {
位置：绝对；
z-指数：999；
左：68px；
顶部：-195px；
宽度：27px；
高度：200px；
背景：#edc781；
变换原点：-80px；
变换：旋转（-90度）；
变换样式：preserve-3d；
边框左下角半径：7px；
边框右下角半径：7px；
}
复制代码
添加 伪元素 , 另一根棍子
.俱乐部1：之前{
背景：#e0be95；
内容： '';
高度：20px；
左：-175px；
位置：绝对；
顶部：23px；
宽度：213px；
变换：translateZ（-1px）；
}
复制代码
我这里实现了两根棍子，右边一根可以对称
并通过 变换式 处理层次结构
变换样式：preserve-3d；
变换：translateZ（-1px）；
复制代码
5.动画
最后我们的 工具 ，执行 打 影响。
在这里通过添加 动画 动画
动画：move1 1s ease - 0.5s 无限；
@keyframes move1 {
0% {
变换：旋转（-90度）；
}
50% {
变换：旋转（0度）；
}
100% {
变换：旋转（-90度）；
}
}
复制代码
最后的效果 掘金代码 起来了，小东西，玩得开心！
总结
在这里用了很多 css 风格知识点
位置 , 伪元素 , 边界半径 , 转换 也 动画 的使用
版权声明：本文为博主原创文章，遵循CC 4.0 BY-SA版权协议。转载请附上原文出处链接和本声明。
这篇文章的链接： https://homecpp.art/2113/8151/1626
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
浙公网安备 33010602011771号