CSS3实现翻转菜单效果
css3 实现 效果 菜单 翻转
2023-09-27 14:22:40 时间
演示地址
注意:菜单翻转效果在搜狗浏览器上看不出来。推荐用FireFox
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns = "http://www.w3.org/1999/xhtml" > <head> <style type = "text/css" > / * < ![CDATA[* / ul .flipboard { margin: 0 ; padding: 0 ; list-style:none; perspective:10000px; } ul .flipboard li { display:inline-block; width :80px; height :80px; margin-right:10px; background :white; font :bold 36px Arial; text-transform:uppercase; text-align: center ; cursor:pointer; } ul .flipboard li a { display:block; width : 100 %; height : 100 %; color :black; text-decoration:none; outline:none; transitional:all 300ms ease-out 0 .1s; } ul .flipboard li a span { box-sizeing:border-box; padding-top:15px; display:block; width : 100 %; height : 100 %; transition:all 300ms ease-out 0 .1s; } ul .flipboard li :hover a { transform:rotate(180deg); background :#cef1ff; border-radius:7px; box_shadow: 0 0 5px #eee inset; } ul .flipboard li :hover a span { transform:rotateY(180deg); } / *]] > * / </style> <title></title> </head> <body> <ul class = "flipboard" > <li><a href = "#" ><span> k </span></a></li> <li><a href = "#" ><span> o </span></a></li> <li><a href = "#" ><span> k </span></a></li> <li><a href = "#" ><span> i </span></a></li> <li><a href = "#" ><span> n </span></a></li> <li><a href = "#" ><span> g </span></a></li> </ul> </body> </html> |
相关文章
- CSS3 transition实现超酷图片墙动画效果
- 推荐12个漂亮的 CSS3 按钮实现方案
- Linux下唯一的CSS3渐变发生器——Gradiator
- css3 animation 实现环形路径平移动画
- 【JavaScript】HTML5/CSS3实现五彩进度条应用
- css3实现颤动的动画
- CSS3实现基本图形
- CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了
- 《HTML5+CSS3网页设计入门必读》——6.3 调整字体
- 《HTML5+CSS3网页设计入门必读》——导读
- 《响应式Web设计:HTML5和CSS3实践指南》——2.13节基于边框半径的圆角实现
- CSS3实现文字过渡移动
- html5+css3比较好的学习教程和demo效果
- CSS3实现的图片加载动画效果
- CSS3 transform 属性
- HTML5 + CSS3 页面结构学习笔记(五)
- CSS3 Animations
- CSS3 帧动画(Sprite,直译叫雪碧图)