css翻转箭头,巧用css3轻松实现箭头上下旋转

巧用css3的transform-origin、transform和transition属性轻松实现箭头上下旋转效果。看代码：

只要css就可以实现，对做前端的来说简直是福音啊！O(∩_∩)O哈哈~

.test{margin:0;padding:0;list-style:none;border:1px solid #000;}

.test li{height:50px;background:#fff;text-align:center;}

.test li a{

border:3px solid #666;

border-width:3px 0 0 3px;

display:inline-block;

height:8px;

-moz-transform-origin:center center;

-moz-transform:rotate(45deg);

-moz-transition:all .5s ease-in .1s;

-webkit-transform-origin:center center;

-webkit-transform:rotate(45deg);

-webkit-transition:all .5s ease-in .1s;

-o-transform-origin:center center;

-o-transform:rotate(45deg);

-o-transition:all .5s ease-in .1s;

-ms-transform-origin:center center;

-ms-transform:rotate(45deg);

-ms-transition:all .5s ease-in .1s;

transform-origin:center center;

transform:rotate(45deg);

transition:all .5s ease-in .1s;

width:8px;}

.test li a:hover{

-moz-transform:rotate(-15deg);

-moz-transition:all .5s ease-in .1s;

-webkit-transform:rotate(225deg);

-webkit-transition:all .5s ease-in .1s;

-o-transform:rotate(-45deg);

-o-transition:all .5s ease-in .1s;

-ms-transform:rotate(-45deg);

-ms-transition:all .5s ease-in .1s;

transform:rotate(-45deg);

transition:all .5s ease-in .1s;

}

本代码不支持ie8及以下浏览器。

css翻转箭头,巧用css3轻松实现箭头上下旋转相关推荐

html实践中为何还要使用css,12 为何使用Html5+CSS3
一:大多浏览器支持,低版本也没问题我看点这方面的资料,是为了做手机应用网站(有三个方案,这个是备用方案),可以开发响应式网站,可以脱离开发平台进行跨平台. 在Html5网页中引入Modernizr, ...
线性箭头用css3,css3实现小箭头各种图形效果
css实现各种图形真是太赞了,再也不用切图了,直接用css就可以实现. 最常用的就是用css实现的小三角了 #triangle-up{ display:inline-block; width:0; h ...
CSS SANS – 神奇！使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
巧用Excel 轻松转换人民币大小写
巧用Excel 轻松转换人民币大小写 2010-02-08 11:22 要将人民币小写金额转换成大写格式,用Excel提供的格式,将自定义格式类型中的"[dbnum2]G/通用格 ...
巧用快捷键轻松设置Excel单元格格式
巧用快捷键轻松设置Excel单元格格式在应用程序中使用快捷键,可以使我们避免在键盘与鼠标之间来回切换,从而节省大量的时间,显著地提高工作效率.多掌握一些常用的快捷键,可以使您告别菜鸟时代,迅速成长为 ...
案例-两面翻转的盒子（CSS3）
案例-两面翻转的盒子(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset= ...
巧用快捷键轻松设置Eexel单元格格式(转)
巧用快捷键轻松设置Eexel单元格格式(转) 在应用程序中使用快捷键,可以使我们避免在键盘与鼠标之间来回切换,从而节省大量的时间,显著地提高工作效率.多掌握一些常用的快捷键,可以使您告别菜鸟时代,迅速 ...
CSS学习笔记 01、CSS3基础知识学习
文章目录前言 CSS3基本了解如何学习? 一.什么是CSS 1.1.发展史 1.2.快速入门(三种引用方式) 扩展:外部样式两种写法二.选择器 2.1.基本选择器(标签.类.id) 2.2.元素 ...
路由巧设置局域网轻松限制BT下载
路由巧设置局域网轻松限制BT下载随着使用BT下载用户的增多,网络的速度也是越来越慢.如何限止在网络中使用BT呢?释放出被BT强占的网络带宽呢?下面笔者给大家推荐使用路由器来做限制的方法. 随着宽带 ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...

css翻转箭头,巧用css3轻松实现箭头上下旋转

css翻转箭头,巧用css3轻松实现箭头上下旋转相关推荐

最新文章

热门文章