<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		div{

			background: #639;

			width: 235px;

			height: 216px;

			position: absolute;

			top: 300px;

			left: 300px;

		}

		/*nimation-delay:1s*/

		@keyframes arrow1{

			0%{transform: translateY(0);}

			100%{transform: translateY(10px);}

		}

        @-webkit-keyframes arrow1{

        	0%{-webkit-transform: translateY(0);}

        	100%{-webkit-transform: translateY(10px);}

        }

		.arrow{

			animation: arrow1 2s infinite;

			-webkit-animation: arrow1 2s infinite;

			animation-timing-function:ease-in-out;

			-webkit-animation-timing-function:ease-in-out; 

			-webkit-animation-direction:alternate;

			animation-direction:alternate;

		}

	</style>

</head>

<body>

	<div class="arrow">

		<img src="http://paas.mail.10086.cn/res/build/images/c04.png" />

	</div>

</body>

</html>

　　

链接

　　

一个浮动 css3效果的更多相关文章

  1. 12种超酷HTML5 SVG和CSS3浮动标签效果

    这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...

  2. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  3. 精选12个时尚的 CSS3 效果【附源码下载】

    这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...

  4. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

  5. 8个前沿的 HTML5 & CSS3 效果【附源码下载】

    作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...

  6. 颗粒翻页（css3效果展示）

    用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...

  7. 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】

    新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程]   作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...

  8. 10款让你心动的 HTML5 & CSS3 效果

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...

  9. 12款令程序员惊叹的CSS3效果库

    最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...

随机推荐

  1. PCLK怎么获得？

    1.PCLK是由MCLK进行分频而来...... 2.PCLK是个时钟,通过寄存器只能调节它的频率什么的,它是控制像素输出的一个时钟: 3.在曝光时间的算法中需要知道PCLK的值,是因为在sensor ...

  2. eclipse web项目的发布路径

    java Build path是编译路径设置,主要用来设置源代码的编译路径默认是default output folder Web Deployment Assembly是eclipse中的发布路径设 ...

  3. web.xml listener配置

    listener简介: <listener>能为web应用创建监视器,监听上下文的各种事件,如:application和session事件,这些监视器都是按相同的方式定义,它的功能取决于各 ...

  4. 照着官网来安装openstack pike之neutron安装

    neutron组件安装分为控制节点和计算节点,还是先从控制节点安装 1.前提条件,数据库为nova创建库和账户密码来连接数据库 # mysql -u root -p MariaDB [(none)]& ...

  5. linux下安装mysql详细步骤

    最近买了个阿里云服务器,搭建mysql环境. 该笔记用于系统上未装过mysql的干净系统第一次安装mysql.自己指定安装目录,指定数据文件目录. linux系统版本: CentOS 7.3 64位 ...

  6. 记jsp判断

    empty:表示空字符串,null,空数组,空集合. ! empty:表示非空字符串,非null,非空数组,非空集合.

  7. codeforce AIM tech Round 4 div 2 B rectangles

    2017-08-25 15:32:14 writer:pprp 题目: B. Rectangles time limit per test 1 second memory limit per test ...

  8. jni使用问题总结

    参考: https://blog.csdn.net/fred_lzy/article/details/53159138 https://blog.csdn.net/avi3/article/detai ...

  9. Mysql数据库实用语句集

    mysql实用语句 (1).从第0行开始取,取3行(一般用于分页)select * from student limit 0,3 (2).查看当前数据库编码 show variables like ' ...

  10. meta标签中的http-equiv属性使用介绍

      meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta 标签的作用有:搜索引擎优化(SEO),定义页面使用 ...