Advertisement
Hadi1989

Untitled

Aug 17th, 2022
574
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 1.12 KB | None | 0 0
  1.  
  2. body{
  3.  
  4.     margin: 0;
  5.  
  6.     padding: 0;
  7.  
  8.     background: #ff5c40;
  9.  
  10. }
  11.  
  12. .icon{
  13.  
  14.     position: absolute;
  15.  
  16.     top: 50%;
  17.  
  18.     left: 50%;
  19.  
  20.     transform: translate(-50%,-50%);
  21.  
  22.     width: 80px;
  23.  
  24.     height: 80px;
  25.  
  26.     cursor: pointer;
  27.  
  28.     background: #000;
  29.  
  30. }
  31.  
  32. .hamburger{
  33.  
  34.     width: 50px;
  35.  
  36.     height: 6px;
  37.  
  38.     background: #fff;
  39.  
  40.     position: absolute;
  41.  
  42.     top: 50%;
  43.  
  44.     left: 50%;
  45.  
  46.     transform: translate(-50%,-50%);
  47.  
  48.     box-shadow: 0 2px 5px rgb(0,0,0,.2);
  49.  
  50.     transition: .5s;
  51.  
  52. }
  53.  
  54. .hamburger:before,
  55.  
  56. .hamburger:after{
  57.  
  58.     content: '';
  59.  
  60.     position: absolute;
  61.  
  62.     width:  50px;
  63.  
  64.     height: 6px;
  65.  
  66.     background: #fff;
  67.  
  68.     box-shadow: 0 2px 5px rgb(0,0,0,.2);
  69.  
  70.     transition: 5s;
  71.  
  72. }
  73.  
  74.  
  75.  
  76. .hamburger:before{
  77.  
  78.     top: -16px;
  79.  
  80. }
  81.  
  82. .hamburger:after{
  83.  
  84.     top: 16px;
  85.  
  86. }
  87.  
  88. .icon.active .hamburger{
  89.  
  90.     background: rgba(0,0,0,0);
  91.  
  92.     box-shadow: 0 2px 5px rgb(0,0,0,0);
  93.  
  94. }
  95.  
  96. .icon.active .hamburger:before{
  97.  
  98.     top: 0;
  99.  
  100.     transform: rotate(45deg);
  101.  
  102. }
  103.  
  104. .icon.active .hamburger:after{
  105.  
  106.     top: 0;
  107.  
  108.     transform: rotate(135deg);
  109.  
  110. }
  111.  
  112.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement