<!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. Ngin 简单配置文件

    #user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...

  2. 【HADR】搭建实战

    Summary: 简单的HADR,只用一台虚拟机,两个实例间搭建.工作量不大,一般5分钟左右能够完成. 步骤: 1.设定归档模式 2.使用备份建立standby数据库 3.设定hadr相关的参数 4. ...

  3. redux进阶 --- 中间件和异步操作

    你为什么需要异步操作? https://stackoverflow.com/questions/34570758/why-do-we-need-middleware-for-async-flow-in ...

  4. github里如何删除一个repository仓库

    高手请绕行,新手往下走. 作为一个刚接触github(https://github.com/)的新手,除了感叹开源的丰富和强大之外,自己肯定也想试用一下,因此申请帐号神马的.今天自己创建一个Repos ...

  5. easyui的datagrid对应的java对象

    Easyui中datagrid控件要求的数据格式为: {total:”2”,rows:[{“id”:”1”,”name”,”张三”},{“id”:”2”,”name”,”李四”}]} 所以可以建一个对 ...

  6. jenkins创建构建任务

    构建项目类型 点击 Jenkins 首页 “创建一个新任务” 的链接, 输入任务名称 Jenkins 提供了六种类型的任务. 构建一个自由风格的软件项目 这是Jenkins的主要功能.Jenkins ...

  7. 修复PHP支持的标准JSON数据格式

    PHP的json_decode无法解析的JSON数据,代码如下: $json = "{rst:5,c:[ [1018485,2,0,0,0,0,'','0-0','','',2,0,2],[ ...

  8. UTF-8编码

    UTF-8是UNICODE的一种变长度的编码表达方式<一般UNICODE为双字节(指UCS2)>,它由Ken Thompson于1992年创建,现在已经标准化为RFC 3629.UTF-8 ...

  9. Scrum 冲刺博客第三篇

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 基本的页面设计 各个页面之间的跳转 背景音乐模块设计 今天计划完成的工作 ...

  10. Android 直接通过JNI访问驱动

    package com.yang.jniaccesshardware; import android.os.Bundle; import android.support.v7.app.AppCompa ...