CSS3动画箭头
<style type="text/css">
.arrow {
display: block;
width: 20px;
height: 20px;
position: absolute;
bottom: 25px;
left: 50%;
margin-left: -11px;
border: 3px solid transparent;
border-top: 3px solid #000;
border-left: 3px solid #000;
z-index: 99;
opacity: .8;
-webkit-transform: rotate(45deg);
-webkit-animation: arrow 1.5s infinite ease-in-out;
}
@-webkit-keyframes arrow {
0% {
opacity:0;
-webkit-transform:translate(0, 0px) rotate(45deg)
}
50% {
opacity:1;
-webkit-transform:translate(0, -5px) rotate(45deg)
}
100% {
opacity:0;
-webkit-transform:translate(0, -10px) rotate(45deg)
}
}
</style>
<div class="arrow"></div>
css3绚丽的箭头动画,css3箭头动画
CSS3动画箭头的更多相关文章
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- 30分钟玩转css3动画, transition,animation
其实css3动画是就是2种实现,一种是transition,另一种就是animation.transition实现的话就是只能定制开始帧,和结束2帧:而animation实现的话可以写很多关键帧.没有 ...
- CSS3动画那么强,requestAnimationFrame还有毛线用?
一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多 ...
- CSS3动画那么强,requestAnimationFrame还有毛线用--摘抄
CSS3动画那么强,requestAnimationFrame还有毛线用? 这篇文章发布于 2013年09月30日,星期一,19:12,归类于 web综合. 阅读 197124 次, 今日 84 次 ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
随机推荐
- (十二)java嵌套类和内部类
嵌套类和内部类:在一个类里边定义的类叫做嵌套类,其中没有static修饰的嵌套类是我们通常说的内部类,而被static修饰的嵌套类不常用.有的地方没有嵌套类和内部类的区分,直接是嵌套类就称作内部类,没 ...
- Caused by: java.lang.ClassNotFoundException: javax.persistence.NamedStoredProcedureQuery
1.错误描述 2014-7-12 21:06:37 org.hibernate.engine.jdbc.internal.LobCreatorBuilder useContextualLobCreat ...
- input【type="checkbox"】标签与字体对齐
今天分享一个比较实用的技巧,在实际项目中我们会经常遇到表单的input标签多选和单选的问题,但是往往由于标签自身的样式和我们项目的风格很不搭调,就不能实现了,今天就来告诉大家怎么去实现吧. 第一种:利 ...
- zookeeper选举
什么时候开始进行选举 1.服务器初始化启动的时候2.服务器运行期间连接不上leader的时候 初始化选举过程 进行leader选举至少需要两台服务器,我们这里举例为5台服务器(1,2,3,4,5)1. ...
- 对维数组排序 array_multisort()的应用
PHP允许在多维数组上执行一些比较复杂的排序--例如,首先对一个嵌套数组使用一个普通的关键字进行排序,然后再根据另一个关键字进行排序.这与使用SQL的ORDER BY语句对多个字段进行排序非常相似.为 ...
- 一个VB编写的俄罗斯方块
'VB语言版俄罗斯方块'Totoo.Aoo34智造(一个人的两个名字),一些方块,很多计算 Const WN As Integer = 10, HN As Integer = 20Const Boxl ...
- 【洛谷1131】【ZJOI2007】时态同步
题面 题目描述 小Q在电子工艺实习课上学习焊接电路板.一块电路板由若干个元件组成,我们不妨称之为节点,并将其用数字1,2,3-.进行标号.电路板的各个节点由若干不相交的导线相连接,且对于电路板的任何两 ...
- ls-grep-find组合命令解决企业问题实战
ls -l|grep “^d” 以d开头 ls -lF 给不同文件类型加不同标志 ls -lF|grep “/$” 以/结尾 ls -lF|grep / find ./ -type d fin ...
- Micropython TurnipBit 电子时钟 青少年编程入门
电子时钟是一个很常用但是制作非常简单的小玩具了,对于Micropython初学者来说,制作一个电子时钟是非常简单又容易检验自己学习成果的实验了.TurnipBit相比于其他开发板,制作电子时钟就更加简 ...
- [转]ZooKeeper的学习与应用
[转]ZooKeeper的学习与应用 http://blog.csdn.net/rengq126/article/details/7393227 1. ZooKeeper的学习与应用 1.1. 概述 ...