CSS3实现Loading动画特效

查看效果：
http://hovertree.com/texiao/css3/43/

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3 loading等待加载代码 - 何问起</title>

    <style>
        @keyframes move {
            from {
                transform: translate(0,50%);
            }

            to {
                transform: translate(0,850%);
            }
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            min-width: 325px;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            align-content: flex-start;
            background: #2a2a2a;
        }

        figure {
            margin: 30px;
            width: 250px;
            height: 250px;
            border-radius: 50%;
            position: relative;
            background: #1c1c1c;
        }

        section {
            width: 10%;
            height: 100%;
            position: absolute;
            left: 45%;
        }

            section:nth-child(2) {
                transform: rotate(22.5deg);
            }

            section:nth-child(3) {
                transform: rotate(45deg);
            }

            section:nth-child(4) {
                transform: rotate(67.5deg);
            }

            section:nth-child(5) {
                transform: rotate(90deg);
            }

            section:nth-child(6) {
                transform: rotate(112.5deg);
            }

            section:nth-child(7) {
                transform: rotate(135deg);
            }

            section:nth-child(8) {
                transform: rotate(157.5deg);
            }

        figure div {
            height: 10%;
            border-radius: 50%;
            background: dodgerblue;
            animation: move 1s ease-in-out infinite alternate;
        }

        figure:nth-child(1) > section:nth-child(1) > div {
            animation-delay: -0.1875s;
        }

        figure:nth-child(1) > section:nth-child(2) > div {
            animation-delay: -0.175s;
        }

        figure:nth-child(1) > section:nth-child(3) > div {
            animation-delay: -0.1625s;
        }

        figure:nth-child(1) > section:nth-child(4) > div {
            animation-delay: -0.15s;
        }

        figure:nth-child(1) > section:nth-child(5) > div {
            animation-delay: -0.9375s;
        }

        figure:nth-child(1) > section:nth-child(6) > div {
            animation-delay: -0.925s;
        }

        figure:nth-child(1) > section:nth-child(7) > div {
            animation-delay: -0.9125s;
        }

        figure:nth-child(1) > section:nth-child(8) > div {
            animation-delay: -0.9s;
        }

        figure:nth-child(2) > section:nth-child(1) > div {
            animation-delay: -0.875s;
        }

        figure:nth-child(2) > section:nth-child(2) > div {
            animation-delay: -0.75s;
        }

        figure:nth-child(2) > section:nth-child(3) > div {
            animation-delay: -0.625s;
        }

        figure:nth-child(2) > section:nth-child(4) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(2) > section:nth-child(5) > div {
            animation-delay: -0.375s;
        }

        figure:nth-child(2) > section:nth-child(6) > div {
            animation-delay: -0.25s;
        }

        figure:nth-child(2) > section:nth-child(7) > div {
            animation-delay: -0.125s;
        }

        figure:nth-child(3) > section:nth-child(1) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(3) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(5) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(3) > section:nth-child(7) > div {
            animation-delay: -0.5s;
        }

        figure:nth-child(4) > section:nth-child(1) > div {
            animation-delay: -0.35s;
        }

        figure:nth-child(4) > section:nth-child(2) > div {
            animation-delay: -0.3s;
        }

        figure:nth-child(4) > section:nth-child(3) > div {
            animation-delay: -0.25s;
        }

        figure:nth-child(4) > section:nth-child(4) > div {
            animation-delay: -0.2s;
        }

        figure:nth-child(4) > section:nth-child(5) > div {
            animation-delay: -0.15s;
        }

        figure:nth-child(4) > section:nth-child(6) > div {
            animation-delay: -0.1s;
        }

        figure:nth-child(4) > section:nth-child(7) > div {
            animation-delay: -0.05s;
        }
    </style>

    <script src="js/prefixfree.min.js"></script>

</head>

<body>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <figure>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
        <section><div></div></section>
    </figure>

    <div style="text-align:center;margin:50px 0; font:normal 14px/24px ‘MicroSoft YaHei‘;">
        <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
        <p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>
    </div>
</body>
</html>

web前端特效：http://www.cnblogs.com/jihua/p/webfront.html

时间： 2024-10-26 07:57:40

CSS3实现Loading动画特效的相关文章

纯CSS3文字Loading动画特效

在线演示       本地下载 原文地址:https://www.cnblogs.com/datiangou/p/9975717.html

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

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

以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动画,那将是一件非常痛快的事情. 1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效.Loading旋转图标是在canvas画布上绘制的,整个lo

酷炫的css3图标loading动画效果代码

css3 svg图标制作环形loading加载动画特效 绿色的css3动画加载图标代码 css3加载动画制作loading加载Android动画效果 jQuery css3预加载动画制作css3动画图标页面加载效果 css3加载动画特效制作css3 win8加载动画特效 css3加载动画效果制作loading动画效果代码 8种超炫css3加载动画代码_css3 loading动画效果代码 5个CSS3加载动画_css3网页加载动画图标下载 css3 Loading加载动画制作动态Loading阶

6种炫酷的CSS3按钮边框动画特效

这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览   源码下载 使用方法 HTML结构 该CSS3按钮边框动画特效中的按钮使用HTML的<button>元素来制作.各种效果非标设置不同的class.例如第一种效果的class为draw. <button class="draw">draw</button> CSS样式 在CSS样式

12种炫酷html5 svg加载loading动画特效

这是一款使用html5 svg制作的加载loading动画特效插件.该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片.关于在页面中使用SVG的方法可以参考这篇文章:<如何在网页中使用SVG>. 所有的现代浏览器都支持SVG(IE8及以下浏览器除外),你可以点的这里查看支持SVG的浏览器. 在线演示:http://www.htmleaf.com/Demo/201501071122.html 下载地址:http://www.htmleaf.com

9款超绚丽的HTML5/CSS3应用和动画特效

1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示 源码下载 2.HTML5/CSS3 3D纸片折叠动画 今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效,尽管它目前很少能在项目中应用,但从源码中我们可以学到很多HTML5 3D动画的制作知

纯CSS3创意loading文字特效

快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http://www.tudou.com/plcover/VHNh6ZopQ4E/ 百度网盘同步:http://pan.baidu.com/s/1jG1Q58M 分享  [中文纪录片]互联网时代   http://pan.baidu.com/s/1qWkJfcS 官方QQ群:(申请加入,说是我推荐的) App实践出真知 4

CSS3单选框动画特效实现步骤详解

在前端开发中,我们常常使用CSS3技术来实现单选框的动画特效,对于前端菜鸟而言,可能对这部分内容还不是很熟悉,今天就和大家分享一个这方面的案例,希望对大家学习CSS3技术有所帮助,一起来看看吧. 首先,来看一下我们的第一个特效 注意,这个地方的黄点不是我们特效的一部分,这个黄点之所以存在是我使用的屏幕录制软件自带的.可以很清楚的看到这个特效就是当我们点击的时候,黑点会以一种缩放的动画显示出来,下面来看看具体如何实现. <divclass="radio-1"> <inp