这种特效是什么?CSS+DIV 能直接用CSS写出来么。或是用JS实现?

发布网友发布时间：2022-04-06 10:26

共4个回答

热心网友时间：2022-04-06 11:55

div和css可以实现而且也不是很费劲当然 js的话代码会更少我给你贴一下代码

div：

<ul>

<li id="li1"><a href="#">中国驰名商标达599件</a></li>

<li id="li2"><a href="#">中国驰名商标达599件</a></li>

<li id="li3"><a href="#">中国驰名商标达599件</a></li>

<li id="li4"><a href="#">中国驰名商标达599件</a></li>

<li id="li5"><a href="#">中国驰名商标达599件</a></li>

</ul>

css：

ul{ width:430px; height:auto; margin:0; padding:0;}

ul li{ width:400px; height:auto; list-style:none;}

#li1:hover{ width:300px; height:63px; background:url(../h1.png) no-repeat left; padding:20px 0 0 100px;}

#li1 a{}

#li2:hover{ width:300px; height:63px; background:url(../h1.png) no-repeat left; padding:20px 0 0 100px;}

#li2 a{}

#li3:hover{ width:300px; height:63px; background:url(../h1.png) no-repeat left; padding:20px 0 0 100px;}

#li3 a{}

#li4:hover{ width:300px; height:63px; background:url(../h1.png) no-repeat left; padding:20px 0 0 100px;}

#li4 a{}

#li5:hover{ width:300px; height:63px; background:url(../h1.png) no-repeat left; padding:20px 0 0 100px;}

#li5 a{}

ul li a{ font-size:12px; text-decoration:none;}

有个缺点就是ie6下的li：hover 是不好用的你可以用

<div><a href="#">中国驰名商标达599件</a><div>来替代

<li id="li5"><a href="#">中国驰名商标达599件</a></li>

你可以试试细致的a标签下的css定义需要你自己调一下

哦忘记说了 h1图片就是

这个图片

热心网友时间：2022-04-06 13:13

js实现代码更少，方法更灵活，可以是图片转换，或者动态的视屏都是可以的。

热心网友时间：2022-04-06 14:48

完全不是问题，当然可以实现啦追问主要是怎么实现？这种样式叫什么？

热心网友时间：2022-04-06 16:39

这是用js做出来的，