博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3实现的几个小loading效果
阅读量:5329 次
发布时间:2019-06-14

本文共 1508 字,大约阅读时间需要 5 分钟。

    昨晚上闲的没事突然想做几个小loading效果,下面是昨晚上做的几个小案例,分享给大家

    1.水波loading:这个loading是我觉得非常简单,但是看上去的效果却非常不错的一个小loading

     这个是效果图片

    下面我直接把代码放上来,大家需要的可以直接拉走

 

               核心思想:(旋转,以及overflow:hidden属性),可以把代码中的overflow属性注释掉,保准你看一眼明白了,看不明白回来找我,我对你负责

 

    
Document

 

     

  2.普通的圆形loading    这个也很简单  没啥好说的,直接上代码了

  

    
Document

 

 

  3.圆形转圈loading

  思想(把小圆用定位排成圆形,再给每个上添加动画,用delay控制延迟事件即可)

  

            

 

     4.交叉效果

    这个稍微复杂一点,其实只要捋明白思路,也挺简单的(PS:大家可以把动画挨个取消试试,你就会发现好像并不是很难)

    

    

    

    5.圆形正方形切换小loading

  这个是真的简单!!!!!

  

loading-04

 

好啦,今天先分享这些,以后再有loading我会再补充上来的,嗷,对了,我懒得没做兼容,要是再某些浏览器不能运行,加一下浏览器前缀就好啦

    

转载于:https://www.cnblogs.com/suihang/p/9712386.html

你可能感兴趣的文章
我到底要选择一种什么样的生活方式,度过这一辈子呢:人生自由与职业发展方向(下)...
查看>>
poj 题目分类
查看>>
windows 安装yaml支持和pytest支持等
查看>>
读书笔记:季羡林关于如何做研究学问的心得
查看>>
面向对象的优点
查看>>
套接口和I/O通信
查看>>
阿里巴巴面试之利用两个int值实现读写锁
查看>>
浅谈性能测试
查看>>
Winform 菜单和工具栏控件
查看>>
CDH版本大数据集群下搭建的Hue详细启动步骤(图文详解)
查看>>
巧用Win+R
查看>>
浅析原生js模仿addclass和removeclass
查看>>
Python中的greenlet包实现并发编程的入门教程
查看>>
java中遍历属性字段及值(常见方法)
查看>>
深入理解jQuery框架-框架结构
查看>>
YUI3自动加载树实现
查看>>
python知识思维导图
查看>>
当心JavaScript奇葩的逗号表达式
查看>>
App Store最新审核指南(2015年3月更新版)
查看>>
织梦MIP文章内容页图片适配百度MIP规范
查看>>