吃豆豆

最新推荐文章于 2021-06-11 20:04:15 发布

qq_张辰浩

最新推荐文章于 2021-06-11 20:04:15 发布

阅读量390

点赞数

分类专栏： css3 文章标签： css html

本文链接：https://blog.csdn.net/qq_45739834/article/details/103845932

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

吃豆豆代码纯用html和css3

<!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>Document</title>
	<style>
		.box3{
				float: left;
				width: 50px;
				height: 50px;
				border-radius:100px;
				animation:doudou 2s infinite;
				margin-top: -70px;
			}
			@keyframes doudou{
				0%{
				box-shadow: 
				150px 0px 0px 0px #3BAD6E,
				300px 0px 0px 0px #3BAD6E,
				450px 0px 0px 0px #3BAD6E,
				600px 0px 0px 0px #3BAD6E;
				}
				100%{
					box-shadow: 
				0px 0px 0px 0px #3BAD6E,
				150px 0px 0px 0px #3BAD6E,
				300px 0px 0px 0px #3BAD6E,
				450px 0px 0px 0px #3BAD6E;
				}
			}
		.box1{
			width: 100px;
			height: 50px;
			background-color: red;
			border-radius: 100px 100px 0px 0px;
			animation:top 1s infinite;
		}
		
		@keyframes top{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform:rotate(-30deg);
			}
			100%{
				transform:rotate(0deg);
			}
		}
		.box2{
			width: 100px;
			height: 50px;
			background-color: red;
			border-radius: 0px 0px 100px 100px;
			animation: button 1s infinite;
		}
		@keyframes button{
			0%{
				transform:rotate(0deg);
			}
			50%{
				transform:rotate(30deg);
			}
			100%{
				transform:rotate(0deg);
			}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

在这里插入图片描述

qq_张辰浩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
吃豆豆

吃豆豆代码纯用html和css3<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...
复制链接

扫一扫