HTML之旋转球体

喜欢ヅ旅行 2023-07-20 10:55 13阅读 0赞

效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70][]

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>globe-Animation</title>
    	<style>
            *{margin: 0px;padding: 0px;list-style: none;}
    
            div{
                width:100px;
                height:100px;
                position:relative;
                margin:200px auto;
                perspective:1000px;
                transform-style: preserve-3d;
            }
    
            
            #globe li{
                width:300px;
                height:300px;
                list-style: none;
                border-radius: 50% 50%;
                position:absolute;
                opacity:0.4;
                font-size:40px;
                text-align: center;
                border:2px solid white;
            }
                
    
             #item{
                background:black;
            }  
    
            @keyframes item1{
                    from{
                    transform:rotateY(135deg);
                }
                to{
                   transform:rotateY(495deg);
                }
            }
            .item1{
                animation: item1 2s linear infinite forwards;
    
            }
    
            @keyframes item2{
                   from{
                    transform:rotateY(90deg);
                }
                to{
                   transform:rotateY(450deg);
                }
    
            }
            .item2{
                animation: item2 2s linear infinite forwards;
            }
    
            @keyframes item3{
                  from{
                    transform:rotateY(45deg);
                }
                to{
                   transform:rotateY(405deg);
                }
    
            }
            .item3{
               animation: item3 2s linear infinite forwards;
            }
              
            @keyframes item4{
                from{
                    transform:rotateY(0deg);
                }
                to{
                   transform:rotateY(360deg);
                }
    
            }
            .item4{
                    background:red;
                animation: item4 2s linear infinite forwards;
    
            }
              
           
    	</style>
    </head>
    <body>
    	<div>
    		<ul id="globe">
    			<li  id="item" class="item1"></li>
    			<li  id="item" class="item2" ></li>
    			<li  id="item" class="item3" ></li>
    			<li  id="item" class="item4" ></li>           
    		</ul>
    	</div>
    	
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdXlpbmdzaHVkaWFu_size_16_color_FFFFFF_t_70]: /images/20230528/8d8d814a27a340e787c50319541254e9.png