纯CSS实现“Rake”

2022/9/14 6:17:39

编程Tag： 代码 css div 宽度实现变换 Rake 50% 半径

本文主要是介绍纯CSS实现“Rake”，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

耙

介绍

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

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

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

项目截图

耙实现

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

这篇关于纯CSS实现“Rake”的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！