一个浮动 css3效果
<!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效果的更多相关文章
- 12种超酷HTML5 SVG和CSS3浮动标签效果
这是一组效果很炫酷的SVG和CSS3表单浮动标签特效.这组浮动标签特效共12种效果,这些浮动标签效果部分在元素的伪元素上使用CSS transitions和CSS animations完毕,一部分则使 ...
- 发现两个有趣的CSS3效果
一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...
- 精选12个时尚的 CSS3 效果【附源码下载】
这里是精选的12个很炫的 CSS3 效果.CSS3 是对 CSS 规范的一个很大的改善和增强,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果.以前很多需要编写复杂的 JavaScript ...
- 让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
- 8个前沿的 HTML5 & CSS3 效果【附源码下载】
作为一个前沿的 Web 开发者,对于 HTML5 和 CSS3 技术或多或少都有掌握.前几年这些新技术刚萌芽的时候,开发者们已经使用它们来小试牛刀了,如今这些先进技术已经遍地开发,特别是在移动端大显身 ...
- 颗粒翻页（css3效果展示）
用css3效果做了一个颗粒翻页效果,布局上,一张图片做底层,在这张图片上用js创建一层小的行和列各为r和c的小span,给这些span分别设置background-position:用来覆盖原来的一张 ...
- 新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果[附演示和教程] 作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 ...
- 10款让你心动的 HTML5 & CSS3 效果
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 1.超炫的 HT ...
- 12款令程序员惊叹的CSS3效果库
最新的CSS3都配备了新的特性,来设计创建动画和互动的网页.在本文中,可以找到一些非常优秀的CSS3效果库,来让你的Web设计看起来更加引人注目.还在等什么?让我们一起看起来吧! Animate.cs ...
随机推荐
- [CLR via C#读后整理]-1.CLR的执行模型
公共语言运行时(Common Language Runtime,CLR)是一个可由多种编程语言使用的"运行时".他主要提供的功能有:程序集加载,内存管理,,安全性,异常处理,线程同 ...
- MLlib1.6指南笔记
MLlib1.6指南笔记 http://spark.apache.org/docs/latest/mllib-guide.html spark.mllib RDD之上的原始API spark.ml M ...
- 自定义圆形头像CircleImageView的使用和源码分析
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0806/3268.html tools:context="com.ex ...
- 20145301实验五 Java网络编程及安全
北京电子科技学院(BESTI)实验报告 课程:Java程序设计 班级:1453 指导教师:娄嘉鹏 实验日期:2016.05.06 18:30-21:30 实验名称:实验五 Java网络编程 实验内容 ...
- 20145328 《Java程序设计》课程总结
20145328 <Java程序设计>课程总结 每周学习总结链接汇总 20145328 <Java程序设计>第0周学习总结 20145328 <Java程序设计>第 ...
- HTTP-java模拟Post请求小栗子
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
- Elasticsearch之分词器的作用
前提 什么是倒排索引? Analyzer(分词器)的作用是把一段文本中的词按一定规则进行切分.对应的是Analyzer类,这是一个抽象类,切分词的具体规则是由子类实现的,所以对于不同的语言,要用不同的 ...
- 2017 beijing icpc E - Rikka with Competition
2017-09-22 22:01:19 writer:pprp As we know, Rikka is poor at math. Yuta is worrying about this situa ...
- 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 ...
- 分析ReentrantLock的实现原理
http://www.jianshu.com/p/fe027772e156 什么是AQS AQS即是AbstractQueuedSynchronizer,一个用来构建锁和同步工具的框架,包括常用的Re ...