汉堡按钮的制作以及其中的问题

第一种自己写的，下面的第二种是网上的用一个span使用做出来的

HTML

CSS

*{
   margin: 0px;
   padding: 0px;
}
.box{
   width: 50px;
   height: 50px;
   margin: 100px auto 0px;
   border: 1px solid saddlebrown;
   background-color: rgba(0,0,0,.8);
   position: relative;


}

.box span{
   position: absolute;
   display:block;
   width: 50px; height: 1px;
   border: 1px solid #FFFFFF;
   background-color: #FFFFFF;
   left: 0; right: 0; top: 0; bottom: 0;
   margin: auto;/*用来达到水平垂直，居中*/
   transition: transform .3s ease;

}

/*这里有个问题就是在格式高宽同时设置了margin：auto时候top等属性的移动的时候是2被的数值*/
.box .s1{
top:-47px;/*（重要）这里为什么是-50px，而不是-25px，因为设置了margin：auto，解析每当我的top上升了2px，也就是说下面多了2px，因为margin的存在就会分1px去上面所以感觉就是向上移了1px*/
}
.box .s2{

}
.box .s3{
    top:47px;
}
.box .s1rotate{
   -moz-transform-origin: 30 0; /*以中兴为旋转点，这里可以不用写英文默认就是以中心点旋转*/
   -webkit-transform-origin:30 0;
   -moz-transform-origin: 30 0;
   transform:rotate(45deg);
}
.box .s2translate{ /*下面2个展现方法一个是隐藏中的线，一个是位移出去的*/
   /*transform: scale(0); *//*这个是隐藏*/
   transform: translateX(-55px) ;/*这个是位移*/
}
.box .s3rotate{

   -moz-transform-origin: 30 0;
   -webkit-transform-origin:30 0;
   -moz-transform-origin: 30 0;
   transform:rotate(-45deg);
}

/*第二种的使用*/

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
   span {
   margin: 15% auto;

   width: 45px;
   height: 45px;
   position: relative;
   display: block;
   width: 1.5em;
   height: 0.25em;
   background: #E04681;
   border-radius: 3px;
   cursor: pointer;
   transition: transform .2s ease;
   }
   span:before, span:after {
   border-radius: 3px;
   transition: transform .3s ease;
   }
   span:before {
   content: '';
   display: block;
   position: absolute;
   width: 1.5em;
   height: 0.25em;
   top: -0.5em;
   background: #E04681;
   }
   span:after {
   content: '';
   display: block;
   position: absolute;
   width: 1.5em;
   height: 0.25em;
   top: 0.5em;
   background: #E04681;
   }
   span.close {
   width: 45px;
   height: 45px;
   margin: 15% auto;
   /*left: 10px;*/
   position: relative;
   display: block;
   width: 0;
   height: 0;
   background: transparent;
   transform: rotate(-180deg);
   }
   span.close:before, span.close:after {
   transition: transform .3s ease;
   }
   span.close:before {
   content: '';
   display: block;
   position: absolute;
   width: 1.5em;
   height: 0.25em;
   top: 0;
   background: #E04681;
   transform: rotate(-45deg);
   }
   span.close:after {
   content: '';
   display: block;
   position: absolute;
   width: 1.5em;
   height: 0.25em;
   top: 0;
   background: #E04681;
   transform: rotate(45deg);
   }
   </style>
   </head>
   <body>
       <span class="sdasd sdasdaa"></span>
       <script>
           var btn = document.querySelector("span");
           btn.onclick = function(){

               if(this.className.indexOf('close')>-1?true:false){
                   this.classList.remove("close");
               }else{
                   this.classList.add("close");
               }
               console.log(this.className);

           }
       </script>
   </body>
</html>

汉堡按钮的制作以及其中的问题相关推荐

汉堡按钮html写法,ProtoPie 详解 — 汉堡按钮制作
原标题:ProtoPie 详解 - 汉堡按钮制作每周一期的 ProtoPie 详解教程又来啦,上期马克笔设计留学的MUzi老师主要介绍了 ProtoPie 的交互动作原理<ProtoPie详解 ...
利用Bootstrap制作汉堡按钮（header部分）
页面展示:本次网页header部分的页面效果. 技术要求:Bootstrap布局容器.Bootstrap导航栏制作汉堡按钮的固定写法: 同时需要安装Bootstrap下载安装,下载地址:https: ...
使用Boostrap制作导航栏和汉堡按钮
导航栏制作使用Boostrap制作基础导航栏主要分为以下步骤: 1.事先引入jquery.js.boostrap.min.js和boostrap.min.css文件. 2.添加一个<div&g ...
UI设计素材|汉堡按钮/菜单
汉堡按钮是隐藏菜单的按钮.单击或点击它时,菜单会展开. 汉堡菜单这种菜单(以及按钮)的名称由于它的形状由三条水平线组成,看起来像典型的汉堡包.今天,它是一种广泛使用的移动端页面布局的互动元素 ; 关 ...
纯干货 | UI界面中按钮设计汉堡按钮\菜单
汉堡按钮汉堡菜单按钮(动画) 汉堡按钮它是隐藏菜单的按钮.单击或点击它时,菜单会展开. 美丽的汉堡菜单美丽的汉堡动画菜单汉堡动画菜单这种菜单(以及按钮)的名称由于它的形状由三条水平线组成,看 ...
ps制作html图标素材,PS按钮图标制作
PS按钮图标制作教程:设计简洁风格的半透明科技感按钮图标素材. 3.拉两条参照线.按Ctrl + R 调出标尺,然后用移动工具分别拉一条水平和垂直的参照线,如下图. 4.在工具箱选择"椭圆选 ...
防封链接，无投诉按钮链接，地推链接制作，活动链接制作，防封无投诉按钮链接制作方法。
防封链接,无投诉按钮链接,地推链接制作,活动链接制作,防封无投诉按钮链接制作方法. -->查看制作方法无投诉链接,微信防封链接
html把保留图片改为提交按钮,如何制作图片按钮，并为图片按钮添加提交表单和重置表单功能...
网页中有表单,表单的默认按钮样式不是很好看,很多人为了美观使用图片做按钮. 今天中国在一.图片按钮的制作方法 1. 定义图像形式的提交按钮. 2.用CSS把图片设为按钮的背景 3.作用,设置其bac ...
QT程序按钮效果制作
QT程序按钮效果制作 QT Creator下,建空GUI项目,添加一个Widget,然后设计界面: 最下面的是Widget,上一层放一个frame,用lineEdit,pushButton排列成这效果 ...

汉堡按钮的制作以及其中的问题

汉堡按钮的制作以及其中的问题相关推荐

最新文章

热门文章