css实现引导箭头间歇晃动效果
vue 2021-11-17 16:19:33

 未命名.gif

 

XML/HTML Code复制内容到剪贴板
  1. <image class="cake" src="../../static/arrow.png" mode="widthFix"></image>  

 

 

CSS Code复制内容到剪贴板
  1. .cake{ width: 190rpx; animation:move 3s 0s infinite;-webkit-animation:move 3s 0s infinite;transform-origin:bottombottom;-webkit-transform-origin:bottombottom;}  
  2. @keyframes move  
  3. {  
  4.     0%, 65%{   
  5.       -webkit-transform:rotate(0deg);  
  6.       transform:rotate(0deg);  
  7.     }  
  8.     70% {    
  9.       -webkit-transform:rotate(6deg);  
  10.       transform:rotate(6deg);  
  11.     }  
  12.     75% {    
  13.       -webkit-transform:rotate(-6deg);  
  14.       transform:rotate(-6deg);  
  15.     }  
  16.     80% {    
  17.       -webkit-transform:rotate(6deg);  
  18.       transform:rotate(6deg);  
  19.     }  
  20.     85% {    
  21.       -webkit-transform:rotate(-6deg);  
  22.       transform:rotate(-6deg);  
  23.     }  
  24.     90% {    
  25.       -webkit-transform:rotate(6deg);  
  26.       transform:rotate(6deg);  
  27.     }  
  28.     95% {    
  29.       -webkit-transform:rotate(-6deg);  
  30.       transform:rotate(-6deg);  
  31.     }  
  32.     100% {    
  33.       -webkit-transform:rotate(0deg);  
  34.       transform:rotate(0deg);  
  35.     }  
  36. }  
  37.   
  38. @-webkit-keyframes move  
  39. {  
  40.     0%, 65%{   
  41.       -webkit-transform:rotate(0deg);  
  42.       transform:rotate(0deg);  
  43.     }  
  44.     70% {    
  45.       -webkit-transform:rotate(6deg);  
  46.       transform:rotate(6deg);  
  47.     }  
  48.     75% {    
  49.       -webkit-transform:rotate(-6deg);  
  50.       transform:rotate(-6deg);  
  51.     }  
  52.     80% {    
  53.       -webkit-transform:rotate(6deg);  
  54.       transform:rotate(6deg);  
  55.     }  
  56.     85% {    
  57.       -webkit-transform:rotate(-6deg);  
  58.       transform:rotate(-6deg);  
  59.     }  
  60.     90% {    
  61.       -webkit-transform:rotate(6deg);  
  62.       transform:rotate(6deg);  
  63.     }  
  64.     95% {    
  65.       -webkit-transform:rotate(-6deg);  
  66.       transform:rotate(-6deg);  
  67.     }  
  68.     100% {    
  69.       -webkit-transform:rotate(0deg);  
  70.       transform:rotate(0deg);  
  71.     }  
  72. }  

 

本文来自于：http://www.yoyo88.cn/study/vue/608.html

上一篇 vue实现仿淘宝详情页商品轮播效果
下一篇 vue安装less-loader由于版本过高的问题
相关的文章
Powered by yoyo苏ICP备15045725号