<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<style type='text/css'>

.circle {

    width: 200px;

    height: 200px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -100px 0 0 -100px;

}

.circle1,

.circle2,

.circle3,

.center {

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -30px 0 0 -30px;

    width: 60px;

    height: 60px;

    border-radius: 30px;

    background-color: #666666;

}

.center {

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -35px 0 0 -35px;

    width: 70px;

    height: 70px;

    border-radius: 35px;

    background: #111111;

    / text-align: center;

    line-height: 70px;

    color: #EAEAEA;

    font-size: 16px;

    font-family: '';

}

.circle1 {

    -webkit-animation: circle 3s linear infinite;

    animation: circle 3s linear infinite;

}

.circle2 {

    -webkit-animation: circle 3s linear 0.8s infinite;

    animation: circle 3s linear 0.8s infinite;

}

.circle3 {

    -webkit-animation: circle 3s linear 1.6s infinite;

    /* Safari and Chrome */

    animation: circle 3s linear 1.6s infinite;

}

@-webkit-keyframes circle {

    /* Safari and Chrome */

    from {

        opacity: 1;

        -webkit-transform: scale(0);

    }

    to {

        opacity: 0;

        -webkit-transform: scale(3);

    }

}

</style>

</head>

<body>

    <div class='circle'>

        <div class='circle1'>&nbsp;</div>

        <div class='circle2'>&nbsp;</div>

        <div class='circle3'>&nbsp;</div>

        <div class='center'></div>

    </div>

</body>

</html>

css3圆环闪烁动画的更多相关文章

  1. 第165天：canvas绘制圆环旋转动画

    canvas绘制圆环旋转动画——面向对象版 1.HTML 注意引入Konva.js库 <!DOCTYPE html> <html lang="en"> &l ...

  2. css3制作旋转动画

    现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来 ...

  3. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  4. CSS3的自定义动画帧

    CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: trans ...

  5. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  6. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  7. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  8. 纯css3实现的动画加载条

    之前大大家分享了很多款加载条.今天给大家带来一款纯css3实现的动画加载条. 这款加载条适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8 ...

  9. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

随机推荐

  1. jquery实现全选、全不选、反选、获取选中的所有值总结

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. <!doctype html> <html> <head& ...

  2. mycat

    mycat系列: mycat系列-概述 Cobar的十个秘密之一 Cobar的十个秘密之二 Cobar的十个秘密之三 Cobar的十个秘密之四 Cobar的十个秘密之五 Cobar的十个秘密之六 Co ...

  3. js设计模式--迭代器模式

    迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按 ...

  4. 新学到的xss姿势，分享一下

    在js中有一种神奇的对象叫做window 当页面中包含如类似的 <script>var c = urlQuery("callback"); var r = JSON.p ...

  5. 学习笔记——Java核心技术之接口、继承与多态练习题

    1.创建一个抽象类,验证它是否可以实例化对象. package com.lzw; public abstract class UseCase3 { abstract void doit(); publ ...

  6. linux下keepalived 安装配置

    keepalived是一个类似于layer3, 4 & 7交换机制的软件,也就是我们平时说的第3层.第4层和第7层交换.Keepalived的作用是检测web服务器的状态,如果有一台web服务 ...

  7. AR入门系列-03-在unity中将调试好的Vuforia项目导出为APK

    先设置build settings 选中Android后点击Player Settings Product Name设置安装后的Android程序的名字 Bundle Identifier 设置apk ...

  8. python性能优化

      注意:本文除非特殊指明,”python“都是代表CPython,即C语言实现的标准python,且本文所讨论的是版本为2.7的CPython. python为什么性能差: 当我们提到一门编程语言的 ...

  9. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  10. Vue 2.0初学后个人总结及分享

    摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...