css loading 图片旋转动效

花儿开富贵花

已于 2023-03-24 16:13:59 修改

阅读量934

点赞数 1

文章标签： css 动画 css3

于 2022-06-20 15:33:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43843679/article/details/125373839

版权

在这里插入图片描述

  <view class="loading-lay">
    <image src="../../images/icon_loading.png"></image>
  </view>
  
  .loading-lay {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-lay image{
  width: 50px;
  height: 50px;
  animation: turn 1s linear infinite;
}
/* 
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
*/
@keyframes turn{
  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);}
}