简单圆球水波动。手写

最新推荐文章于 2024-01-11 21:35:09 发布

Thekingyu

最新推荐文章于 2024-01-11 21:35:09 发布

阅读量743

点赞数

分类专栏：前端样式

本文链接：https://blog.csdn.net/Thekingyu/article/details/78493265

版权

前端样式专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<script src="jquery-1.11.0.js" type="text/javascript"></script>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.nei {
				width: 400px;
				height: 400px;
				background: red;
				opacity: 0.2;
				border-radius: 150px;
				position: absolute;
				left: -100px;
				top: 57px;
				animation: wai 8s ease-in-out infinite;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				animation-timing-function: linear;
				-moz-animation-timing-function: linear;
				/* Firefox 4 */
				-webkit-animation-timing-function: linear;
				/* Safari 和 Chrome */
				-o-animation-timing-function: linear;
				/* Opera */
			}
			
			.wai {
				border: 1px solid #002A80;
				width: 140px;
				height: 140px;
				position: relative;
				left: 100px;
				top: 100px;
				border-radius: 100px;
				overflow: hidden;
				z-index: 100;
			}
			
			@keyframes wai {
				from {
					-webkit-transform: rotate(0deg);
					-ms-transform: rotate(0deg);
					transform: rotate(0deg);
				}
				to {
					-webkit-transform: rotate(360deg);
					-ms-transform: rotate(360deg);
					transform: rotate(360deg);
				}
			}
		</style>
	</head>

	<body>

		<div class="wai">
			<div class="nei">

			</div>
		</div>

	</body>

</html>


1

Thekingyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单圆球水波动。手写

* { margin: 0; padding: 0; } .nei { width: 400px; height: 400px; background: red; opacity: 0.2; border-radius: 150px; position: absolute; left: -100px;
复制链接

扫一扫