CSS--使用伪选择器制作箭头图标
2015-06-08 18:32
791 查看
// 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式;
HTML
<section class="main"> <header class="title">图标变形过渡效果缩放式菜单</header> <section> <button>图标</button> <header> #300x100 淡色系 </header> <div> <article> <img src="http://www.gbtags.com/gb/laitu/300x100" alt="" /> </article> </div> </section> <section> <button>图标</button> <header> #300x100 暗色系 </header> <div> <article> <img src="http://www.gbtags.com/gb/laitu/300x100/666666/ffffff" alt="" /> </article> </div> </section> </section>
CSS
* { box-sizing:border-box;} body { font-family: 'microsoft yahei',Arial,sans-serif; background: #aaa;} section { position: relative; width:100%;} section.main { position: absolute; top:10%; left:25%; width:50%; max-width:30em; min-width:15em; border-radius:5px; overflow: hidden;} section.main > header { background: orange; color:#fff; line-height: 1.2em; text-align: center;} section section:last-child { border:none;} section > div { height:0; overflow: hidden; transition:all .4s ease-in-out;} article,header { padding:1em; line-height: 1em;} header:not(.title) { width:100%; overflow: hidden; height:3em; background: #efefef; cursor:pointer; color:#888; white-space:nowrap; text-overflow: ellipsis; padding-right: 2.1em;} header:not(.title):hover { background: #e8e8e8;} article { line-height: 1.4em; background: rgba(255, 255, 255, .7);} article img { width:100%; height:auto; border:2px solid white; border-radius: 3px;} /* 使用CSS3的伪选择器,生成关闭和向下两个图标按钮; */ /* 使用变形属性,组合位移和旋转,可将生成的小矩形组合成向下按钮,同样也可以组装成关闭按钮; */ section button { position: absolute; right:0; margin:0; padding:0; height:3em; width:3em; outline:none; border:0; background: none; text-indent: -9999px; pointer-events:none; cursor:pointer;} section button:before, section button:after { content:''; display: block; position: absolute; width:4px; height:12px; background: orange; border-radius: .3em; top:50%; left:50%; transition:all .3s ease-in-out;} /*向左箭头*/ /*section button:before { transform:translate(0%, -50%) rotate(45deg);} section button:after { transform:translate(0%, 0%) rotate(-45deg);}*/ /*向右箭头*/ /*section button:before { transform:translate(0%, -50%) rotate(-45deg);} section button:after { transform:translate(0%, 0%) rotate(45deg);}*/ /*向上箭头*/ /*section button:before { transform:translate(75%, -20%) rotate(-45deg);} section button:after { transform:translate(-75%, -20%) rotate(45deg);}*/ /*向下箭头*/ section button:before { transform:translate(75%, 0%) rotate(45deg);} section button:after { transform:translate(-75%, 0%) rotate(-45deg);} /* 点击之后需要变成"X"; */ section.open button:after,section.open button:before { background: red; height:14px; } section.open button:before { transform:translate(-75%, -20%) rotate(45deg);} section.open button:after { transform:translate(-75%, -20%) rotate(-45deg);}
JavaScript
$(function(){ $('section section header').on('click', function () { var $this = $(this), parent_section = $this.parent(), closeDiv = $this.siblings('div'), contentheight = closeDiv.children('article').outerHeight(); (closeDiv.height() === 0 ) ? closeDiv.height(contentheight) : closeDiv.height(0); // 更改容器高度; $this.parents('section').first().toggleClass('open'); // 更改箭头样式; }); });
相关文章推荐
- 知道一个div的宽高背景色,如何不通过写在行间样式的办法更改样式?currentStyle(只兼容ie),getComeputedStyle(兼容)-->获取非行间样式
- CSS postion 相对定位、绝对定位、固定定位
- CSS关于绝对位置与相对位置的理解
- CSS中position详解与常见应用实现
- 举例详解CSS中的cursor属性
- css布局样式属性【text-overflow】
- CSS设计之页面滚动条出现时防止页面跳动的方法
- 使用CSS时间打点的Loading效果的教程
- css div position to parent
- 通过position属性实现文本在页面中的任意位置
- 使用CSS代码的空格实现中文对齐的方法
- 深入理解CSS的height:100%和height:inherit之间的使用区别
- CSS3 @font-face
- css3 shadow实现的各种漂亮阴影效果
- css3大小单位px、pt、em和rem的区别
- CSS实现垂直居中的5种方法
- 让IE6支持css3,让 IE7、IE8 都支持CSS3
- css定位
- CSS3 icon font
- css sprite、background-size、Retina屏幕详解