<!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. 【实战】JBOSS反序列化Getshell

    一.JBOSS4.0.5_GA,5.x,6.x 需要JavaDeserH2HC(https://github.com/joaomatosf/JavaDeserH2HC) 操作起来 javac -cp ...

  2. 033-JsonUtils 工具类模板

    模板一:使用的是jackson package cn.e3mall.common.utils; import java.util.List; import com.fasterxml.jackson. ...

  3. linux 升级－杂

    apt-cache search linux apt-cache search linux | grep generic apt-cache search linux | grep 4.10. apt ...

  4. java注释详解--javadoc注释

    一. Java注释分类// 注释一行 /* ...... */ 注释若干行 /** ...... */ 注释若干行,并写入 javadoc 文档 通常这种注释的多行写法如下: /** * ...... ...

  5. Mac下PHP+Apache+MySQL环境搭建

    一.启动Apache 有两种方法 1.打开网络共享 打开"系统偏好设置"->"共享",在"互联网共享"那一项前面打√. 2.打开终端, ...

  6. Windows窗体技术及基础控件

    创建winform程序 Visual studio是一套完整的开发工具集 RAD 工具(rapid application development) 创建用户界面时,把控件从工具箱拖放到窗体上,把它们 ...

  7. java读取项目或包下面的属性文件方法

    1.使用java.util.Properties类的load()方法 //文件在项目下.不是在包下!! InputStream in = new BufferedInputStream(newFile ...

  8. 二进制之Java中的进制（二）

    1. jdk中的进制转换 十进制转十六进制 Integer.toHexString(int i); 十进制转八进制 Integer.toOctalString(int i); 十进制转二进制 Inte ...

  9. layui的分页

    layui的分页需要后台配合,这边我使用的是pagehelper @RequestMapping("findGoods") private String findGoods(Int ...

  10. Java集合 之Map(HashMap、Hashtable 、TreeMap、WeakHashMap )理解（new）

    HashMap 说明: 在详细介绍HashMap的代码之前,我们需要了解:HashMap就是一个散列表,它是通过“拉链法”解决哈希冲突的.还需要再补充说明的一点是影响HashMap性能的有两个参数:初 ...