CSS垂直翻转背景图片重用实例页面(类似淘宝的上下倒三角)
2012-08-09 09:28
891 查看
淘宝网顶部条条上下拉列表项都有个向下的卡哇伊的小三角,如下图所示:
![](http://www.html-5.cn/upload/201112/111206184659901.png)
鼠标移上去小三角就会转向:
![](http://www.html-5.cn/upload/201112/111206184659902.png)
但是呢,淘宝的做法是让小三角旋转个180度,啧啧啧,这里的小三角幸好是左右对称的,如果是长得类似◢的小三角,就只有望洋兴叹的份了。所以,为了更广泛地适应各类翻转情况,不要去使用180度的旋转了,直接使用翻转,OK,本部分的demo效果虽然与淘宝首页的三角效果有些类似,但是,实现的原理是截然不同的,淘宝的是旋转,而我的demo是翻转。
你可以看到如下的效果变化(默认 → 鼠标移上去):
![](http://www.html-5.cn/upload/201112/111206184659903.png)
→
![](http://www.html-5.cn/upload/201112/111206184659904.png)
好处啊什么的我就不牛皮了,结语啊什么的也都省了,一切尽在不言中。
CSS代码:
HTML代码:
JS代码:
![](http://www.html-5.cn/upload/201112/111206184659901.png)
鼠标移上去小三角就会转向:
![](http://www.html-5.cn/upload/201112/111206184659902.png)
但是呢,淘宝的做法是让小三角旋转个180度,啧啧啧,这里的小三角幸好是左右对称的,如果是长得类似◢的小三角,就只有望洋兴叹的份了。所以,为了更广泛地适应各类翻转情况,不要去使用180度的旋转了,直接使用翻转,OK,本部分的demo效果虽然与淘宝首页的三角效果有些类似,但是,实现的原理是截然不同的,淘宝的是旋转,而我的demo是翻转。
你可以看到如下的效果变化(默认 → 鼠标移上去):
![](http://www.html-5.cn/upload/201112/111206184659903.png)
→
![](http://www.html-5.cn/upload/201112/111206184659904.png)
好处啊什么的我就不牛皮了,结语啊什么的也都省了,一切尽在不言中。
CSS代码:
/*垂直翻转*/ .flipy{ -moz-transForm:scaleY(-1); -webkit-transform:scaleY(-1); -o-transform:scaleY(-1); transform:scaleY(-1); /*IE*/ filter:FlipV; } /*css三角,均是向下方向*/ .cor{display:inline-block; width:0; height:0; margin-bottom:-2px; border-width:4px; border-style:solid dashed dashed; overflow:hidden;} /*深灰色*/ .corg6{border-color:#666 transparent transparent;} .menu{display:inline-block; padding:2px 8px; border:1px solid #fff; color:#333;} .menu:hover{background-color:#f5f5f5; border:1px solid #ccc; text-decoration:none;} .menu:hover .cor{margin-bottom:auto; vertical-align:2px;}
HTML代码:
<a href="javascript:" id="menu" class="menu">我的淘宝<i id="flipCor" class="cor corg6"></i></a>
JS代码:
$("#menu").bind("mouseover", function() { $("#flipCor").addClass("flipy"); }).bind("mouseout", function() { $("#flipCor").removeClass("flipy"); });
相关文章推荐
- CSS实例:利用CSS定位背景图片
- CSS 图片浮动导致页面无垂直拓展
- 笔记-CSS空背景图片会导致页面被加载两次
- CSS解决页面图片水平垂直居中问题的方法
- 页面背景 跟ps软件png图片背景的样式css
- 背景图片自适应整个页面CSS+DIV
- CSS垂直翻转/水平翻转提高web页面资源重用性
- 【DIV+CSS】DIV背景图片水平垂直居中
- CSS垂直翻转/水平翻转提高web页面资源重用性
- div+css:页面整体布局居中显示:上下居中||垂直居中,左右居中||水平居中
- CSS布局:图片在DIV中上下左右居中(水平和垂直都居中)
- 使用css制作标签的三角按钮上下翻转
- CSS布局:设置图片在DIV中上下左右居中(水平和垂直都居中)
- 通过css将多个图标或图片用同一张图片通过定位背景位置调用到页面
- css中页面的背景图片代码
- [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络)
- css中页面的背景图片代码
- 【学习摘记】马士兵HTML & CSS_课时2_链接到页面的某个具体位置、背景图片与引用路径
- css 背景图片定位在菜单效果中的应用实例
- Android一个类似腾讯 QQ 背景图片可以上下左右移动的 imageview