<!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. c++ 跳转语句块

    p170~p172:跳转语句:1.break:对while for switcho有效!2.continue:中断当前迭代,但是循环还要继续.因此对while for有效,对switch无效!3.go ...

  2. java之继承中的构造方法

    继承中的构造方法  1.子类的构造过程中必须调用其基类的构造方法. 2.子类可以在自己的构造方法中使用super(argument_list)调用基类的构造方法. 2.1.使用this(argumen ...

  3. 20145312 《Java程序设计》第五周学习总结

    20145312 <Java程序设计>第五周学习总结 学习笔记 Chapter8 异常处理 8.1语法与继承架构 1.Java中的错误以对象方式呈现,只要捕捉包装错误的对象,就可以针对该错 ...

  4. 20145328 《Java程序设计》第7周学习总结

    20145328 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambda 12.1 认识Lambda语法 Lambda 教材的引入循序渐近.深入浅出 Lambda去重 ...

  5. 20145230熊佳炜《网络对抗》实验五：MSF基础应用

    20145230熊佳炜<网络对抗>实验五:MSF基础应用 主动攻击 首先,我们需要弄一个xp sp3 English系统的虚拟机,然后本次主动攻击就在我们kali和xp之间来完成. 然后我 ...

  6. RMI远程方法调用

    RMI远程方法调用:适用于 客户端 调用 服务器 内的方法:(Kotlin 语言编写) 如果业务为二个服务器之间的通信,还是得用消息队列的形式,因为RMI 不适合 双向 调用 下面介绍RMI 的使用方 ...

  7. webform button

    https://www.codeproject.com/Questions/412553/differences-between-onClick-and-onClientClick OnClick w ...

  8. poj 3461 - Oulipo 经典kmp算法问题

    2017-08-13 19:31:47 writer:pprp 对kmp算法有了大概的了解以后,虽然还不够深入,但是已经可以写出来代码,(可以说是背会了) 所以这道题就作为一个模板,为大家使用吧. 题 ...

  9. 【乱码】Request QueryString 编码，传值乱码的几种情况和解决办法（单页，多页）

    自己的项目还好,合作接口神马的传值乱码是很常见的. 遇到了几次这种恶心情况,积累了一点经验,有不对的地方欢迎指正. 乱码原因: 一般来说,常用的编码不是utf-8就是gb2312,一样的 HttpUt ...

  10. git-svn — 让git和svn协同工作

     git-svn — 让git和svn协同工作 svn作为一个优秀源码版本的管理工具,可以适合绝大多数项目.但是因为它的采用中心化管理,不可避免的存在本地代码的备份和版本管理问题.也就是说对于尚未或暂 ...