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

<!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. Swift 2.0 单例的用法

    单例我们项目中是很常用的,今天刚学了在swift中怎么写单例和调用单例.下面我们简单的介绍一下.我们先看看Swift单例的写法: import UIKit class Shareinstance: N ...

  2. 基于Spring DM管理的Bundle获取Spring上下文对象及指定Bean对象

    在讲述服务注册与引用的随笔中,有提到context.getServiceReferences()方法,通过该方法可以获取到OSGI框架容器中的指定类型的服务引用,从而获取到对应的服务对象.同时该方法还 ...

  3. shell监控网卡流量

     #!/bin/bashRx=`ifconfig  eno16777736 | grep RX | grep packets | awk '{print $5}'`Tx=`ifconfig  eno1 ...

  4. B. Pasha and Phone

    B. Pasha and Phone time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  5. jMeter入门实例

    在大家开始看的时候先声明这篇文章不是我写的我只是照着他讲的安装好了,我觉得很有用就想保留下来.分享给大家. 人们对从认识事物都有一个具体到抽象的过程,学习Jmeter也不例外,通过一个实例来进行学习, ...

  6. Weinre 远程调试移动端页面

    Weinre 是一款远程调试工具,使用JS编写, 可以让我们在电脑上直接调试运行在手机上的远程页面,当你的代码已经发布上线,这时候出现了问题,Weinre就可以帮你调试. 调试场景 调试页面在手机上. ...

  7. TCP详解

    1. 数据进入协议栈的封装过程 2. TCP连接的三次握手 3. TCP连接的三次握手和关闭时的四次握手 各个状态的意义如下: LISTEN - 侦听来自远方TCP端口的连接请求: SYN-SENT ...

  8. 【译】Nodejs最好的ORM - TypeORM

    TypeORM github: https://github.com/typeorm/typeorm 这篇译文是从TypeORM github上的使用说明上翻译过来的,已经提交PR并merge到库中了 ...

  9. jprofiler安装图解 ( 7_1 )

    环境: 1.sun jdk1.6.0 2.jprofiler_windows_6_0_2.exe 安装 1. jdk, 安装略... 2. jprofiler安装 一路next 到Enter lice ...

  10. HTML重要标签及属性详解

    我学习前端的时间不长,短短1个月而已,只学了些HTML5和CSS3还有少许javascript,另外还有网页布局等等辅助性书籍,我在模仿网页以及完成百度前端技术学院的任务过程中发现了我容易忘记的标签以 ...