<!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. OpenERP 疑问之一

    def _get_send_amount(self,cr,uid,ids,name,args,context=None): res={} MRP={} lines = self.browse(cr,u ...

  2. mono for android 百度map binding项目(转)

    好丫小子之前发布过百度地图android SDK的mono for android绑定dll,许多朋友看过之后说想理解是怎么绑定的,现我把绑定的代码发出来. 针对2.1.2版本百度地图android ...

  3. Check类之TypeValidation

    (1)Validator类的visitTypeApply()方法 实例1: class TestTypeVal<T extends InputStream>{ TestTypeVal< ...

  4. Android MediaPlayer 常用方法介绍

    Android MediaPlayer 常用方法介绍 方法:create(Context context, Uri uri) 解释:静态方法,通过Uri创建一个多媒体播放器. 方法:create(Co ...

  5. Debugging Ruby in VS Code

    原文  https://dev.to/dnamsons/ruby-debugging-in-vscode-3bkj https://github.com/Microsoft/vscode-recipe ...

  6. VMware虚拟机配置

    VMware虚拟机配置 背景 在做学习Linux时经常会在win环境下安装虚拟机,这其中涉及到一些细节操作,需要对虚拟机工作模式加以理解. 本文在学习hadoop分布式环境搭建时写作. 1.虚拟交换机 ...

  7. 用gdb理解C宏(#和##)

    在Unix/Linux内核代码以及GNU libc源代码中,有两个C的宏被广泛使用. 例如: /* glibc-2.25/sysdeps/powerpc/powerpc64/sysdep.h */ # ...

  8. Oracle 12c JDBC 连接

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  9. Linux 的启动流程--转

    http://cloudbbs.org/forum.php?mod=viewthread&tid=17814 半年前,我写了<计算机是如何启动的?>,探讨BIOS和主引导记录的作用 ...

  10. ios 点击失效、闪屏问题解决方案

    一.点击失效 描述:将点击事件(click)委派在document或者body上,且目标元素为默认不可点击的元素时(非<a>. <button>而是<span>等) ...