这里的图片很有特点，下面有演示图片样式

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

    body {

        background: #EF7148;

    }

    .icon {

        width: 185px;

        height: 185px;

        background: url('img/html5icon.png') center center no-repeat;

        margin: 100px auto 0 auto;

    }

    img {

        cursor: pointer;

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

    }

    @keyframes scaleout {

        0% {

            transform: scale(1.0);

            -webkit-transform: scale(1.0);

        }

        100% {

            transform: scale(1.1);

            -webkit-transform: scale(1.1);

            opacity: 0;

        }

    }

    </style>

</head>

<body>

    <div class="icon">

        <a href="#"><img src="img/html5icon.png"></a>

    </div>

</body>

</html>

css3动画图片波纹效果的更多相关文章

  1. iOS动画-扩散波纹效果

    最终效果 实现思路 动画的表现形式是颜色以及大小的变化,整体效果可以看做多个单独的波纹效果的叠加.因此我们可以创建多个CALayer,分别赋予CABasicAnimation动画,组成最终的动画效果. ...

  2. [原创]实现android知乎、一览等的开场动画图片放大效果

    代码下载地址: https://github.com/Carbs0126/AutoZoomInImageView 知乎等app的开场动画为:一张图片被显示到屏幕的正中央,并充满整个屏幕,过一小段时间后 ...

  3. css3动画水波纹、波浪

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css3实现图片遮罩效果鼠标hover以后出现文字

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

  6. 使用jquery封装的动画脚本（无动画、css3动画、js动画）

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  7. HTML5+CSS3实现图片可倾斜摆放的动画相册效果

    先看看效果:其中鼠标悬浮在图片上会有动态效果图 直接上代码: css文件 @CHARSET "UTF-8"; *{ padding:0px; margin:0px; } div{ ...

  8. CSS3动画：流彩文字效果+图片模糊效果+边框伸展效果实现

    前言 首先第一步,先布局html代码如下: <div class="wrap"> <img src="images/1.jpg" class= ...

  9. CSS3动画实现高亮光弧效果,文字和图片（一闪而过）

    前言 好久没有写博客啦,高亮文字和图片一闪而过的特效,用CSS3来写 先看文字吧, 就上代码了 .shadow { /* 背景颜色线性渐变 */ /* 老式写法 */ /* linear为线性渐变,也 ...

随机推荐

  1. int装箱比较

    看过Effctive-java 这本书的人多少都会记得,int类型的值,-128到127之间的数,会进行缓存. 所以在心间装箱对象 new Integer()的时候,如果在此范围则不会新建对象而是使用 ...

  2. 用《内网穿山甲》把本地IIS中的站点共享到远程访问

    前言: 因为各种原因,我们常常要把本机或局域网中搭建的站点发给远方的人访问,他有可能是测试人员.客户.前端.或领导演示,或是内部系统内部论坛临时需要在远程访问,事件变得很麻烦,要么有公网IP,要么能控 ...

  3. 重新认识一个强大的 Gson

    从一个 Bug 说起 不知道你们发现没有,你写完的程序无论当时怎么测试,过一段时间总会出 Bug .再说一个每天都在发生的例子:在你写完一篇博客后,立即检查的话,总是查不出自己写的错别字. 据说这些都 ...

  4. Oracle索引语句整理

    转载:http://www.cnblogs.com/djcsch2001/articles/1823459.html 索引,索引的建立.修改.删除 索引索引是关系数据库中用于存放每一条记录的一种对象, ...

  5. 在2017年，如何将你的小米4刷上Windows 10 mobile？

    众多攻略集大成者!资深软粉亲测有效! 参考教程: http://bbs.xiaomi.cn/t-11814358 http://bbs.xiaomi.cn/t-11736827 问:刷机前,我需要做什 ...

  6. c#导入excel 绑定数据 repeat为例子

    先读取Excel文件并存到dataset public DataSet ExcelToDataTable(string filename, string strsheetname) { try { / ...

  7. Centos更换yum源

    Centos更换yum源 步骤如下: 备份原始源 cd /etc/yum.repos.d/ mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/ ...

  8. [转]部署Let’s Encrypt免费SSL证书&&自动续期

    最近公司网站要用https,从自己摸索到找到国内的免费证书到选购正式的收费证书,最后老板说:太贵!不要.一脸懵逼的听老板提到Let's Encrypt证书,没办法,用呗.之前是有一些了解,国外发布的一 ...

  9. 将Error异常日志从普通日志中剥离

    开发过程中经常需要调试和线上环境查看异常日志的需求,但普通消息与异常消息混在一起实在是非常难得找,上则NM的文档够你头痛,所以就将Error级别的日志抽离出来. 本示例采用log4net来配置: 1. ...

  10. (三目运算符)PHP中问号?和冒号: 的作用

    <表达式1>?<表达式2>:<表达式3>; "?"运算符的含义是: 先求表达式1的值, 如果为真, 则执行表达式2,并返回表达式2的结果 ; 如 ...