css3实现超好看的旋转动画

最新推荐文章于 2025-04-29 10:20:21 发布

Leisure_Time

最新推荐文章于 2025-04-29 10:20:21 发布

阅读量622

点赞数

分类专栏： css3 JS 文章标签： css3 html5 animation

本文链接：https://blog.youkuaiyun.com/weixin_45615791/article/details/104025111

版权

JS 同时被 2 个专栏收录

43 篇文章

订阅专栏

css3

5 篇文章

订阅专栏

核心代码border-radius，以及animation:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转啊转</title>
		<style type="text/css">
			html,body,div,a,p,span,ul,li {
				padding: 0;
				margin: 0;
				list-style: none;
				text-decoration: none;
				font-family: monospace;
			}
			.center {
				width: 500px;
				height: 500px;
				margin: 50px auto;
				line-height: 500px;
				text-align: center;
				position: relative;
			}
			.moveing1, .moveing2, .moveing3 {
				position: absolute;
				width: 300px;
				height: 300px;
				top: 20%;
				left: 20%;
				border: 1px solid #eee;
				background-color: rgba(10, 120, 120, .6);
				z-index: -1;
				
			}
			.moveing1 {
				border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
				animation: anim 4s linear infinite;
			}
			.moveing2 {
				border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
				animation: anim2 3s linear infinite;
			}
			.moveing3 {
				border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
				animation: anim 4s linear infinite;
			}
			.text {
				color: white;
			}
			@keyframes anim{
				from{
					transform: rotate(0deg);
				}
				to{
					transform: rotate(360deg);
				}
			}
			@keyframes anim2{
				from{
					transform: rotate(360deg);
				}
				to{
					transform: rotate(0deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="center">
			<span class="moveing1"></span>
			<span class="moveing2"></span>
			<span class="moveing3"></span>
			<div class="text">
				旋转的球
			</div>
		</div>
	</body>
</html>

效果图：