CSS——滚动加旋转

最新推荐文章于 2024-04-22 17:42:18 发布

spfLinux

最新推荐文章于 2024-04-22 17:42:18 发布

阅读量694

点赞数 1

分类专栏： css 文章标签： CSS 滚动+旋转

本文链接：https://blog.csdn.net/spfLinux/article/details/78533572

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#ds {
			position: relative;
			top: 80px;
			margin-left: 80px;
			width: 200px;
			height: 200px;
			/* border: 1px solid red;  */
			animation-name: headRoll;
			 animation-duration: 30s;
			 animation-fill-mode: forwards;
		}
		 @keyframes headRoll {
			0% {
				margin-left: 0px;
				transform:rotate(0deg) ;
			}
			/* 25% {
				opacity: 0;
			}
			50% {
				opacity: 1;
			} */
			100% {
				margin-left: 60%;
				transform:rotate(360deg);
			}
		} 
		#d1, #d2, #d3, #d4 {
			position: relative;
			left: 75px;
			width: 50px;
			height: 50px;
			border: 1px solid red;
			transform: rotate(45deg);
		}
	
		#d1 {
			margin-top: 20px;
		}
		 @keyframes Roll {
			0% {
				transform:rotate(0deg) ;
			}
			100% {
				transform:rotate(360deg);
			}
		}
		#d2 {
			position: relative;
			margin-left: -25%;
		}
		#d3 {
			position: relative;
		}
		#d4 {
			position: relative;
			top: -100px;
			margin-left: 25%;
		}
		#d1_d, #d2_d, #d3_d, #d4_d {
			transform:rotate(-45deg) ;
			width: 30px;
			height: 30px;
			text-align: center;
			/* border: 1px solid red; */
			animation-name: aRoll;
			animation-duration: 30s;
			animation-fill-mode: forwards;
		}
		#d1_d {
			margin-top: 8.5px;
			margin-left: 8.5px;
		}
		#d2_d {
			margin-top: 8.5px;
			margin-left: 8.5px;
		}
		#d3_d {
			margin-top: 8.5px;
			margin-left: 8.5px;
		}
		#d4_d {
			margin-top: 8.5px;
			margin-left: 8.5px;
		}
		@keyframes aRoll {
			0% {
				transform:rotate(-45deg) ;
			}
		
			100% {
				transform:rotate(-405deg);
			}
		} 
		.ds_span {
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div id="ds">
		<div id="d1"><div id="d1_d"><span class="ds_span">1</span></div></div>
		<div id="d2"><div id="d2_d"><span class="ds_span">2</span></div></div>
		<div id="d3"><div id="d3_d"><span class="ds_span">3</span></div></div>
		<div id="d4"><div id="d4_d"><span class="ds_span">4</span></div></div>
	</div>
</body>
</html>

spfLinux

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——滚动加旋转

Document #ds { position: relative; top: 80px; margin-left: 80px; width: 200px; height: 200px; /* border: 1px solid red; */ animation-name: headRoll; animation-duration: 3
复制链接

扫一扫