CSS使用伪选择器制作箭头图标_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:43:05
Original
1233 Leute haben es durchsucht

 

 

// 使用Transform的属性,组合translate(位移)和rotate(旋转),将生成的小矩形组合成各种箭头样式;

 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>
Nach dem Login kopieren

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);}
Nach dem Login kopieren

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 });
Nach dem Login kopieren

 

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!