<!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. iframe的应用量还是这么大

    以前查阅资料说iframe已经过时,不建议使用,可是在先进的2018年,你去随便打开一个网站,扔都可以见到iframe的身影,这不禁要发问:iframe的应用量为什么还是这么大? HTML5不再支持使 ...

  2. Python3.x：Selenium+PhantomJS爬取带Ajax、Js的网页

    Python3.x:Selenium+PhantomJS爬取带Ajax.Js的网页 前言 现在很多网站的都大量使用JavaScript,或者使用了Ajax技术.这样在网页加载完成后,url虽然不改变但 ...

  3. 仔细讨论 C/C++ 字节对齐问题⭐⭐

    原文:https://www.cnblogs.com/AlexMiller/p/5509609.html 字节对齐的原因 为了提高 CPU 的存储速度,编译器会对 struct 和 union的存储进 ...

  4. 深度学习：Keras入门(一)之基础篇【转】

    本文转载自:http://www.cnblogs.com/lc1217/p/7132364.html 1.关于Keras 1)简介 Keras是由纯python编写的基于theano/tensorfl ...

  5. SQL 循环 FOR 语句

    ) DECLARE My_Cursor CURSOR --定义游标 FOR (SELECT userid FROM User) --查出需要的集合放到游标中 OPEN My_Cursor; --打开游 ...

  6. python 匹配中文和英文

    在处理文本时经常会匹配中文名或者英文word,python中可以在utf-8编码下方便的进行处理. 中文unicode编码范围[\u4e00-\u9fa5] 英文字符编码范围[a-zA-Z] 此时匹配 ...

  7. Pandas 的使用

    1. 访问df结构中某条记录使用loc或者iloc属性.loc是按照index或者columns的具体值,iloc是按照其序值.访问类似于ndarray的访问,用序列分别表示一维和二维的位置. 例如: ...

  8. LA 3211 飞机调度（2—SAT）

    https://vjudge.net/problem/UVALive-3211 题意: 有n架飞机需要着陆,每架飞机都可以选择“早着陆”和“晚着陆”两种方式之一,且必须选择一种,第i架飞机的早着陆时间 ...

  9. Springcloud/Springboot项目绑定域名，使用Nginx配置Https

    https://blog.csdn.net/a_squirrel/article/details/79729690 一.Https 简介(百度百科) HTTPS(全称:Hyper Text Trans ...

  10. 深入理解Java枚举类型(enum)

    https://blog.csdn.net/javazejian/article/details/71333103 深入理解Java类型信息(Class对象)与反射机制 深入理解Java枚举类型(en ...