API tools faq
paste
asimryu

햄버거 버튼 애니메이션

asimryu
Oct 19th, 2020 (edited)
189
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>햄버거 아이콘 애니메이션</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.  
  13.         /* Icon 1 */
  14.  
  15.         #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  16.         width: 60px;
  17.         height: 45px;
  18.         position: relative;
  19.         margin: 50px auto;
  20.         -webkit-transform: rotate(0deg);
  21.         -moz-transform: rotate(0deg);
  22.         -o-transform: rotate(0deg);
  23.         transform: rotate(0deg);
  24.         -webkit-transition: .5s ease-in-out;
  25.         -moz-transition: .5s ease-in-out;
  26.         -o-transition: .5s ease-in-out;
  27.         transition: .5s ease-in-out;
  28.         cursor: pointer;
  29.         }
  30.  
  31.         #nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  32.         display: block;
  33.         position: absolute;
  34.         height: 9px;
  35.         width: 100%;
  36.         background: #d3531a;
  37.         border-radius: 9px;
  38.         opacity: 1;
  39.         left: 0;
  40.         -webkit-transform: rotate(0deg);
  41.         -moz-transform: rotate(0deg);
  42.         -o-transform: rotate(0deg);
  43.         transform: rotate(0deg);
  44.         -webkit-transition: .25s ease-in-out;
  45.         -moz-transition: .25s ease-in-out;
  46.         -o-transition: .25s ease-in-out;
  47.         transition: .25s ease-in-out;
  48.         }
  49.  
  50.         #nav-icon1 span:nth-child(1) {
  51.         top: 0px;
  52.         }
  53.  
  54.         #nav-icon1 span:nth-child(2) {
  55.         top: 18px;
  56.         }
  57.  
  58.         #nav-icon1 span:nth-child(3) {
  59.         top: 36px;
  60.         }
  61.  
  62.         #nav-icon1.open span:nth-child(1) {
  63.         top: 18px;
  64.         -webkit-transform: rotate(135deg);
  65.         -moz-transform: rotate(135deg);
  66.         -o-transform: rotate(135deg);
  67.         transform: rotate(135deg);
  68.         }
  69.  
  70.         #nav-icon1.open span:nth-child(2) {
  71.         opacity: 0;
  72.         left: -60px;
  73.         }
  74.  
  75.         #nav-icon1.open span:nth-child(3) {
  76.         top: 18px;
  77.         -webkit-transform: rotate(-135deg);
  78.         -moz-transform: rotate(-135deg);
  79.         -o-transform: rotate(-135deg);
  80.         transform: rotate(-135deg);
  81.         }
  82.  
  83.         /* Icon 2 */
  84.  
  85.         #nav-icon2 {
  86.         }
  87.  
  88.         #nav-icon2 span {
  89.         display: block;
  90.         position: absolute;
  91.         height: 9px;
  92.         width: 50%;
  93.         background: #d3531a;
  94.         opacity: 1;
  95.         -webkit-transform: rotate(0deg);
  96.         -moz-transform: rotate(0deg);
  97.         -o-transform: rotate(0deg);
  98.         transform: rotate(0deg);
  99.         -webkit-transition: .25s ease-in-out;
  100.         -moz-transition: .25s ease-in-out;
  101.         -o-transition: .25s ease-in-out;
  102.         transition: .25s ease-in-out;
  103.         }
  104.  
  105.         #nav-icon2 span:nth-child(even) {
  106.         left: 50%;
  107.         border-radius: 0 9px 9px 0;
  108.         }
  109.  
  110.         #nav-icon2 span:nth-child(odd) {
  111.         left:0px;
  112.         border-radius: 9px 0 0 9px;
  113.         }
  114.  
  115.         #nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
  116.         top: 0px;
  117.         }
  118.  
  119.         #nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
  120.         top: 18px;
  121.         }
  122.  
  123.         #nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
  124.         top: 36px;
  125.         }
  126.  
  127.         #nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
  128.         -webkit-transform: rotate(45deg);
  129.         -moz-transform: rotate(45deg);
  130.         -o-transform: rotate(45deg);
  131.         transform: rotate(45deg);
  132.         }
  133.  
  134.         #nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
  135.         -webkit-transform: rotate(-45deg);
  136.         -moz-transform: rotate(-45deg);
  137.         -o-transform: rotate(-45deg);
  138.         transform: rotate(-45deg);
  139.         }
  140.  
  141.         #nav-icon2.open span:nth-child(1) {
  142.         left: 5px;
  143.         top: 7px;
  144.         }
  145.  
  146.         #nav-icon2.open span:nth-child(2) {
  147.         left: calc(50% - 5px);
  148.         top: 7px;
  149.         }
  150.  
  151.         #nav-icon2.open span:nth-child(3) {
  152.         left: -50%;
  153.         opacity: 0;
  154.         }
  155.  
  156.         #nav-icon2.open span:nth-child(4) {
  157.         left: 100%;
  158.         opacity: 0;
  159.         }
  160.  
  161.         #nav-icon2.open span:nth-child(5) {
  162.         left: 5px;
  163.         top: 29px;
  164.         }
  165.  
  166.         #nav-icon2.open span:nth-child(6) {
  167.         left: calc(50% - 5px);
  168.         top: 29px;
  169.         }
  170.  
  171.         /* Icon 3 */
  172.  
  173.         #nav-icon3 span:nth-child(1) {
  174.         top: 0px;
  175.         }
  176.  
  177.         #nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  178.         top: 18px;
  179.         }
  180.  
  181.         #nav-icon3 span:nth-child(4) {
  182.         top: 36px;
  183.         }
  184.  
  185.         #nav-icon3.open span:nth-child(1) {
  186.         top: 18px;
  187.         width: 0%;
  188.         left: 50%;
  189.         }
  190.  
  191.         #nav-icon3.open span:nth-child(2) {
  192.         -webkit-transform: rotate(45deg);
  193.         -moz-transform: rotate(45deg);
  194.         -o-transform: rotate(45deg);
  195.         transform: rotate(45deg);
  196.         }
  197.  
  198.         #nav-icon3.open span:nth-child(3) {
  199.         -webkit-transform: rotate(-45deg);
  200.         -moz-transform: rotate(-45deg);
  201.         -o-transform: rotate(-45deg);
  202.         transform: rotate(-45deg);
  203.         }
  204.  
  205.         #nav-icon3.open span:nth-child(4) {
  206.         top: 18px;
  207.         width: 0%;
  208.         left: 50%;
  209.         }
  210.  
  211.         /* Icon 4 */
  212.  
  213.         #nav-icon4 {
  214.         }
  215.  
  216.         #nav-icon4 span:nth-child(1) {
  217.         top: 0px;
  218.         -webkit-transform-origin: left center;
  219.         -moz-transform-origin: left center;
  220.         -o-transform-origin: left center;
  221.         transform-origin: left center;
  222.         }
  223.  
  224.         #nav-icon4 span:nth-child(2) {
  225.         top: 18px;
  226.         -webkit-transform-origin: left center;
  227.         -moz-transform-origin: left center;
  228.         -o-transform-origin: left center;
  229.         transform-origin: left center;
  230.         }
  231.  
  232.         #nav-icon4 span:nth-child(3) {
  233.         top: 36px;
  234.         -webkit-transform-origin: left center;
  235.         -moz-transform-origin: left center;
  236.         -o-transform-origin: left center;
  237.         transform-origin: left center;
  238.         }
  239.  
  240.         #nav-icon4.open span:nth-child(1) {
  241.         -webkit-transform: rotate(45deg);
  242.         -moz-transform: rotate(45deg);
  243.         -o-transform: rotate(45deg);
  244.         transform: rotate(45deg);
  245.         top: -3px;
  246.         left: 8px;
  247.         }
  248.  
  249.         #nav-icon4.open span:nth-child(2) {
  250.         width: 0%;
  251.         opacity: 0;
  252.         }
  253.  
  254.         #nav-icon4.open span:nth-child(3) {
  255.         -webkit-transform: rotate(-45deg);
  256.         -moz-transform: rotate(-45deg);
  257.         -o-transform: rotate(-45deg);
  258.         transform: rotate(-45deg);
  259.         top: 39px;
  260.         left: 8px;
  261.         }
  262.     </style>
  263. </head>
  264. <body>
  265.     <div id="nav-icon1">
  266.         <span></span>
  267.         <span></span>
  268.         <span></span>
  269.     </div>
  270.     <div id="nav-icon2">
  271.         <span></span>
  272.         <span></span>
  273.         <span></span>
  274.         <span></span>
  275.         <span></span>
  276.         <span></span>
  277.     </div>
  278.     <div id="nav-icon3">
  279.         <span></span>
  280.         <span></span>
  281.         <span></span>
  282.         <span></span>
  283.     </div>
  284.     <div id="nav-icon4">
  285.         <span></span>
  286.         <span></span>
  287.         <span></span>
  288.     </div>
  289.     <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  290.     <script>
  291.         $(document).ready(function(){
  292.             $('#nav-icon1,#nav-icon2,#nav-icon3,#nav-icon4').click(function(){
  293.                 $(this).toggleClass('open');
  294.             });
  295.         });        
  296.     </script>
  297.     <!-- original code from "https://codepen.io/designcouch/pen/Atyop" -->
  298. </body>
  299. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!