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

来源：互联网发布：c 里基本蚁群算法编辑：程序博客网时间：2024/06/02 05:11

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

<ul class="test"><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>

只要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及以下浏览器。

0 0