Home >Web Front-end >HTML Tutorial >CSS uses pseudo-selectors to make arrow icons_html/css_WEB-ITnose

CSS uses pseudo-selectors to make arrow icons_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:43:051290browse

// Use the properties of Transform to combine translate (displacement) and rotate (rotation) to generate a small rectangle Combined into various arrow styles;

HTML

 1 <section class="main"> 2     <header class="title">图标变形过渡效果缩放式菜单</header> 3     <section> 4         <button>图标</button> 5         <header> 6  #300x100 淡色系  7         </header> 8         <div> 9             <article>10                 <img src="http://www.gbtags.com/gb/laitu/300x100" alt="" />11             </article>12         </div>13     </section>14     <section>15         <button>图标</button>16         <header>17  #300x100 暗色系 18         </header>19         <div>20             <article>21                 <img src="http://www.gbtags.com/gb/laitu/300x100/666666/ffffff" alt="" />22             </article>23         </div>24     </section>25 </section>

CSS

 1 * { box-sizing:border-box;} 2 body { font-family: 'microsoft yahei',Arial,sans-serif; background: #aaa;} 3 section { position: relative; width:100%;} 4 section.main { position: absolute; top:10%; left:25%; width:50%; max-width:30em; min-width:15em; border-radius:5px; overflow: hidden;} 5 section.main > header { background: orange; color:#fff; line-height: 1.2em; text-align: center;} 6 section section:last-child { border:none;} 7 section > div { height:0; overflow: hidden; transition:all .4s ease-in-out;} 8 article,header { padding:1em; line-height: 1em;} 9 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;}10 header:not(.title):hover { background: #e8e8e8;}11 article { line-height: 1.4em; background: rgba(255, 255, 255, .7);}12 article img { width:100%; height:auto; border:2px solid white; border-radius: 3px;}13 14 /* 使用CSS3的伪选择器,生成关闭和向下两个图标按钮; */15 /* 使用变形属性,组合位移和旋转,可将生成的小矩形组合成向下按钮,同样也可以组装成关闭按钮; */16 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;}17 section button:before, 18 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;}19 20 /*向左箭头*/21 /*section button:before { transform:translate(0%, -50%) rotate(45deg);} 22 section button:after { transform:translate(0%, 0%) rotate(-45deg);}*/23 24 /*向右箭头*/25 /*section button:before { transform:translate(0%, -50%) rotate(-45deg);} 26 section button:after { transform:translate(0%, 0%) rotate(45deg);}*/27 28 /*向上箭头*/29 /*section button:before { transform:translate(75%, -20%) rotate(-45deg);} 30 section button:after { transform:translate(-75%, -20%) rotate(45deg);}*/31 32 /*向下箭头*/33 section button:before { transform:translate(75%, 0%) rotate(45deg);} 34 section button:after { transform:translate(-75%, 0%) rotate(-45deg);}35 36 37 /* 点击之后需要变成"X"; */38 section.open button:after,section.open button:before { background: red; height:14px; }39 section.open button:before { transform:translate(-75%, -20%) rotate(45deg);}40 section.open button:after { transform:translate(-75%, -20%) rotate(-45deg);}

JavaScript

 1 $(function(){ 2     $('section section header').on('click', function () { 3         var $this = $(this), 4             parent_section = $this.parent(), 5             closeDiv = $this.siblings('div'), 6             contentheight = closeDiv.children('article').outerHeight(); 7         (closeDiv.height() === 0 ) ? closeDiv.height(contentheight) : closeDiv.height(0);    8         // 更改容器高度; 9         $this.parents('section').first().toggleClass('open');10         // 更改箭头样式;11     });12 });

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn