?

?

// 使用Transform的屬性，組合translate（位移）和rotate（旋轉(zhuǎn)），將生成的小矩形組合成各種箭頭樣式；

?HTML

1 <section class="main"> 2 <header class="title">圖標(biāo)變形過渡效果縮放式菜單</header> 3 <section> 4 <button>圖標(biāo)</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>圖標(biāo)</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的偽選擇器,生成關(guān)閉和向下兩個圖標(biāo)按鈕; */ 15 /* 使用變形屬性,組合位移和旋轉(zhuǎn),可將生成的小矩形組合成向下按鈕,同樣也可以組裝成關(guān)閉按鈕; */ 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 });

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/yizihan/p/4561666.html

總結(jié)

以上是生活随笔為你收集整理的CSS--使用伪选择器制作箭头图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。