用css做一个旋转的地球仪

最新推荐文章于 2024-06-11 17:47:44 发布
最新推荐文章于 2024-06-11 17:47:44 发布
阅读量2.7k 收藏 7
点赞数
分类专栏： css 文章标签： css动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/orq18810575870/article/details/79740645
版权

html部分:

<body>
    <div class="hoder"></div>
    <div class="circle"></div>
    <div class="circle equator"></div>
    <div class="circle weft1"></div>
    <div class="circle weft2"></div>
    <div class="circle weft3"></div>
    <div class="circle weft3"></div>
    <div class="circle weft4"></div>
    <div class="hoder2"></div>
    <div class="bottom"></div>
    <div class="bottom2"></div>
</body>

球的部分是将div的边框置为圆形

将圆圈进行3D旋转,就得到一个选装的透视球

transform: rotateX(70deg) translateZ(70px);

这个是将圆圈平躺下,做成赤道的样子

其余的weft是纬线,通过3D的Y轴变换得到

然后再做静态的支架即可

运行结果如下:


源代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>努力做个地球仪</title>
    <style>
        body{
            background-color: black;
        }
        .circle{
            border-radius: 100%;
            height: 100px;
            width: 100px;
            left: 200px;
            top: 200px;
            position: absolute;
            border: 1px solid #394057;
            transform-style: preserve-3d;
        }
        .equator{
            top:260px;
            transform: rotateX(70deg) translateZ(70px)
        }
        .weft1{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft1;
        }
        .weft2{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft2;
        }
        .weft3{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft3;
        }
        .weft4{
            -webkit-animation-duration:10s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:weft4;
        }
        .hoder{
            height: 159px;
            width: 100px;
            left: 150px;
            top: 180px;
            position: absolute;
            border-right:2px solid #394057 ;
        }
        .hoder2{
            border-radius: 100%;
            border-left:3px solid #394057 ;
            height: 140px;
            width: 140px;
            top:180px;
            left: 180px;
            position: absolute;
        }
        .bottom{
            height:100px;
            width: 100px;
            border-radius: 100%;
            left: 200px;
            top: 355px;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(70deg) translateZ(70px);
            z-index: -100;
            border:2px solid #394057 ;
        }
        .bottom2{
            height:10px;
            width: 10px;
            border-radius: 100%;
            left: 244px;
            top: 397px;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(70deg) translateZ(70px);
            z-index: -100;
            border:2px solid #394057 ;

        }
        @-webkit-keyframes weft1{
            from{
                -webkit-transform:rotateY(40deg);
            }
            to{
                -webkit-transform:rotateY(400deg);
            }
        }
        @-webkit-keyframes weft2{
            from{
                -webkit-transform:rotateY(80deg);
            }
            to{
                -webkit-transform:rotateY(440deg);
            }
        }
        @-webkit-keyframes weft3{
            from{
                -webkit-transform:rotateY(120deg);
            }
            to{
                -webkit-transform:rotateY(480deg);
            }
        }
        @-webkit-keyframes weft4{
            from{
                -webkit-transform:rotateY(160deg);
            }
            to{
                -webkit-transform:rotateY(520deg);
            }
        }
    </style>
</head>
<body>
    <div class="hoder"></div>
    <div class="circle"></div>
    <div class="circle equator"></div>
    <div class="circle weft1"></div>
    <div class="circle weft2"></div>
    <div class="circle weft3"></div>
    <div class="circle weft3"></div>
    <div class="circle weft4"></div>
    <div class="hoder2"></div>
    <div class="bottom"></div>
    <div class="bottom2"></div>
</body>
</html>
 

 


                

        

        

    




    

      

        

            

              
                
                  出于蓝
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
纯css3多边形地球仪特效

				
			

			

				

					07-24
				

			

		

		

			
				
纯CSS3多边形地球仪特效是一种利用现代Web技术实现的视觉效果，它结合了CSS3的特性，如转换（transform）、过渡（transition）和3D变换，来创建一个动态的、具有立体感的地球模型。这个特效展示了地球在网页上的自转...

			
		

	



                

              
                



	

		

			

				
					
CSS3网状地球旋转特效

				
			

			

				

					06-24
				

			

		

		

			
				
"CSS3网状地球旋转特效"就是一种利用CSS3技术实现的创新视觉效果，它通过线条构成的网状结构，模拟出地球的形态，并赋予其旋转的动态效果，为用户带来独特的星球动画体验。  ### CSS3基础知识  **1. 选择器与属性：*...

			
		

	



                


  
              

                


	

		

			

				
					
cesium开场地球旋转代码，html,三维开发实例 前端开发

				
			

			

				

					05-21
				

			

		

		

			
				
cesium开场地球旋转代码，html,三维开发实例 前端开发

			
		

	





	

		

			

				
					
html地球仪代码,html – 在CSS中旋转地球仪

				
			

			

				

					weixin_39724004的博客
				

				

					06-09
					
					977
					
				

			

		

		

			
				
我在CSS中创建一个旋转地球效果。我在CSS中创建了地球：body {background-color: #111;}#earth {width: 300px;height: 300px;background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);border-radius: 50%;background-size...

			
		

	



		

			
		



	

		

			

				
					
css特效:对多个tag标签实现模拟地球仪特效

					
最新发布

				
			

			

				

					2401_83810323的博客
				

				

					06-11
					
					272
					
				

			

		

		

			
				
标签（比如链接）的模拟地球仪特效和鼠标跟随特效，你可以使用CSS和一点点JavaScript来完成。元素，从而实现鼠标跟随特效。同时，我们使用了CSS来实现地球特效和链接的样式。函数，这个函数会根据鼠标位置移动。标签作为链接，并且给它们添加了。在这个示例中，我们创建了多个。

			
		

	





	

		

			

				
					
css3旋转的地球,旋转的地球css3

				
			

			

				

					weixin_39613839的博客
				

				

					08-04
					
					262
					
				

			

		

		

			
				
css3果然博大精深：1.代码里面还有用box-shadow制作椭圆形阴影的效果，厉害了！之前找了好久都没找到，今天给找到了html:css:.ball .shadow {position: absolute;width: 100%;height: 100%;background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgb...

			
		

	





	

		

			

				
					
前端——旋转的地球

				
			

			

				

					weixin_34248849的博客
				

				

					07-11
					
					1050
					
				

			

		

		

			
				
旋转的地球实现原理：外层的轮廓是球形，里层包含一张世界地图背景，按照一定的时间匀速运动。一、画轮廓支持css3属性border-radius可以其属性，制作球形。ie6-ie8采用蒙版效果。mask样式中将background设置一张中间为圆形全透明的png8图片。采用ie识别hack，*包括（ie6，ie7），\0包括（ie8）。备注：因为上传到博客园中相册中的图片会被修改，所以在ie上看到的效...

			
		

	





	

		

			

				
					
纯html+css炫酷地球仪动画效果

				
			

			

				

					菜虚鲲的博客
				

				

					06-09
					
					9701
					
				

			

		

		

			
				
纯html+css炫酷地球仪动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;...

			
		

	





	

		

			

				
					
CSS3旋转动画地球周转特效特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
2. **rotate3d()函数**：CSS3的`rotate3d()`函数允许指定一个3D旋转，通过三个轴的旋转角度来定义旋转。例如，`rotate3d(x, y, z, angle)`，其中x, y, z是旋转轴的分量，angle是旋转的角度。地球特效可能使用`rotate...

			
		

	





	

		

			

				
					
一个简易的不断旋转的地球仪

				
			

			

				

					09-05
				

			

		

		

			
				
使用CSS的transform和animation动画实现一个旋转的地球仪.

			
		

	





	

		

			

				
					
CSS3旋转动画地球周转特效.zip

				
			

			

				

					07-11
				

			

		

		

			
				
代码简介：CSS3旋转动画地球周转特效是一款3D效果的旋转变形特效下载。

			
		

	





	

		

			

				
					
html5 canvas绘制3D地球旋转动画特效

				
			

			

				

					09-08
				

			

		

		

			
				
html5 canvas绘制3D地球旋转动画特效

			
		

	





	

		

			

				
					
WPF地球3D旋转c#源码

				
			

			

				

					07-05
				

			

		

		

			
				
WPF地球3D旋转c#源码

			
		

	





	

		

			

				
					
OpenGL ES实例3:3d翻转的球体

				
			

			

				

					04-16
				

			

		

		

			
				
根据《Pro OpenGL ES for Android (2012)》一书第三章做成的简单的OpenGL ES的3d实例,3d翻转的球体

			
		

	





	

		

			

				
					
html实现旋转地球特效

				
			

			

				

					03-13
				

			

		

		

			
				
主要是用自定义动画和animation相结合，实现旋转地球特效。
两张图片并排排列，绝对定位，不断改变图片的left值，实现切换效果。
增加阴影。

			
		

	





	

		

			

				
					
HTML5 Canvas模拟3D地球旋转动画特效

				
			

			

				

					01-01
				

			

		

		

			
				
一款超级炫酷的HTML5 Canvas模拟3D地球旋转动画特效，以太空作为背景，地球在太空中旋转，可以拖拽鼠标从不同的角度查看，还可以点击右下方全屏按钮来全屏观看地球旋转动画效果。

			
		

	





	

		

			

				
					
C#中实现虚拟地球

				
			

			

				

					weixin_30924087的博客
				

				

					08-16
					
					425
					
				

			

		

		

			
				
文章转载自[源代码]C#中实现虚拟地球(不可不看)[翻译]Andrea_86著a little Virtual Earth Control[简介]本文的目的是想在Windows Form中加载虚拟地球的地图。因为，你可以轻易地在HTML页面上加载这些地图，所以我会使用WebBrowser 控件。不过另一个问题也随之而来，如何捕获到HTML页面的事件？[背景]如果你将这些地图使用在商业用途上，请阅读...

			
		

	





	

		

			

				
					
旋转球

				
			

			

				

					weixin_34234829的博客
				

				

					07-15
					
					85
					
				

			

		

		

			
				
1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>&l...

			
		

	





	

		

			

				
					
C#调用GoogleEarth COM API开发（一）

				
			

			

				

					ZENITH
				

				

					08-28
					
					5307
					
				

			

		

		

			
				
一、准备 Google Earth提供了个人免费版、Plus版、Pro版，个人开发只安装个人免费版就可以了，如果需要更多的功能，那么只有每年上交$400购买专业版了 到目前为止，GoogleEarth的二次开发接口还比较少，功能太弱，仅仅提供了1.0的类库。 GoogleEarth COM API参考文档可以在这里找到：http://earth.google.com/com

			
		

	





	

		

			

				
					
css3图片地球周转旋转动画特效

				
			

			

				

					09-06
				

			

		

		

			
				
CSS3图片地球周转旋转动画特效是一种通过CSS3技术实现的动画效果，让一张图片以地球为主题，实现持续旋转的效果。

首先，我们需要一个包含地球图片的HTML文档。可以在CSS中使用background-image属性将地球图片设置为页面的背景图片，或者在HTML中使用<img>标签插入地球图片。

接下来，我们使用CSS3中的旋转动画特效来实现地球的周转旋转效果。我们可以通过@keyframes规则定义一个旋转动画，并命名为"rotate"。在这个动画中，我们可以使用transform属性来对图片进行旋转变换。

具体实现地球周转旋转的效果，可以通过将旋转角度从0度变换到360度，以及设置动画持续时间和循环次数来控制动画的效果。在@keyframes规则中，我们可以使用0%和100%来表示动画的起始和结束状态。

最后，在HTML文档或CSS中将动画应用到地球图片上。可以使用animation属性来指定动画的名称、持续时间、循环次数以及动画的缓动函数等参数。

通过以上步骤，我们就可以实现一个简单的CSS3图片地球周转旋转动画特效。这样的动画可以为网页带来生动、活泼的效果，吸引用户的注意力。同时，CSS3技术的应用使得动画效果的实现变得简单和高效。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值