Depot43-Unterlagen - Ikone "Hamburger"

HTML Elemente
            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Ikone "Hamburger"</title>
	<style>
        div.rotated1 {
            position:relative;
            width:50px;
            height:5px;
            margin-bottom: 6px;
            background-color:  red;
            animation: myanim-rot1 10s infinite;
        }
        div.rotated2 {
            position:relative;
            width:50px;
            height:5px;
            margin-bottom: 6px;
            background-color:  red;
            animation: myanim-rot2 10s infinite;
        }
        div.rotated3 {
            position:relative;
            width:50px;
            height:5px;
            margin-bottom: 6px;
            background-color:  red;
            animation: myanim-rot3 10s infinite;
        }
        button {
            border:none;
            background:transparent;
            cursor:pointer;
        }

        /* KeyFrames die Angaben für die Animation *****************************/
       
        @keyframes myanim-rot1 {
            0% {transform: rotate(0Deg);top:0px;}
            10% {transform: rotate(45Deg);top:20px;}
            90% {transform: rotate(45Deg);top:20px;}
            100% {transform: rotate(0Deg);top:0px;}
        }
	@keyframes myanim-rot2 {
            0% {opacity:1;}
            5% {opacity: 0;}
            95% {opacity: 0;}
            100% {opacity:1;}
        }
        @keyframes myanim-rot3 {
            0% {transform: rotate(0Deg);}
            10% {transform: rotate(-45Deg);}
            90% {transform: rotate(-45Deg);}
            100% {transform: rotate(0Deg);}
        }
	</style>
</head>
<body>
   <h1>Rotation - "Hamburger" - Vom Navigationsbutton zum Kreuz</h1>

        <button selected="selected">
            <div class="rotated1"></div>
            <div class="rotated2"></div>
            <div class="rotated3"></div>
        </button>
</body>
</html>


 

            
Ohne Javascript!

Was CSS nicht kann, ist das Bereitstellen eines bauchbaren Event-Handlers. Dies wird meist mit Javascript oder ganz kurz mit JQuery ausgeführt.