<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <style>

        body {

            background: #ef7148;

        }

        img {

            cursor: pointer;

            -webkit-animation: scaleout 2s infinite ease-in-out;

            animation: scaleout 2s infinite ease-in-out;

        }

        @-webkit-keyframes scaleout {

            0% {

                -webkit-transform: scale(1.0);

            }

            60% {

                transform: scale(1.0);

                -webkit-transform: scale(1.1);

            }

            100% {

                -webkit-transform: scale(1.0);

                opacity: 1;

            }

        }

        @keyframes scaleout {

            0% {

                transform: scale(1.0);

                -webkit-transform: scale(1.0);

            }

            60% {

                transform: scale(1.0);

                -webkit-transform: scale(1.1);

            }

            100% {

                transform: scale(1.1);

                -webkit-transform: scale(1.0);

                opacity: 1;

            }

        }

    </style>

</body>

<img src="http://image.bitautoimg.com/weixin/images/footShop/big-bubble-bg-icon@3x.png" alt="">

</html>

源：http://www.xwcms.net/js/css3sl/74342.html

css3圆形光环闪烁效果的更多相关文章

  1. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  2. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  3. css3圆形轨迹动画

    <!doctype html>      <html lang="en">      <head>          <meta char ...

  4. css3圆形头像（当图片宽高不相等时）

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  5. CSS3 圆形时钟式网页进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. CSS3 实现圆形、椭圆形、三角形等各种形状样式

    CSS3 圆形 #css3-circle{ width: 150px; height: 150px; border-radius: 50%; background-color: #232323;} C ...

  7. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

  8. 10大经典CSS3菜单应用欣赏

    很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验.本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单.Tab菜单.面包屑菜单等. 1.CSS3飘带状3 ...

  9. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

随机推荐

  1. Android字符串及字符串资源的格式化

    为什么要写这一篇随笔呢?最近做项目的过程中,遇到很多页面在要显示文本时,有一部分是固定的文本,有一部分是动态获取的,并且格式各式各样.一开始采取比较笨的办法,把他拆分成一个个文本控件,然后对不同的控件 ...

  2. .NET(C#)：使用反射来获取枚举的名称、值和特性

    首先需要从内部了解一下枚举(Enumeration),相信许多人已经知道了,当我们声明一个这样的枚举类型: enum MyEnum { AAA, BBB, CCC } 背后的IL是这样的: .clas ...

  3. PowerDesigner新建CDM设置相同属性

    在 PowerDesigner设计逻辑模型CDM时,在一个包的一个域中,考虑到主外键名称可能冲突的问题,默认两个不同的实体中不能有相同的属性 但实际设计的时候,通常要在两个实体中使用相同的属性名, 比 ...

  4. 【数组】Subsets

    题目: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset ...

  5. Spring源码深度解析系列-----------org.springframework.aop-3.0.6.RELEASE

    Spring源码深度解析系列-----------org.springframework.aop-3.0.6.RELEASE

  6. 08 Java 集合的线程安全问题

    1 Java中的集合 Java中的集合分为同步的集合(线程安全)和线程不安全的集合 例如 : ArrayList和Vector的区别: 一.同步性:Vector是线程安全的,也就是说是同步的,而Arr ...

  7. Thread中断线程的方法

    转载:https://www.cnblogs.com/l2rf/p/5566895.html 线程对象属于一次性消耗品,一般线程执行完run方法之后,线程就正常结束了,线程结束之后就报废了,不能再次s ...

  8. IOS bug之Code Sign error:Provisioning profile

    刚才解决一个版本冲突的bug,记在了博客里,这让我想起了另外一个bug,当时犹豫公司的开发者账号过期了,我打开应用运行时提示Code Sign error:Provisioning profile   ...

  9. shell 10个好习惯

    The Linux Cookbook 一书的作者 Michael Stutz 凭借自己多年使用 UNIX 的经验,总结了 10 个良好习惯,个人认为真的很受用,现摘要如下与大家分享. 1.建立层级目录 ...

  10. [转]玩转Windows服务系列——命令行管理Windows服务

    本文转自:http://www.cnblogs.com/hbccdf/p/managewindowsservicewithcmd.html 说到Windows服务的管理就不得不说通过命令行的方式管理W ...