• 超赞-使用伪选择器制作下拉箭头图标
  • EVAN 发表于 2015/6/10 13:18:00 | 分类标签: css3 渐入渐出 选择器
  •  

     

    // 使用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 });
    复制代码
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:EVAN
  • 加入时间:2014/6/1 14:45:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮