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

最新推荐文章于 2025-05-15 14:36:35 发布

原创最新推荐文章于 2025-05-15 14:36:35 发布 · 1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

html 同时被 3 个专栏收录

7 篇文章

订阅专栏

css

5 篇文章

订阅专栏

响应式web设计

3 篇文章

订阅专栏

本文展示了如何利用CSS3的transform-origin、transform和transition属性，仅通过代码即可实现箭头的上下旋转效果，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

巧用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及以下浏览器。