离谱的 CSS！从表盘刻度到剪纸艺术

最新推荐文章于 2024-04-23 02:00:49 发布
最新推荐文章于 2024-04-23 02:00:49 发布
阅读量1.8w 收藏 1
点赞数
文章标签： html javascript js css java
原文链接：https://mp.weixin.qq.com/s?__biz=MzAxODE4MTEzMA==&mid=2650100618&idx=2&sn=ef9d90e31c07dd0cbc4eeb11613f56cd&chksm=83dbceefb4ac47f9db3306733a82b8b3e838e6d203a0314ca29e11d70344e5edf7aeb7d7477d&scene=126&&sessionid=0
版权

关注公众号 前端开发博客，领27本电子书

回复加群，自助秒进前端群

某日，群里有这样一个问题，如何实现这样的表盘刻度：

87798321e869a19ed826170d273f5c4d.png

这其实是个挺有意思的问题，方法也有很多。

单标签，使用 conic-gradient 实现表盘刻度

最简单便捷的方式，就是利用角向渐变的方式 conic-gradient，代码也非常简单，首先，我们实现一个重复角向渐变：

<div></div>
div {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        #000 0, #000 .8deg, transparent 1deg, transparent calc((360 / 60) * 1deg)
    );
}

其实比较难理解的是 calc((360 / 60) * 1deg)，这是因为表盘一共通常有 60 个刻度。效果大概是这样：

b3fb6b92e12bbea18cd9b5c77caf3703.png

接下来，只需要将中间镂空即可。如果背景色是白色，直接叠加一个圆形即可，当然，更好的方式是通过 mask 属性进行镂空：

{
    background: repeating-conic-gradient(
        #000 0, #000 .8deg, transparent 1deg, transparent calc(360 / 60 * 1deg)
    );
    mask: radial-gradient(transparent 0, transparent 140px, #000 140px)
}

这样，我们就得到了一个表盘刻度：

a4c34da04e47f58c287b1cb036c1acd5.png

这是使用一个标签就能实现的方式，当然，缺点也很明显：

  1. 锯齿感严重，渐变的通病

  2. 由于是使用的角向渐变，刻度存在头重脚轻的现象，越向内部，宽度越窄（刻度愈大，差异愈加明显）

555dbe087090fd5783127333be4fd0a8.png

使用多个标签实现

如果不介意使用太多的标签，那么通常而言，更容易想到的方法就是利用 60 个标签，加上旋转实现：

<div class="g-container">
        <div class="g-item"></div>
        // ... 一共 60 个
        <div class="g-item"></div>
    </div>
.g-item {
    position: absolute;
    width: 4px;
    height: 12px;
    background: #000;
    left: 0;
    top: 0;
    transform-origin: 0 150px;
}
@for $i from 1 through 60 { 
    .g-item:nth-child(#{$i}) {
        transform: rotate(#{($i - 1) * 6deg});
    }
}

像是这样，我们通过 60 个 div 标签，利用 SASS 的 for 语法减少重复的代码量，批量实现每个元素逐渐绕一点旋转一定的角度，也是可以实现一个表盘刻度的：

ab908bb25c8c6be1a3381417f33f9ce0.png

这个方案的好处是，每个刻度粗细一致，并且，不会产生锯齿。

借助 -webkit-box-reflect 减少标签数

当然，上述方案的缺点就在于，使用了 60 个标签去完成这样一个简单的图形，有点太奢侈了。

我们希望尽可能的优化优化标签的个数。此时，我们很容易的想到 -- -webkit-box-reflect，倒影效果属性。

-webkit-box-reflect[1] 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。

-webkit-box-reflect 的语法非常简单，最基本的用法像是这样：

div {
    -webkit-box-reflect: below;
}

其中，below 可以是 below | above | left | right 代表下上左右，也就是有 4 个方向可以选。

假设我们有如下一张图片：

<div></div>
div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
}
1dde2ce22ad00da1b09530e5db671fd7.png

加上 -webkit-box-reflect: right，也就是右侧的倒影：

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right;
}

效果如下，生成了一个元素右侧的镜像元素：

ca991bc3783a5f1fa5f1aea2b77820b0.png

借助 -webkit-box-reflect: right，我们至少可以从 60 个标签减少到 15 个标签的使用。简单的嵌套两层即可。

我们简单改变一下 HTML 结构：

<div class="g-parent">
    <div class="g-container">
        <div class="g-item"></div>
        // ... 一共 16 个
        <div class="g-item"></div>
    </div>
</div>

这一次，我们只需要实现 1/4 圆的刻度即可：

@for $i from 1 through 16 { 
    .g-item:nth-child(#{$i}) {
        transform: rotate(#{($i - 1) * 6deg});
    }
}

我们可以得到这样一个图形：

a67df599ca5c7f3af9904d2b62fe0912.png

基于这个图形，我们只需要先向左侧倒影一次，再向下倒影一次即可：

.g-container {
    -webkit-box-reflect: below;
}
.g-parent {
    -webkit-box-reflect: left;
}

效果如下：

0de6d6a8d2183006e5a33e438f8d116b.png

大致的效果就出来了，当然，0点、3点、6点、9点上左下右 4 个刻度有点问题。不过 -webkit-box-reflect 也提供距离调整功能，再简单修改下代码：

.g-container {
    -webkit-box-reflect: below 4px;
}
.g-parent {
    -webkit-box-reflect: left -4px;
}

这次，效果就是我们想要的最终效果：

173b2297753b8d6877079f3e90eb35c3.png

我们就成功地借助 -webkit-box-reflect 节约了 3/4 的标签数量。完整的代码：CodePen Demo -- Clock ticks[2]

-webkit-box-reflect 与剪纸艺术

到这里，我不由得想到，这种对折、再对折，镜像再镜像的方式，与我们小时候的折纸艺术非常的类似。

那么，基于这样一个模板：

<div class="g-parent">
    <div class="g-container">
        <div class="g-item"></div>
    </div>
</div>
.g-container {
    -webkit-box-reflect: below;
}
.g-parent {
    -webkit-box-reflect: left;
}

我只需要绘制 .g-item 里面的内容，将他通过 2 次 -webkit-box-reflect 镜像，就能得到一个剪纸图形。

而如何得到随机有意思的不规则图形呢？

clip-path 是个很不错的选择，我们通过 clip-path 随机对一个矩形进行裁剪：

.g-item {
    width: 150px;
    height: 150px;
    background: #000;
    clip-path: polygon(25% 0%,71% 66%,59% 0%,79% 23%,95% 4%,100% 40%,77% 100%,38% 100%,47% 71%,36% 30%,23% 60%,0% 100%,5% 37%);
}

效果如下：

c716a2e195263befa42215aa737b3cd7.png

经过两次镜像后的效果如下：

04b96de4ef99aebdb0038a9c25c7e127.png

是不是有那么点意思了？可以随机利用 clip-path 多尝试几次，可以得到不同的效果：

e74dbf8d34292bbbcec5fd26eab58992.png

CodePen Demo -- Pure CSS Page Cutting[3]

-webkit-box-reflect 配合 clip-path 配合 mask

但是上面的图形看着还是太简单了，几个原因，一是对折的次数和角度不够，缺少对折次数和不同角度的对折，二是图形不够负责。

我又想起了之前看到过的一篇类似的剪纸相关的文章 -- Paper Snowflakes: Combining Clipping and Masking in CSS[4]。

再上述的基础上，还使用了 mask，将图形切割的更细。

我们再来一次，还是同样的结构，当然，为了得到更负责的图形，我们设置了 4 个 .g-item：

<div class="g-parent">
    <div class="g-container">
        <div class="g-item"></div>
        <div class="g-item"></div>
        <div class="g-item"></div>
        <div class="g-item"></div>
    </div>
</div>

首先，还是设置一个 clip-path 切割后的图形：

.g-item:nth-child(1) {
    width: 150px;
    height: 150px;
    background: #000;
    clip-path: polygon(17% 41%,6% 39%,16% 91%,18% 78%,56% 11%,28% 71%,99% 67%,25% 65%,69% 72%,46% 28%,90% 76%,67% 34%,48% 30%,79% 36%,59% 15%,23% 92%,16% 1%,32% 81%,72% 38%,50% 59%,71% 98%,66% 87%,83% 14%,36% 71%,49% 7%,9% 25%,52% 76%,10% 83%,17% 41%);
}

效果如下：

88fff817bae15cc46ea0a8adab260d6e.png

这个图可能它会特别的奇怪，没有问题，我们继续。

如果，我们将一个矩形，从左下角开始算，分为 4 份，那么每一个份就是 90° / 4 = 22.5°，我们希望切割得到其中一份：

738f8eaf9129bd0451af19ef978b1eac.png
image

我们可以借助 mask 去完成这个切割：

.g-item:nth-child(1) {
    width: 150px;
    height: 150px;
    background: #000;
    clip-path: polygon(.....);
    mask: conic-gradient(from 0turn at 0 100%, #000, #000 22.5deg, transparent 22.5deg, transparent);
}

上述的图形，就被切割成了这样：

f8dc059521112f582ba3b050c3d75ffc.png

OK，基于此，我们可以得到同样的第二份图形，但是我们给它加一个 rotateY(180deg)：

.g-item:nth-child(2) {
    width: 150px;
    height: 150px;
    background: #000;
    clip-path: polygon(.....);
    mask: conic-gradient(from 0turn at 0 100%, #000, #000 22.5deg, transparent 22.5deg, transparent);
    transform: rotateY(180deg);
}

效果如下：

5110e5243a632e1cf705271ba9d61b70.png

我们再通过 rotateZ()，给第二图形旋转一定的角度，让他和第一个贴合在一起：

.g-item:nth-child(2) {
    clip-path: polygon(.....);
    mask: conic-gradient(from 0turn at 0 100%, #000, #000 22.5deg, transparent 22.5deg, transparent);
    transform: rotateY(180deg) rotateZ(-45deg);
}

就得到了一个斜向角度的镜像图像：

c7d55d19a5c9aac36f53e16999acb20a.png

因为 .g-item 被切割成了 4 份，所以第 3、4 个图形如法炮制即可，这样，整个 .g-item 的效果如下：

4f525febc23da91c17122f5c874ba7e9.png

再打开 -webkit-box-reflect，整个的图形效果如下：

497ed76e788f27be4da8eedbe46ecf5f.png

这样，一个剪纸图形就诞生啦！

当然，为了得到不一样的效果，我们可以借助 JavaScript 去随机生成 CSS 中的各类参数，完整的代码，大概是这样：

<div class="g-parent">
    <div class="g-container">
        <div class="g-item"></div>
        <div class="g-item"></div>
        <div class="g-item"></div>
        <div class="g-item"></div>
    </div>
</div>
.g-container,
.g-parent {
    position: relative;
    display: flex;
    width: 150px;
    height: 150px;
}
.g-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
    transform-origin: 0 100%;
    clip-path: var(--polygon, polygon(40% 0%,0% 91%,52% 100%,0% 37%,77% 23%,77% 76%,43% 22%,55% 88%,100% 100%,100% 10%));
}
.g-item {
    mask: conic-gradient(from 0turn at 0 100%, #000, #000 22.5deg, transparent 22.5deg, transparent);
}
@for $i from 1 through 5 { 
    .g-item:nth-child(#{$i}) {
        transform: rotateZ(calc(22.5deg * #{$i - 1}));
    }
}
.g-item:nth-child(2) {
    transform: rotateY(180deg) rotateZ(-60deg);
}
.g-item:nth-child(4) {
    transform: rotateY(180deg) rotateZ(-105deg);
}
.g-container {
    -webkit-box-reflect: below;
}
.g-parent {
    -webkit-box-reflect: left;
}
const ele = document.querySelectorAll('.g-item');

document.addEventListener('click', function(e) {
    let num = Math.floor(Math.random() * 30 + 10);
    
    const maskR =  Math.floor(Math.random() * 22.5 + 22.5 ) + 'deg';
    const r1 = Math.floor(Math.random() * 100) + '%';
    const r2 = Math.floor(Math.random() * 100) + '%'; 
    
    let polygon = 'polygon(' + r1 + ' ' + r2 + ',';
    
    for (let i=0; i<num; i++) {
         const newR1 = Math.floor(Math.random() * 100) + '%';
         const newR2 = Math.floor(Math.random() * 100) + '%';

        polygon += newR1 + ' ' + newR2 + ','
    }
    
    polygon += r1 + ' ' + r2 + ')';
    
    [...ele].forEach(item => {
        item.setAttribute('style', `--polygon:${polygon};-webkit-mask:conic-gradient(from 0turn at 0 100%, #000, #000 ${maskR}, transparent ${maskR}, transparent)`);
    });
});

整个效果是纯 CSS 的，JavaScript 在这里的作用仅仅是辅助生成随机的 clip-path 图案，以及不同的 mask 切割角度，这样，每次点击鼠标，我们都能得到不同的随机剪纸图案：

f05d87a31583aeefd24b197ee6264bfc.png

看看这个简单录制的 GIF：

1604c888fb9bda079fee44ba274e069c.gif

完整的代码，你可以猛击这里 CodePen Demo -- Pure CSS Art Page Cutting[5]

参考资料

[1]

-webkit-box-reflect: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect

[2]

CodePen Demo -- Clock ticks: https://codepen.io/Chokcoco/pen/eYybEpW

[3]

CodePen Demo -- Pure CSS Page Cutting: https://codepen.io/Chokcoco/pen/oNpJewQ

[4]

Paper Snowflakes: Combining Clipping and Masking in CSS: https://css-irl.info/paper-snowflakes-combining-clipping-and-masking-in-css/

[5]

CodePen Demo -- Pure CSS Art Page Cutting: https://codepen.io/Chokcoco/pen/zYpeJBZ

最后

我是小前端，欢迎大家围观我的朋友圈，搞搞技术，吹吹牛逼。我的微信：kujian89，秒添加，邀你进入 500人前端群。

b61ae0c780014a18d137bb3040822f7b.png

 
 
推荐阅读
 
 
程序员裸辞后，在家全职接单一个月的感触
 
 
25 个前端相关的学习网站和一些靠谱的小工具
 
 
前端开发博客一年文章汇总推荐
 
 
6123ff08359e013b2dd022cd499c0afa.png
 
 
关注公众号：前端开发博客
 
 
  1. 回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
  2. 回复「Vue脑图」获取 Vue 相关脑图
  3. 回复「思维图」获取 JavaScript 相关思维图
  4. 回复「简历」获取简历制作建议
  5. 回复「简历模板」获取精选的简历模板
  6. 回复「加群」进入500人前端精英群
  7. 回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
  8. 回复「知识点」下载高清JavaScript知识点图谱
 
 
 👍🏻 点赞 + 在看 支持小编
 
 
因为微信公众号修改规则，如果不标星或点在看，你可能会收不到我公众号文章的推送，请大家将本公众号星标，看完文章后记得点下赞或者在看，谢谢各位！
 


                

        

        

        

    




    

      

        

            

              
                
                  前端开发博客
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
离谱的 CSS！从表盘刻度到艺术剪纸.doc

				
			

			

				

					07-08
				

			

		

		

			
				
离谱的 CSS！从表盘刻度到艺术剪纸.doc

			
		

	



                

              
                



	

		

			

				
					
jQuery+CSS3圆形指针刻度

				
			

			

				

					ICode联盟
				

				

					05-20
					
					240
					
				

			

		

		

			
				
下载地址

jQuery+CSS3圆形指针刻度，根据数据自动生成刻度并设置具体温度值。



dd:


			
		

	



                


  
              

                


	

		

			

				
					
[css]  使用css画个钟表的时间刻度

				
			

			

				

					歌谣的博客
				

				

					01-28
					
					936
					
				

			

		

		

			
				
[css]  使用css画个钟表的时间刻度
写一下思路，先定义一个钟表的大小位置，用absolute,从1点到12点用ul,li。每个li可以用nth-child(对应第几个)来控制位置，角度用transform，然后分钟的刻度也是照样子分别控制位置，要用48个li，这个就要慢慢算了。

<div id="watch">
  <ul class="minute-marks">
    <li></li><li></li><li&g

			
		

	





	

		

			

				
					
CSS 绘制一个时钟

				
			

			

				

					老司机的后备箱
				

				

					05-24
					
					2392
					
				

			

		

		

			
				
练习 CSS 一个很好的方法就是绘制各式各样的 UI，比如这样一个时钟？


你也可以访问这个 CSS clock或者以下代码片段查看实际效果

CSS clock
CSS 绘制这样一个布局有几个难点：

环形排列的刻度
环形分布的数字
自动运行的指针

下面就来一一实现它，相信能学到很多 CSS 绘制和动画的小技巧
一、环形排列的刻度
提到“环形”，可以想到锥形渐变 conic-gradient。假设有这样一个容器
<clock></clock> 

加上一点锥形渐变
clock{

			
		

	



		

			
		



	

		

			

				
					
刻度时钟和电子时钟

				
			

			

				

					self_correction的博客
				

				

					01-11
					
					555
					
				

			

		

		

			
				
刻度时钟和电子时钟的HTML+CSS+JS实现

			
		

	





	

		

			

				
					
CSS实现渐变仪表盘的简单尝试

				
			

			

				

					qq_40289557的博客
				

				

					11-28
					
					1270
					
				

			

		

		

			
				
本章节尝试性的使用CSS实现一个简单的渐变仪表盘，给大家提供一些借鉴。实现角向渐变，不得不提一下conic-gradient属性，这个属性是实现角向渐变的关键；其次，数据可视化开发中，以图表的形式展示数据，这就离不开对数据进行处理，将对应的指标数据映射到图表上，也是可视化开发的一项重要工作；另外，图形的展示形式多种多样，高度还原设计师的设计稿，还需要我们对图形有一定的空间想象力。俗话说“条条大道通罗马”，针对设计图形来说，实现方式也有多种多样，只要能达到预期的效果，都是值的学习的

			
		

	





	

		

			

				
					
重磅！GPT-4 正式发布，新版 ChatGPT 强到离谱，我们替你抢先体验了

				
			

			

				

					03-15
				

			

		

		

			
				
内容概要： CHAT_GPT4是目前最先进的自然语言处理模型，是OpenAI公司的最新研究成果，具有非常强的语言理解和生成能力。它可以进行文本生成、机器翻译、对话生成、文本摘要等任务，被广泛应用于智能客服、智能助手、...

			
		

	





	

		

			

				
					
全网最全chatgpt资料汇总：从入门到精通

				
			

			

				

					05-04
				

			

		

		

			
				
如果这些还不够，先别急，后面还有更直观、更具体、更离谱的例子。在我看来，它有 5 个非常鲜明的特点：  能深度地理解人类的语言，包括中文  能够流畅地与人类对话，真人感爆棚  追问结果符合上下文逻辑，很少出戏 ...

			
		

	





	

		

			

				
					
GPT-4王炸上线！用户直呼：强得离谱

				
			

			

				

					04-01
				

			

		

		

			
				
单从这两门的分数来看，GPT-4 到了可以申请哈佛、麻省理工、斯坦福大学的水平。 02、GPT-3和 GPT-4 之间的区别很微妙 与此前的版本相比，GPT-4具备强大的识图能力，文字输入限制也提升至2.5万字；GPT-4的回答

			
		

	





	

		

			

				
					
离谱.sln

				
			

			

				

					11-13
				

			

		

		

			
				
离谱.sln

			
		

	





	

		

			

				
					
用 CSS background 实现刻度线的呈现

				
			

			

				

					09-22
				

			

		

		

			
				
主要介绍了用 CSS background 实现刻度线的呈现,需要的朋友可以参考下

			
		

	





	

		

			

				
					
自定义的view实现带刻度的圆盘，并有动画

				
			

			

				

					06-14
				

			

		

		

			
				
类似于miui安全中心圆盘效果

			
		

	





	

		

			

				
					
微信小程序实现带刻度简易仪表盘

				
			

			

				

					WDboke的博客
				

				

					02-09
					
					1494
					
				

			

		

		

			
				
带刻度、进度条显示、仪表盘

			
		

	





	

		

			

				
					
使用css画刻度图表

				
			

			

				

					时光清浅处，一步一安然
				

				

					12-15
					
					1324
					
				

			

		

		

			
				
使用css画刻度图表
很多时候呢，一些比较简单的图表都会选择自己写，也不想引入echart或者其他第三方组件。那么今天呢，就来讲讲其中一个案例，如何使用css来实现以下图表：

基本代码（使用vue）如下：
<template>
    <div class="container">
        <div class="container_chart">
            <div
                class="container_char

			
		

	





	

		

			

				
					
vue+css实现圆环渐变仪表盘

				
			

			

				

					zawami的博客
				

				

					06-13
					
					2755
					
				

			

		

		

			
				
vue+css实现圆环+渐变色+仪表盘+进度条

			
		

	





	

		

			

				
					
Web前端开发之HTML_3

					
最新发布

				
			

			

				

					zx1026409886的博客
				

				

					04-23
					
					846
					
				

			

		

		

			
				
表单在Web网页中用来给用户填写信息，从而采集用户信息，使网页具有交互功能。所有的用户输入内容的地方都用表单来写，如登录注册、搜索框。表单是由容器和控件组成的，一个表单一般应包含用户填写信息的输入框，按钮等，这些输入框、按钮叫做控件，表单就是容器，它能够容纳各种各样的控件。

			
		

	





	

		

			

				
					
HTML 入门

				
			

			

				

					lvshihao_的博客
				

				

					04-16
					
					1088
					
				

			

		

		

			
				
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。

			
		

	





	

		

			

				
					
HTML中的页面可见性

				
			

			

				

					小卡酷谋的博客
				

				

					04-22
					
					344
					
				

			

		

		

			
				
所以，所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性（Page Visibility）API 来判断当前页面是显示状态还是隐藏状态。页面事件来判断当前页面可见性的状态，并针对性的执行某些任务。长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法。里页面可见性接口就提供给了程序员一个方法，让他们使用。用户是否去看别的网站了？更多有关页面可见性的内容可以参阅。"页面切换了~目前不可见"

			
		

	





	

		

			

				
					
数据可视化-ECharts Html项目实战（13）

				
			

			

				

					qq_49513817的博客
				

				

					04-17
					
					2803
					
				

			

		

		

			
				
今天的文章，我会以鼠标左键触发为例带着大家学习ECharts特殊图表设置中组件交互的行为事件。希望你能在本篇文章中有所收获。希望我的文章能帮助到正在学习的你，也欢迎各位来本篇文章下一起交流学习，共同进步。

			
		

	





	

		

			

				
					
吉尼斯世界记录最离谱的

				
			

			

				

					06-10
				

			

		

		

			
				
吉尼斯世界记录中有很多离奇有趣的记录，以下是一些例子：

1. 最长的指甲：印度女性Shridhar Chillal的左手拇指指甲长达197.8厘米，她保持这个长指甲的记录已经超过60年。

2. 最大的炸鸡桶：美国的KFC曾经在纽约市立广场放置了一个高16米的巨型炸鸡桶，成为全球最大的炸鸡桶。

3. 最长时间不眨眼：美国人John Doyle创造了最长时间不眨眼的记录，他在2008年连续保持了眼睛不眨的状态，持续时间达到了1小时5分钟。

4. 最多穿着内裤跑步：美国人Will J. Fehr创造了最多穿着内裤跑步的记录，他在2015年穿着30条内裤完成了5公里的跑步。

这些记录或许有些离奇，但它们也体现了人类的创造力和趣味性。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值