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

<!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. Linux学习笔记（1）

    一.介绍 Linux系统作为服务器操作器的两大优点是其稳定性以及安全性:常见的Linux系统有以下几种: Debian(1993年下半年出的Linux分支) Ubuntu(目前互联网公司使用的比较多的 ...

  2. C#一定比C++性能差？当然不！破除迷信，从我做起！

    几乎所有的程序员在初学编程之时,都被灌输过"托管语言(Java.C#)性能比非托管语言(C.C++)差好多" 的迷信教条.如果你问他们为什么,他们一定会说:托管语言需要通过虚拟机或 ...

  3. nodejs中的异步流程序控制nsync

    异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等 http://cnodejs.org/topi ...

  4. 使用Spring构建RMI服务器和客户端

    上一篇文章我们实用JDK原生API构造了简单RMI应用,本篇将实用Spring框架来构造RMI的应用,实用Spring你会体验到简单,不需要那么多的条条框框,因为Spring给你做了很多封装. 项目构 ...

  5. Azure Messaging-ServiceBus Messaging消息队列技术系列3-消息顺序保证

    上一篇:Window Azure ServiceBus Messaging消息队列技术系列2-编程SDK入门  http://www.cnblogs.com/tianqing/p/5944573.ht ...

  6. webots自学笔记（一）软件界面和简单模型仿真

    本人是某非理工类某高校大四狗,由于毕设研究需要使用webots软件,在学习使用webots的过程花费了很多时间.由于这个软件基本没有什么中文资料,所以想把自己所学到的一些东西写下来,如有什么错误的地方 ...

  7. 对spring web启动时IOC源码研究

    研究IOC首先创建一个简单的web项目,在web.xml中我们都会加上这么一句 <context-param> <param-name>contextConfigLocatio ...

  8. Servlet中过滤器的执行流程

  9. 2818: Gcd

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2170  Solved: 979[Submit][Status][Discuss] ...

  10. Ionic android 底部tabs

    ionic android tabs 默认显示在上部,如果要跟苹果一起统一在底部,那么可以在app.js添加配置 .config(function($ionicConfigProvider) { $i ...