# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.DS_Store
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Animated Hamburger</title>
<style>
.container{
margin: 48px;
}
.line{
width: 48px;
height: 6px;
margin: 6px 0;
background: black;
border-radius: 4px;
}
.container:hover > .line{
background: teal;
transition: 0.4s ease-out;
}
.clicked > .line{
transform: rotateZ(30deg);
transition: 0.3s ease-in;
}
</style>
</head>
<body>
<div class="container" id="ham">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<script>
var ham = document.getElementById("ham");
ham.onclick = function(){
ham.classList.toggle("clicked");
}
</script>
</body>
</html>