用css怎么实现三个线条变箭头的动画

html-css08

用css怎么实现三个线条变箭头的动画,第1张

div{

width: 20px

height: 20px

border: 2px solid #000

border-top: none

border-right: none

transform:rotate(45deg)

}

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">.menu{border:solid 1px bluewidth:140pxfont-size:16pxpadding:5pxmargin:0 auto}.menu a{display:blocktext-align:centercolor:redwidth:130pxheight:1.5empadding:4pxtext-decoration:noneposition:relative}.menu span{display:blockborder-style:solidborder-width:8pxoverflow:hiddenposition:absolutetop:4pxwidth:0pxheight:0pxoverflow:hidden}.menu a:link span{display:none}.menu a:hover span.left{display:blockborder-color:whiteborder-left-color:blackleft:8px}.menu a:hover span.right{display:blockborder-color:whiteborder-right-color:blackright:8px} http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 http://www.baidu.com">class="left">junshao1 我改了一下,在IE7和FF3下测试通过,不知道是不是你要的效果,如果有出入的话我们可以再交流。

就用div加css就能做出这种效果了.给你一个刚写的例子。

<div style='background:redheight:20pxwidth:30pxdisplay: inline-block'></div>

<div style='top:5pxheight: 0pxborder: 15px red solidwidth: 20pxborder-top-color: transparentborder-right-color: transparentborder-bottom-color: transparentdisplay: inline-blockposition: relativeleft: -4px'></div>