动画css ---无限旋转

已于 2022-04-18 15:34:17 修改
阅读量5.3w 收藏 57
点赞数 42
分类专栏： css 文章标签： html5
于 2018-08-11 20:39:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongsdh/article/details/81590696
版权

前言：

      接口返回数据，处理数据后，需要根据状态显示对应的图片

      如果是状态为运行中，图片对应的icon图片需要沿中心点旋转起来（加一个带有旋转的class类）

图片素材 

<!DOCTYPE html>
<html lang="zh">
 
	<head>
		<meta charset="UTF-8" />
		<title>旋转</title>
		<style>
			/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/
			@-webkit-keyframes changeright{       
		 
				0%{-webkit-transform:rotate(0deg);}
		 
				50%{-webkit-transform:rotate(180deg);}
		 
				100%{-webkit-transform:rotate(360deg);}
			}
			/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/
			@-webkit-keyframes changeleft{
		 
				0%{-webkit-transform:rotate(0deg);}
		 
				50%{-webkit-transform:rotate(-180deg);}
		 
				100%{-webkit-transform:rotate(-360deg);}
			}
			
			
			
			/*-------------------------*/
			.logo1 img{
				-webkit-animation:changeright 6s linear infinite;
			}
			
			/*-------------------------*/
			.logo2 img{
				-webkit-animation:changeleft 6s linear infinite;
			}
			
			
			
			/*---------自定义普通旋转类（就是引用刚才自定义changeright的动画）------*/
		    .imgrotate_common{
		    	-webkit-animation:changeright 6s linear infinite;
		    }
		    /*---------自定义快速旋转（就是引用刚才自定义changeright的动画）------*/
		    .imgrotate_rotate{
		    	-webkit-animation:changeright 3s linear infinite;
		    }
		    .box span{
		    	display: inline-block;
				vertical-align: middle;	
				margin: 0 12px;	    		
		    }
		</style>
	</head>
 
	<body>
		<div class="logo1">
			<img src="logo_logo.png" alt="" />
			<img src="logo_logo.png" alt="" />
			<img src="logo_logo.png" alt="" />
		</div>
		<hr />
		<div class="logo2">
			<img src="logo_logo.png" alt="" />
			<img src="logo_logo.png" alt="" />
			<img src="logo_logo.png" alt="" />
		</div>
		<hr />
		
		<h3>(模拟接口返回数据)根据状态显示不同动画效果</h3>
		<div class="box">
			<span></span><span><img src=""/></span>
		</div>
		
		
		<script src="jquery.min.js"></script>
		<script>
//			适用场景----根据状态显示不同类型
//			假装是接口返回的数据
			var arr = [
						{choose:"禁止",type:0},
						{choose:"普通",type:2},
						{choose:"快速",type:3}
			           ]
			var shtml='';
			if(arr && arr.length>0){
			    for(var i=0,len=arr.length;i<len;i++){
			    	if(arr[i].type == 2){
			    		shtml+='<span>'+arr[i].choose+'</span><span><img class="imgrotate_common" src="logo_logo.png"/></span>';
			    	}else if(arr[i].type == 3){
			    		shtml+='<span>'+arr[i].choose+'</span><span><img class="imgrotate_rotate" src="logo_logo.png"/></span>';
			    	}else{
			    		shtml+='<span>'+arr[i].choose+'</span><span><img src="logo_logo.png"/></span>';
			    	}
			    }
			    $('.box').html(shtml);
			}
		</script>
	</body>
</html>

dongsdh
关注
  • 42
    点赞
  • 踩
  • 57
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
纯css图片自动旋转动画
猿学
08-30 7148
纯css 图片自动旋转动画。
CSS实现动画效果-角色立绘
08-22
此外，CSS3还提供了许多预定义的动画效果，如`rotate`（旋转）、`bounce`（弹跳）和`pulse`（脉冲），可以直接应用于元素上，简化动画制作流程。 在角色立绘的场景中，可能还需要考虑动画的连贯性和流畅性。使用`...
CSS基础学习——动画
热门推荐
qq_41890177的博客
08-26 1万+
一、CSS3 2D变形（利用Transfrom方法） 1、rotate（angle） 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px
CSS3新特性之animation动画、3D转换(含两面翻转的盒子案例、swiper插件)、浏览器私有前缀
Bulut0907
02-19 1883
近大远小物体后面遮挡不可见x轴：水平向右。注意： x右边是正值，左边是负值y轴：垂直向下。注意： y下面是正值，上面是负值z轴：垂直屏幕。注意： 往外面是正值，往里面是负值。
CSS动画实现让元素一直旋转
最新发布
HWL5679的博客
06-20 801
在CSS中，使用@keyframes动画和transform: rotate()属性来创建一个无限循环的旋转动画。
CSS - 元素旋转动画（360度转圈）
王佳斌
11-26 1万+
效果图 代码 @keyframes rotate { 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } 使用 /* turn
如何用css实现旋转动画
weixin_42609225的博客
01-06 984
要使用 CSS 实现旋转动画，需要使用 transform 属性的 rotate 函数。该函数可以使元素沿着一个指定的轴旋转一定的角度。 你可以在元素的样式中添加如下代码： transform: rotate(45deg); ...
基于css-doodle.js螺旋动画特效特效代码
03-20
这个库的主要优点在于其灵活性和可编程性，它将CSS的声明式语法与JavaScript的命令式编程相结合，为前端开发者提供了无限可能。 二、螺旋动画的实现原理 螺旋动画是通过CSS3的transform属性来实现的。`transform`...
animate.css-uni-app动画样式文件
11-04
这些效果包括但不限于淡入淡出、滑动、旋转、放大缩小、弹跳等，极大地简化了开发者在项目中添加动画的流程。库中的每个动画都有一套独特的参数，比如动画时长、延迟、方向等，可以通过调整这些参数来实现个性化的...
常见css动画-解压直用
09-18
CSS动画是CSS3的一个重要特性，它允许开发者创建出丰富的视觉效果，如平滑过渡、旋转、缩放等动态效果，从而提升用户体验。"常见css动画-解压直用"这个资源包可能包含了一系列预设好的CSS动画效果，方便开发者直接...
HTML-CSS-动画项目
02-16
`infinite`关键字意味着动画将无限循环。 在实际项目中，我们可能还会接触到CSS3的新特性，如转换（`transform`）和过渡（`transition`）。转换可以改变元素的位置、大小、旋转或倾斜，而过渡则是元素在两种状态间...
你还不知道css的旋转效果怎么实现？来这里看看吧
Wod_7的博客
05-22 1万+
删除 重试 复制 旋转效果是CSS中最基础而且最常用的效果之一。它在设计中拥有着广泛的应用，可以用于改变图标、旋转图片、达到复杂的动画效果等等。在这篇文章中，我们将深入讨论如何在CSS中实现旋转效果，从旋转图标到3D旋转，让我们开始吧！
css实现加载旋转动画
有问题可关注公众号：前端研究院 后台输入问题回复
05-24 333
【代码】css实现加载旋转动画。
关于css制作太极旋转动画
qq_75222206的博客
07-04 762
CSS（层叠样式表）是一种用于描述和控制网页外观和样式的标记语言。它与HTML（超文本标记语言）一起使用，用于将网页内容从其呈现方式（如颜色、字体、布局等）分离出来。CSS通过选择器（selector）和声明块（declaration block）的组合来定义样式规则。选择器指定了要应用样式的HTML元素，而声明块定义了要应用的具体样式属性和对应的值。CSS的特点包括：分离关注点：通过将样式与HTML分离，使得网页的结构和内容与设计和样式分开，提高了代码的可维护性和复用性。层叠性。
css的rotate3d实现炫酷的圆环转动动画
苏苏就是小苏苏的博客
08-28 1万+
css的rotate3d实现炫酷的圆环转动动画
css无限旋转
weixin_52923266的博客
01-30 1238
css无限旋转主要用到了动画+2D转换transform: rotate。
css添加旋转动画
weixin_42611310的博客
12-21 437
要在 CSS 中添加旋转动画，你需要使用 @keyframes 规则来定义动画，然后使用 animation 属性来将动画应用于元素。 例如，假设你想要旋转一个图像 360 度，你可以这样做： @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }...
【Web前端开发基础】CSS3之空间转换和动画
m0_62611367的博客
01-24 1748
空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同空间转换也叫3D转换属性：transform2D转换能够改变元素X轴和Y轴方向特性，3D转换还能改变Z轴方向特性，并且可以通过视角设置透视关系，使元素具有透视效果动画是CSS3中具有颠覆性的特征之一，有通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相较于过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
旋转、缩放、移动：掌握CSS Transform动画的终极指南！
云端源想的博客
04-11 2186
CSS变形动画是利用CSS3的transform属性创建的动画效果。它可以使元素旋转、缩放、倾斜甚至翻转，让静态的网页元素动起来，为用户带来更加丰富的交互体验。
css顺时针无限旋转动画
01-12
以下是一个使用CSS实现顺时针无限旋转动画的例子： ```html <!DOCTYPE html> <html> <head> <style> .box { width: 100px; height: 100px; background-color: red; animation: rotate 3s infinite linear; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="box"></div> </body> </html> ``` 这个例子中，我们创建了一个名为"box"的div元素，并给它设置了宽度、高度和背景颜色。然后，我们使用`@keyframes`关键字定义了一个名为"rotate"的动画，该动画从0%到100%的时间段内，将元素按顺时针方向旋转360度。最后，我们将这个动画应用到"box"元素上，使其无限循环播放。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值