HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>loading</title>

</head>

<body>

    <div>

        <ul>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

        <p>loading</p>

    </div>

</body>

</html>

CSS:

    <style>

        * { margin:; padding:; list-style: none; }

        div { width: 85px; height: 70px; margin: 50px auto; }

        ul { width: 85px; height: 50px; }

        li { width: 8px; height: 50px; background-color: green; float: left; margin-left: 5px; animation: loading 1.2s ease-in-out infinite; }

        p { text-align: center; vertical-align: middle; }

        li:nth-of-type(1) {

            animation-delay: -1.1s;

        }

        li:nth-of-type(2) {

            animation-delay: -1s;

        }

        li:nth-of-type(3) {

            animation-delay: -0.9s;

        }

        li:nth-of-type(4) {

            animation-delay: -0.8s;

        }

        li:nth-of-type(5) {

            animation-delay: -0.7s;

        }

        li:nth-of-type(6) {

            animation-delay: -0.6s;

        }

        @keyframes loading {

            0%,100% { transform: scaleY(1); }

            50% { transform: scale(.4); }

        }

    </style>

HTML:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div>

            <div></div>

            <img src="img/bg.jpg" alt="">

        </div>

    </body>

</html>

css:

        <style type="text/css">

            div { width: 200px; height: 200px; border-radius: 50%; position: relative; margin: 100px auto; background-color: black; }

            div > * { top:; right:; bottom:; left:; margin: auto; }

            div > div { width: 95%; height: 95%; border: 5px #333     solid; border-radius: 50%; border-top-color: #eee; background-size: 100%; transform: rotateZ(0deg); position: absolute; }

            img { width: 95%; height: 95%; border-radius: 50%; position: absolute; opacity:; }

            div:hover div { animation: rotate 1s linear infinite; }

            div:hover img { opacity: .6; }

            @keyframes rotate {

                0% { transform: rotateZ(0deg); }

                25% { transform: rotateZ(90deg); }

                50% { transform: rotateZ(180deg); }

                75% { transform: rotateZ(270deg); }

                100% { transform: rotateZ(360deg); }

            }

        </style>

【CSS3】loading动画的更多相关文章

  1. 简单的CSS3 Loading动画

    最终效果如图一,gif图片稍微有点卡顿,事实上代码在浏览器里执行得很流畅.这里面用到的css3技术非常简单,分别是border-radius.伪元素.css3关键帧以及animation动画. 首先整 ...

  2. css3 loading动画 三个省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

  4. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  5. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  6. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  7. CSS3效果：animate实现点点点loading动画效果（二）

    box-shadow实现的打点效果 简介 box-shadow理论上可以生成任意的图形效果,当然也就可以实现点点点的loading效果了. 实现原理 html代码,首先需要写如下html代码以及cla ...

  8. 10个样式各异的CSS3 Loading加载动画

    前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...

  9. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  10. 10种CSS3实现的loading动画，挑一个走吧？

    这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...

随机推荐

  1. Vue--系统指令(基础)

    Vue概念:vue是mvvm模式的,直接操作dom开销较大,先获取dom,修改里边的内容,但是用vue的话,直接视图和模型绑定,不管是视图的数据发生改变还是模型的数据发生改变,其都是关联的,不需要直接 ...

  2. CSS(中)篇

    1.1行高 行高属于文字的属性 行高=文字大小+上间距+下间距(默认行高=18px) 行高的作用: 设置文字垂直方向中有距离 文字垂直居中(行高=容器的高度) 影响行高的因素: 文字大小可以改变行高 ...

  3. Kibana将语言设置为中文

    6.7以后系统开始支持中文了,修改语言只需要添加一行配置即可. 设置方法 在kibana.yml配置文件中添加一行配置 i18n.locale: "zh-CN" 修改后重启,可以看 ...

  4. 【linux配置】虚拟机配置静态IP地址

    使用VMware配置虚拟机静态IP地址 一.安装好虚拟后在菜单栏选择编辑→ 虚拟网络编辑器,打开虚拟网络编辑器对话框,选择Vmnet8 Net网络连接方式,随意设置子网IP,点击NAT设置页面,查看子 ...

  5. 超线程（Hyper-Threading）

    运行方式 每个单位时间内,一个CPU只能处理一个线程(操作系统:thread),以这样的单位进行,如果想要在一单位时间内处理超过一个线程是不可能的,除非是有两个CPU的实体单元.双核心技术是将两个一样 ...

  6. Sass ＠at-root （1）

    在SassConf大会上,给我们传递了Sass3.3的新特性.这些新特性有很多意义,特别是@at-root指令,这让你的代码会得更佳清洁. 今天我们主要一起来了解Sass中的@at-root特性的使用 ...

  7. I / O流 类

    一.概述 1 基本概念 I/O就是Input/Output的简写,也就是输入/输出的含义. I/O流就是指像流水一样源源不断地进行读写的过程.   2 基本分类   根据读写数据的单元分为:字节流 和 ...

  8. 【软件安装】我喜欢的notepad插件

    1.文件管理器 explorer 2.16进制查看文件工具 HEX-Editor

  9. Hello World 之Spring Boot 调用图数据库Neo4j

    明日歌 [清]钱鹤滩 明日复明日,明日何其多! 我生待明日,万事成蹉跎 1. 图数据库Neo4j之爱的初体验 ----与君初相识,犹似故人归 在如今大数据(big data)横行的时代,传统的关系型数 ...

  10. 【JZOJ4869】【NOIP2016提高A组集训第9场11.7】平均数

    题目描述 数据范围 解法 二分答案. 对于一个答案mid,要求出区间平均数小于mid的个数ans. 给所有数减去mid,那么问题转化为求出所有区间和为负数的个数. 对于一个区间[l,r],如果sum[ ...