原文链接：https://www.mk2048.com/blog/blog.php?id=j10bh1cbb&title=%E8%B6%85%E8%B5%9E-%E4%BD%BF%E7%94%A8%E4%BC%AA%E9%80%89%E6%8B%A9%E5%99%A8%E5%88%B6%E4%BD%9C%E4%B8%8B%E6%8B%89%E7%AE%AD%E5%A4%B4%E5%9B%BE%E6%A0%87

 

 

// 使用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>

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 });