CSS图片旋转效果

最新推荐文章于 2024-08-03 00:35:31 发布

溯弥

最新推荐文章于 2024-08-03 00:35:31 发布

阅读量504

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/TBDBTUO/article/details/118310502

版权

效果图片:
在这里插入图片描述

蓝色正方形和粉色正方形，各想顺时针和逆时针旋转。
该效果主要通过设置CSS3动画来实现。
animation属性中configure-clockwise的命名
在这里插入图片描述

CSS3动画设置图片旋转度数；
完整代码：
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>效果</title>
</head>
	<style>
		body {
		  min-height: 100vh;
		  background-color: #37474f;
		  display: flex;
		  justify-content: space-between;
		  flex-wrap: wrap;
		  align-items: flex-start;
		}
		.spinner-box {
		  width: 300px;
		  height: 300px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  background-color: transparent;
		}
		.configure-border-1 {
		  width: 115px;
		  height: 115px;
		  padding: 3px;
		  position: absolute;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  background: #ffab91;
		  animation: configure-clockwise 3s ease-in-out 0s infinite alternate;
		}
		.configure-border-2 {
		  width: 115px;
		  height: 115px;
		  padding: 3px;
		  left: -115px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  background: rgb(63,249,220);
		  transform: rotate(45deg);
		  animation: configure-xclockwise 3s ease-in-out 0s infinite alternate;
		}
		@keyframes configure-xclockwise {
		  0% {
			transform: rotate(45deg);
		  }
		  25% {
			transform: rotate(-45deg);
		  }
		  50% {
			transform: rotate(-135deg);
		  }
		  75% {
			transform: rotate(-215deg);
		  }
		  100% {
			transform: rotate(-305deg);
		  }
		}
		@keyframes configure-clockwise {
		  0% {
			transform: rotate(0);
		  }
		  25% {
			transform: rotate(90deg);
		  }
		  50% {
			transform: rotate(180deg);
		  }
		  75% {
			transform: rotate(270deg);
		  }
		  100% {
			transform: rotate(359deg);
		  }
		}
	</style>
<body>
	<!-- 效果二 -->
<div class="spinner-box">
  <div class="configure-border-1">  
    <div class="configure-core"></div>
  </div>  
  <div class="configure-border-2">
    <div class="configure-core"></div>
  </div> 
</div>
</body>
</html>