12个纯css loading效果，值得收藏

岩石教程

于 2024-08-19 18:43:19 发布

阅读量1.6k

点赞数 28

文章标签： css css3 前端 html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_43952318/article/details/141332304

版权

实际体验效果与源码地址

效果一

在这里插入图片描述

源码

<style>
.spinner {
  width: 40px;
  height: 40px;
  background-color: #a855f7;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
</style>
<div class="spinner"></div>

实际体验及源码

效果二

在这里插入图片描述

实际体验及源码

效果三

在这里插入图片描述

实际体验及源码

效果四

在这里插入图片描述

实际体验及源码

效果五

在这里插入图片描述

实际体验及源码

效果六

在这里插入图片描述

实际体验及源码

效果七

在这里插入图片描述

实际体验及源码

效果八

在这里插入图片描述

实际体验及源码

效果九

实际体验及源码

效果十

实际体验及源码

效果十一

实际体验及源码

效果十二

实际体验及源码

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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