HTML之旋转球体

最新推荐文章于 2024-02-25 09:00:00 发布

流萤数点

最新推荐文章于 2024-02-25 09:00:00 发布

阅读量1.2k

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/liuyingshudian/article/details/105242187

版权

效果图如下

代码如下：

<!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>

流萤数点

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML之旋转球体

效果图如下代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>globe-Animation</title> <style> *{margin: 0px;padding: 0p...
复制链接

扫一扫