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

<!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. JDBC连接数据库（二）——连接池

    参考博客:http://www.cnblogs.com/xdp-gacl/p/4002804.html 一. 应用程序直接建立数据库连接模型 应用程序直接每次访问数据库时,都建立创建一个数据库的链接, ...

  2. 华为荣耀畅玩5C NEM-UL10 ROOT那些事儿（亲测成功）

    以前ROOT手机都是在手机上安装KingRoot 刷机精灵等软件分分钟成功(不排除偶然,,比如这款华为荣耀...) 手机安装KingRoot等软件,,,失败   电脑上安装连接手机Root,,,,失败 ...

  3. CountDownLatch类的使用

    java.util.concurrent.CountDownLatch是一个并发构造,它允许多个线程等候特定的操作完成. CountDownLatch用一个数字初始化,通过调用countDown()方 ...

  4. css伪元素用法大全

    本文主要讲解css伪元素的用法,有需要的朋友可以阅读此文.本文讲解的伪元素有:before,after. 什么是伪元素(Pseudo element)? 伪元素不是真正的元素,不存在与文档之中,所以j ...

  5. JS中的类，类的继承方法

    大牛请无视此篇! 首先我们定义一个类,方法很简单,就像我们定义函数一样,只不过我们为了与函数区分,名称首字母要大写,看代码: function Person (){ } 这就是一个很简单的Poson类 ...

  6. javascript : detect at the end of bottom

    function isScrollBottom() { var documentHeight = document.documentElement.scrollHeight; var winHeigh ...

  7. angular : direative : scope | 指令scope里的符号@，=

    先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...

  8. Springs Element 'beans' cannot have character [children], because the type's content type is element-only

    Springs Element 'beans' cannot have character [children], because the type's content type is element ...

  9. ASP.NET MVC 5 基本构成

    MVC模式简介: MVC模式两种理解:一种是表现模式,另外一种是架构模式.它将应用程序分成三个主要组件即:视图(View)控件器(Controller)模型(Model) M: Model主要是存储或 ...

  10. EAS组件编辑和显示的自定义

    KDFormattedTextField kdtEntrys_returnAmount_TextField = new KDFormattedTextField(); kdtEntrys_return ...