js 点击刷新的按钮执行动画 (转一圈)

最新推荐文章于 2024-04-11 14:32:36 发布
最新推荐文章于 2024-04-11 14:32:36 发布
阅读量1.9k 收藏 4
点赞数 1
文章标签： css js css3 jquery html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/great_1996/article/details/110257095
版权

css 代码:

/* 刷新按钮 */

.refresh {
    width: 32px;
    height: 32px;
    position: relative;
    top: -2px;
}

/* 刷新动画 */

  @-webkit-keyframes rotation {

from {
    -webkit-transform: rotate(0deg);
}

to {
    -webkit-transform: rotate(360deg);
}

  }

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
}

}

html 代码:

<img class="refresh" src="./img/refresh.png" alt="">

js 代码:




                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  听胡说
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
利用原生JavaScript--实现小球无限转圈

				
			

			

				

					weixin_69437574的博客
				

				

					06-11
					
					917
					
				

			

		

		

			
				
利用原生js实现小球无限转圈

			
		

	



                

              
                



	

		

			

				
					
Vue之动画的实现

				
			

			

				

					知识应该共享，创造才应收费
				

				

					03-19
					
					3361
					
				

			

		

		

			
				
当我们的UI界面显示出来后，需要和用户进行交互，即用户点击某个控件，比如是一个按钮，需要跳转到另一个界面的时候，如果直接跳转到另一个界面，功能是实现了，但是未免有些生硬，因为用户体验不是很好，这时就需要动画的润色了，添加一个好的转场动画能让用户使用起来拥有更好的体验，并且动画还可以让一些耗时的任务看起来不那么“耗时”，比如当用户下载一个文件时，假如没有动画，系统一直卡在下载当那个页面（其实系统没有卡住，只是在下载，用户以为卡住了），那么下载完文件后就会直接显示一个下载完成的界面给到用户，用户是很蒙的。但是使

			
		

	



                


  
              

                


	

		

			

				
					
刷新按钮转圈动画效果

				
			

			

				

					qq_42485707的博客
				

				

					03-13
					
					508
					
				

			

		

		

			
				
刷新按钮转圈动画效果。

			
		

	





	

		

			

				
					
js刷新当前页面的5种方式

					
最新发布

				
			

			

				

					qq_43572283的博客
				

				

					04-11
					
					964
					
				

			

		

		

			
				
该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。当调用 location.reload() 方法时， aspx页面此时在服务端内存里已经存在， 因此必定是 IsPostback 的。如果有这种应用： 需要重新加载该页面，也就是说期望页面能够在服务端重新被创建，期望是 Not IsPostback 的。此方法类似客户端点F5刷新页面，所以页面method="post"时，会出现"网页过期"的提示。

			
		

	



		

			
		



	

		

			

				
					
动态等待转圈效果（HTML、CSS、JS）

				
			

			

				

					WaterArticle
				

				

					05-18
					
					2558
					
				

			

		

		

			
				
动态等待转圈效果

			
		

	





	

		

			

				
					
JS动画效果实现

				
			

			

				

					m0_72144544的博客
				

				

					07-05
					
					461
					
				

			

		

		

			
				
用js核心代码去实现定时器的实现。首先要用css制作一个爱心。然后去实现开始和停止按钮。最后实现的效果是这样的。用js去实现动画效果。然后用js去循环实现。

			
		

	





	

		

			

				
					
CSS3和js炫酷点击按钮3D翻转动画特效

				
			

			

				

					12-13
				

			

		

		

			
				
flipside是一款使用css3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。该点击按钮特效在按钮不同方向的边部点击时，产生的过渡动画特效是不一样的。

			
		

	





	

		

			

				
					
JS CSS3点击按钮3D翻转动画.zip

				
			

			

				

					07-05
				

			

		

		

			
				
JS CSS3点击按钮3D翻转动画是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。

			
		

	





	

		

			

				
					
js css3提交按钮点击动画特效.zip

				
			

			

				

					07-11
				

			

		

		

			
				
代码片段：      	<meta name="viewport" content="width=device-width, initial-scale=1">  <link href=...link rel='stylesheet prefetch' href='css/ionicons.min.css'>...

			
		

	





	

		

			

				
					
swfobject.js代替JavaScript实现点击按钮显示Flash动画

				
			

			

				

					05-12
				

			

		

		

			
				
内容索引:脚本资源,Ajax/JavaScript,swfobject　本例子是使用swfobject.js代替JavaScript实现点击按钮显示Flash动画，swfobject的一个综合应用示例，实际上使用swfobject还可完成很多不可思议的效果，比如透明、去...

			
		

	





	

		

			

				
					
JS+CSS3点击按钮3D翻转动画.zip

				
			

			

				

					11-24
				

			

		

		

			
				
JS+CSS3点击按钮3D翻转动画.zip

			
		

	





	

		

			

				
					
rotate做单帧图片旋转类似刷新图标

				
			

			

				

					01-24
				

			

		

		

			
				
rotate做单帧图片旋转类似刷新图标

			
		

	





	

		

			

				
					
js的animate函数

					
热门推荐

				
			

			

				

					susuzhe
				

				

					03-15
					
					2万+
					
				

			

		

		

			
				
/*
 	动画函数：
 		dom:要运动的节点对象
 		o:{属性：目标值，属性：目标值....}  (透明度使用属性：opacity:100) 透明度的值是0-100；  里面的opacity 和  filter会自动做转换。
 		time:切换的频率，表示运动的快慢
 		fn：回调函数，在运动执行完毕后执行。
 */
                             funct

			
		

	





	

		

			

				
					
js等待加载转圈圈效果

				
			

			

				

					xzhchha的专栏
				

				

					07-13
					
					9987
					
				

			

		

		

			
				
首先引入js文件，jquery.js和spin.jscss文件如下： &lt;style type="text/css"&gt;                #foo {            position: fixed;            left: 0;            top: 0;            _position: absolute;            w...

			
		

	





	

		

			

				
					
JavaScript——下拉刷新

				
			

			

				

					Chenbaby_的博客
				

				

					12-01
					
					419
					
				

			

		

		

			
				
*{
margin: 0px;
padding: 0px;
}
h1{
text-align: center;
}
li{
width: 100%;
height: 100px;
border: 1px solid pink;
list-style: none;
}
button{
width: 100%;
height: 50px;
}



朋友圈



			
		

	





	

		

			

				
					
refresh图标旋转css控制

				
			

			

				

					weixin_41094290的博客
				

				

					03-14
					
					366
					
				

			

		

		

			
				
在接口调用数据时，控制css类转换，会没有效果，同时无法把握图片旋转结束后，刷新数据，会有冲突情况。①@animationend使用，实现图标旋转停止后的控制，否则无法重复refresh旋转的过程。img点击后旋转，同时触发数据更新，旋转停止后，可以重复refresh操作。②rotating样式类，此处为图片旋转的控制实现。

			
		

	





	

		

			

				
					
JS&JQuery CSS实现点击一个元素，为另一元素设置rotateX动画，每次点击旋转一次

				
			

			

				

					Wei.R的博客
				

				

					06-14
					
					1450
					
				

			

		

		

			
				
JS&JQuery实现点击一个元素，为另一元素设置rotateX动画引言代码实现
引言
css的transition可以为元素设置响应的过渡动画，可以设置transform属性，来实现旋转的效果，在做项目时需要实现一个按钮在点击时，另一个元素翻转360°的效果。查阅多种资料最后实现了如下的效果。

代码实现
首先为要旋转的元素设置了transition属性
#target{
	transition: all 0.8s;
}

纯js实现：
document.querySelector("#butto

			
		

	





	

		

			

				
					
JS简易下拉刷新动效

				
			

			

				

					星云
				

				

					10-24
					
					680
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #body {
         

			
		

	





	

		

			

				
					
动画 -- 点击按钮 -- 顺时针旋转一圈

				
			

			

				

					05-20
				

			

		

		

			
				
好的，实现这个动画可以使用CSS3的动画属性来完成。首先在HTML中创建一个按钮元素，然后使用CSS样式设置按钮的外观和位置。

接下来，在CSS中使用@keyframes规则定义一个动画，通过将按钮元素旋转360度来实现顺时针旋转一圈的效果。最后，将动画应用到按钮元素上。

以下是示例代码：

HTML:

```
<button>点击旋转</button>
```

CSS:

```
button {
  width: 100px;
  height: 50px;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

button.clicked {
  animation: rotate 1s linear;
}
```

JS:

```
var button = document.querySelector('button');
button.addEventListener('click', function() {
  button.classList.add('clicked');
  setTimeout(function() {
    button.classList.remove('clicked');
  }, 1000);
});
```

当用户点击按钮时，JS代码会给按钮元素添加一个名为“clicked”的CSS类，这将触发旋转动画。动画持续时间为1秒，完成后JS代码会将“clicked”类从按钮元素中移除，以便下次单击时可以再次触发动画。

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值