HTML（1）吃豆豆网页代码

最新推荐文章于 2021-06-18 14:33:57 发布

洛尧

最新推荐文章于 2021-06-18 14:33:57 发布

阅读量918

点赞数

文章标签： html js

本文链接：https://blog.youkuaiyun.com/qq_43144103/article/details/106293811

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>吃豆豆</title>
	<style>
		body{
			margin: 0;
		}
		.main{
			width: 200px;
			height:200px;
			border-radius:50%;
			margin:200px;
			animation: peas 1s infinite linear;
		}
		.top{
			width: 200px;
			height:100px;
			margin-left:200px;
			background:#ffcc66;
			border-radius:100px 100px 0px 0px;
			animation: movetop 1s infinite;
		}
		.bottom{
			width: 200px;
			height:100px;
			margin-left:200px;
			background:#ffcc66;
			border-radius:0px 0px 100px 100px;
			animation: movebottom 1s infinite;
		}

		@keyframes movetop{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform: rotate(-30deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
		@keyframes movebottom{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform: rotate(30deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
		@keyframes peas{
			0%{
                box-shadow: 400px 0px 0px -80px #00cc00,
                            600px 0px 0px -80px #00cc00,
                            800px 0px 0px -80px #00cc00,
                            1000px 0px 0px -80px #00cc00;
            }
            100%{
                box-shadow: 200px 0px 0px -80px #00cc00,
                            400px 0px 0px -80px #00cc00,
                            600px 0px 0px -80px #00cc00,
                            800px 0px 0px -80px #00cc00;
            }
		}
	</style>
 </head>
 <body>
	<div class="main"> 
		<div class="top"></div>
		<div class="bottom"></div>
	</div>
 </body>
</html>

照着视频做出来的第一个html。我用的是EditPlus。Ctrl+B打开浏览器：
在这里插入图片描述