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

<!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. windows下搭建Nexus3私服和基于IDEA15的Maven学习笔记

    搭建Nexus私服. 首先去官网下载window下用的zip文件.https://www.sonatype.com/download-oss-sonatype. 解压之后包含下面两个文件 进入nexu ...

  2. Odoo安装

    打开终端机0. sudo passwd root #设定超级使用者密码1. sudo apt-get update #更新软件源2. sudo apt-get dist-upgrade #更新软件包, ...

  3. Omi教程-生命周期和事件处理

    生命周期 名称 含义 时机 constructor 构造函数 new的时候 install 初始化安装,这可以拿到用户传进的data进行处理 实例化 installed 安装完成,HTML已经插入页面 ...

  4. 简单工厂模式,工厂方法模式,抽象工厂模式,spring的狂想

    菜鸟D在项目中遇见一个比较纠结的高耦合,所以就想办法来解耦.情况是这样的:系统通过用户选择treeview控件的节点判断调用不同的处理,这些处理中某些东西又是类似的.同事的建议是采用简单工厂,耦合就耦 ...

  5. Noip 2014酱油记+简要题解

    好吧，day2T1把d默认为1也是醉了，现在只能期待数据弱然后怒卡一等线吧QAQ Day0 第一次下午出发啊真是不错，才2小时左右就到了233，在车上把sao和fate补掉就到了= = 然后到宾馆之后 ...

  6. css伪元素用法大全

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

  7. C语言的基本概念

    1.经典入门:hello world #include <stdio.h> int main(void) { printf("hello world.\n"); ; } ...

  8. 【PHP系列】PHP推荐标准之PSR-3，日志记录器接口

    上节聊完了PHP官方的相关代码规范,下面给大家带来了PHP系列的PHP推荐标准的另外两个,PSR-3,PSR-4. 首先,我们先来了解下PSR-3是怎么回事. PHP-FIG发布的第三个推荐规范与前两 ...

  9. hibernate系列笔记(1)---Hibernate增删改查

    Hibernate增删改查 1.首先我们要知道什么是Hibernate Hibernate是一个轻量级的ORMapping对象.主要用来实现Java和数据库表之间的映射,除此之外还提供数据查询和数据获 ...

  10. smarty实例登陆、显示、分页

    1.先建立登陆页面,登陆页面的PHP文件和HTML文件是分开写的. 先建立一个登陆页的PHP文件, <?php include("../init.inc.php");//引入 ...