请问如何用HTML和CSS实现菜单上下翻动的效果?

html-css09

请问如何用HTML和CSS实现菜单上下翻动的效果?,第1张

假设每个标签的单位是li标签,li要设置overflow:hidden,并且li要有一个的高度。

li下边要添加一个div,给他个class叫child。给他个属性transtion: transform 2s(多少s是希望多少秒完成动画)

child里面再画两个div,这两个div高度等于li的高度。这时候你只能看到一个div,因为下边的超出隐藏了。

li:hover child {

trasfrom: tranlateY(这里写一个li的高度,看情况是正直值还是负值。应该是正数)

}

想要在客户端实现此功能,ie必须得使用fliter。

非ie核心的可以使用canvas

具体参见例子 http://www.ajaxblender.com/article-sources/jquery/image-rotate/index.html

css可以通过perspective属性来实现。ps可以直接通过滤镜中的翻转效果实现。

对于ps,首先打开Photoshop,导入需要编辑的图片,用选取工具选定图片,在工具栏中打开滤镜效果,选择反转效果即可。对于css,css实现翻转效果的方法,首先创建一个演示方块,并为其添加transition和transform属性,然后将transition属性添加到需要翻转的p上,最后添加perspective和transform-style属性即可。