<!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. RabbitMQ学习之（一）_初步了解RabbitMQ、RabbitMQ的使用流程、为什么要使用RabbitMQ、RabbitMQ的应用场景

    初识RabbitMQ RabbitMQ是一个在AMQP协议基础上实现的消息队列系统, 是一个消息代理.它的核心原理非常简单:接收和发送消息.你可以把它想像成一个邮局:你把信件放入邮箱,邮递员就会把信件 ...

  2. 20145301实验四 Android开发基础

    20145301<Java程序设计>实验报告 北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.04.26 15:30- ...

  3. 20145321 《Java程序设计》第10周学习总结

    20145321 <Java程序设计>第10周学习总结 教材学习内容总结  网络编程:网络编程的实质就是两个(或多个)设备(例如计算机)之间的数据传输. IP地址:为了能够方便的识别网络上 ...

  4. AD9361

    AD9361框图   1. Fir滤波器的阶数为64或128 而内插或抽取因子为:1.2或4. HB1和HB2的内插或抽取因子为1或2而HB3的因子为1.2或3 BB_LPF为:三阶巴特沃斯低通滤波器 ...

  5. Jquery6 DOM 节点操作

    学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面中的元素结构就是通过这种节点模型来互相对应着的,通过这 ...

  6. Java搞笑注释（佛-）

    // _ooOoo_ // o8888888o // 88" . "88 // (| -_- |) // O\ = /O // ____/`---'\____ // . ' \\| ...

  7. CentOS 7配置静态IP地址

    [root@centos1 ~]# ifconfig -bash: ifconfig: command not found 首先,习惯性的输入echo $PATH(查看当前PATH环境变量,跟DOS的 ...

  8. linux下nano中复制粘贴剪切的快捷键是什么

    答: 1.复制:alt+6 2.剪切:ctrl+k 3.粘贴:ctrl+u 4.自由剪切: ctrl+6指定起始剪切位置,按上下左右键来选中内容,然后按下ctrl+k即可自由剪切 5.撤销: alt+ ...

  9. What is OWIN? A Beginners Guide

    http://www.codedigest.com/posts/1/what-is-owin-a-beginners-guide http://owin.org/html/spec/owin-1.0. ...

  10. LeetCode——Find Minimum in Rotated Sorted Array II

    Question Follow up for "Find Minimum in Rotated Sorted Array": What if duplicates are allo ...