用HTML5制作一个太极页面

最新推荐文章于 2023-11-22 00:01:17 发布

原创

最新推荐文章于 2023-11-22 00:01:17 发布 · 737 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3

今天用Html制作一个会旋转的太极页面

我是一个萌新，有众多不足的地方请大佬多多指教，不喜勿喷

制作后的效果（有改动，手机也可以打开） https://survivor15.github.io/bagua01/

话不多说直接上代码

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>我的第一个页面</title>
		<style>
			body{
    
    
				background: #eee;
			}
			*{
    
    
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			@keyframes zhuan{
    
    
				from{
    
    
					transform: rotate(0deg);
				}
				to{
    
    
					transform: rotate(360deg);
				}
			}
			#八卦{
    
    
				width: 400px