.loading {margin: 100px;
    width: 3px; height:3px;
    border-radius: 100%;                      /* 圆角 */
    box-shadow: 0 -10px 0 1px #333,           /* 上, 1px 扩展 */
                10px 0px #333,                /* 右 */    
                0 10px #333,                  /* 下 */
                -10px 0 #333,                 /* 左 */
                              
                -7px -7px 0 .5px #333,        /* 左上, 0.5px扩展 */
                7px -7px 0 1.5px #333,        /* 右上, 1.5px扩展 */                    
                7px 7px #333,                 /* 右下 */
                -7px 7px #333;                /* 左下 */
}
.spin {
    animation: spin 1s steps(8) infinite;
}
@keyframes spin {
    from {transform: rotate(0deg);}
      to {transform: rotate(360deg);}
}

<div class="loading spin"></div>

纯css loading动效的更多相关文章

  1. 一个绚丽的loading动效分析与实现!

    最终效果如下 从效果上看,我们需要考虑以下几个问题: 1.叶子的随机产生: 2.叶子随着一条正余弦曲线移动: 3.叶子在移动的时候旋转,旋转方向随机,正时针或逆时针: 4.叶子遇到进度条,似乎是融合进 ...

  2. 用AE如何制作如下三个loading动效,

    在本期象牙绘UED团队分享当中,我们将详细演示用AE如何制作如下三个loading动效, 其中涉及到AE表达式的应用.值曲线调整.速度曲线编辑等知识. 对于初学者来说可能信息量略大,希望通过是视频教程 ...

  3. Android 一个绚丽的loading动效分析与实现!

    http://blog.csdn.net/tianjian4592/article/details/44538605 前两天我们这边的头儿给我说,有个 gif 动效很不错,可以考虑用来做项目里的loa ...

  4. android动效开篇

    大神博客:http://blog.csdn.net/tianjian4592/article/details/44155147 在现在的Android App开发中,动效越来越受到产品和设计师同学的重 ...

  5. 纯CSS实现的很酷的卡通肖像和眨眼动效

    产品设计技术趋势 当前产品设计和开发的一个主要技术趋势除了响应式外, 还有尽量使用CSS/HTML5技术替代图片,这样能够获得非常好的设计扩展性和页面訪问性能. CSS卡通实例 以下就是一个英国WEB ...

  6. CSS动效集锦,视觉魔法的碰撞与融合(二)

    引言 长久以来,我认识到.CSS,是存在极限的.正如曾经替你扛下一切的那个男人,也总有他眼含热泪地拼上一切,却也无法帮你做到的事情,他只能困窘地让你看到他的无能为力,怅然若失. 然后和曾经他成长的时代 ...

  7. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  8. 纯css去实现loading动画效果图

    当项目中加载内容慢的的时候,需要显示一个loading动画效果图 之前我们使用的是一圈点点旋转的效果,现在设计修改为,如下gif图片效果-------------------------------- ...

  9. 拒绝枯燥,有意思的 Loading 页面动效设计

    互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户下载文件过大,甚至是 ...

随机推荐

  1. 初学版本控制更新Version control

    概述: 在学习计算机软件工程中,修订控制是跟踪和控制源代码更改的任何类型的实践. 对于软件开发人员有时会使用修订控制软件来维护文档和配置文件以及源代码. 当团队设计,开发和部署软件时,通常会将同一软件 ...

  2. Docker的网络类型和固定IP设置

    Docker的网络机制 Docker的网络有三种类型(driver): bridge, host 和 null. birdge: 就如同桥接的switch/hub, 使用bridge网络的contai ...

  3. Dynamics 365 CRM 添加自定义按钮

    在添加自定义按钮之前,我们需要下载这个工具 RibbonWorkbench, 它是专门针对自定义命令栏和Ribbon区域. 下载之后是一个zip压缩包. 怎样安装RibbonWorkbench: Se ...

  4. forward reference前向引用,gloal values and local values全局变量和局部变量,recursive function递归函数

    1.全局变量与局部变量练习 1 # -*- coding: UTF-8 -*- 2 def bar(): 3 print('from bar') 4 def foo(): 5 print('from ...

  5. Azure Redis Cache (5) Redis Cache Cluster集群模式

    <Windows Azure Platform 系列文章目录> Redis Cluster 3.0之后的版本,已经支持Redis Cluster集群模式,Redis Cluster采用无中 ...

  6. linux git pull/push时提示输入账号密码之免除设置

    1.先cd到根目录,执行git config --global credential.helper store命令 [root@iZ25mi9h7ayZ ~]# git config --global ...

  7. Scrapy学习篇(十)之下载器中间件(Downloader Middleware)

    下载器中间件是介于Scrapy的request/response处理的钩子框架,是用于全局修改Scrapy request和response的一个轻量.底层的系统. 激活Downloader Midd ...

  8. 20165312 2017-2018-2 《JAVA程序设计》第3周学习总结

    20165312 2017-2018-2 <JAVA程序设计>第3周学习总结 一.第四章知识点总结 1.类 类的实现包括两个部分:类声明和类体. class是关键字,用来定义类. clas ...

  9. Linux集群之keepalive+Nginx

    集群从功能实现上分高可用和负载均衡: 高可用集群,即“HA"集群,也常称作“双机热备”. 当提供服务的机器宕机,备胎将接替继续提供服务: 实现高可用的开源软件有:heartbeat.keep ...

  10. 04-体验一下apache组织封装的BeanUtil工具包

    apache 自己为程序员们封装了一个专门用于处理的工具类,其功能有(数据类型会自动转成与JavaBean相关的) map转javabean javabean转map javabean对象复制 获取j ...