首页 > 其他分享> 文章详细

纯CSS实现“Rake”

2022-09-14 00:30:08 阅读：314 来源： 互联网

标签：Rake 实现代码 50% 变换宽度半径 div CSS

我正在参加“掘金挑战守则”。详情请见：掘金挑战赛来了！

耙

介绍

我在想这周六周日去哪里过中秋节呢！

突然想起上周五晚上去吃的腌鱼，当时就点了一份。 红糖糯米耙

非常柔软可口，但这周六和周日绝对不会去。所以画一个耙子，并纪念它！

项目截图

耙实现

1.先画一个桶

你肯定需要一个铲斗，所以让我们先拿出一个。

 <div id= "Cylinder"></div>  
  
 ＃ 圆柱 {  
 位置：相对；  
 宽度：200px；  
 高度：150px；  
 边距：20px 0；  
 背景：#a9a8ab；  
 边界半径：50% / 10%；  
 白颜色;  
 文本对齐：居中；  
 文本缩进：0.1em；  
 }  
 复制代码

可以看到这个桶目前没有腰部（比较细），我们把它的腰部露出来让它更像一个桶

我们可以给这个桶，添加 伪元素

 # 气缸：之前 {  
 内容： '';  
 位置：绝对；  
 z-指数：99；  
 前10名％;  
 底部：10%；  
 右：- 5%；  
 左：- 5%；  
 背景：继承；  
 边界半径：11% / 50%；  
 }  
 复制代码

2.填满耙子

我们都知道，耙的时候，桶里什么都没有。

所以我们是 绝对定位 调整下位，即可达到灌装效果，三维满了

 <div id= "Cylinder">  
 < div 类 = “椭圆” ></ div >  
 </div>  
    
 .椭圆形 {  
 位置：绝对；  
 z-指数：0；  
 宽度：200px；  
 高度：100px；  
 背景：#fff;  
 边框-半径：100px / 50px；  
 }  
 复制代码

三、外观风格

填完上面，可以看到还是很不错的

但是总觉得少了点什么！

为了不那么单调，我加了两只眼睛和邪恶的笑容！

 <div  class= "eyes">  
 < div 类 = "eye1" ></ div >  
 < div 类 = "eye2" ></ div >  
 </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. 工具

工具绝对是木头的颜色，这里填写相关颜色

 <div  class= "club1"> </div>  
    
 .俱乐部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 风格知识点

位置 , 伪元素 , 边界半径 , 转换也动画的使用

这篇文章的链接： https://homecpp.art/2113/8151/1626

本文链接：https://www.qanswer.top/35172/22061400

标签：Rake,实现,代码,50%,变换,宽度,半径,div,CSS
来源： https://www.cnblogs.com/amboke/p/16691537.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9