Código de HTML - Menu Animado Responsive HTML5 & CSS3

Imágen de perfil

Menu Animado Responsive HTML5 & CSS3gráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 07 de Diciembre del 2014 por Terry (Creado el 25 de Noviembre del 2014)
2.724 visualizaciones desde el 25 de Noviembre del 2014. Una media de 28 por semana
Este es un menu en donde al poner el cursor el elemento gira ya tambien responsive
image1
Responsive

image2

espero les sirva en algo, gracias a todos, no olviden dejar sus comentarios o sugerencias.
Y visiten mi blog
www.elgatocoder.com

A.1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 25 de Noviembre del 2014gráfica de visualizaciones de la versión: A.1
2.725 visualizaciones desde el 25 de Noviembre del 2014. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE HTML>
<!--
 wwww.elgatocoder.com
 pueden usar este codigo como se les de la gana :=)\
 no olviden dejar sus comentarios o sugerencias
 a y siganos en facebook.
-->
<html>
    <head>
        <title>animated manu www.elgatocoder.com</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            @charset 'UTF-8';
            @import url(http://fonts.googleapis.com/css?family=Indie+Flower);
 
            /*********************************************************************************/
            /* coded by www.elgatocoder.com
               visitanos!!! y sigenos en facebook                                            */
            /*********************************************************************************/
            /* cssreset.com */
            * {
                margin: 0;
                padding: 0;
            }
            /* cssreset.com */
 
            body
            {
                background: #191919;
                /* maybe an option C63D0F       */
            }
 
            header
            {
                position: relative;
                border-bottom: solid 2px #e5e5e5;
                padding: 7em 0 0 0;
                text-align: center;
            }
            #nav
            {
                position: absolute;
                top: 3em;
                font-family: 'Indie Flower', cursive;
                left: 0;
                width: 100%;
            }
 
            #nav  ul  li
            {
                display: inline-block;
                padding-right: 2em;
            }
 
            #nav ul  li  a
            {
                display: block;
                text-decoration: none;
                text-transform: uppercase;
                font-weight: 800;
                color: #5F9EA0;
                outline: 0;
                -moz-transition:all 0.7s ease;
                transition:all 0.7s ease;
                -webkit-transition:all 0.7s ease;
            }
 
            #nav  ul li.active  a ,
            #nav ul  li:hover  a 
            {
                color:#EEE8AA;
                -moz-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            }
 
            @media screen and (max-width: 600px){
 
                #nav{
                    background:#250606;
                    top:0;
                    padding:0;
                }
 
                #nav ul li {
                    float: none;
                    display: block;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-weight: 800;
                    color: #5F9EA0;
                    outline: 0;
                    -moz-transition:none;
                    transition:none;
                    -webkit-transition:none;
                }
 
                #nav ul li a {
                    width: 100%;
                    border-bottom: 1px solid #fff;
                }
 
 
                #nav > ul > li.active > a ,
                #nav > ul > li:hover > a {
                    color:#EEE8AA;
                    -moz-transform: none;
                    -ms-transform: none;
                    transform: none;
                    -webkit-transform: none;
                }
            }
        </style>
    </head>
    <body>
        <header>
            <nav id="nav">
                <ul>
                    <li class="active" ><a  href="index.html">Home</a></li>
                    <li><a href="#" >Blog</a></li>
                    <li><a  href="#">Page</a></li>
                    <li><a  href="#">About</a></li>
                    <li><a  href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>



Comentarios sobre la versión: A.1 (3)

Víctor Magaña
25 de Noviembre del 2014
estrellaestrellaestrellaestrellaestrella
Excelente artículo, es lo que me fascina de CSS3 la forma en la que las animaciones se pueden ver elegantes y sin tanta complicación en el código, y a partir de esto podemos nosotros ponerle nuestro estilo y las páginas dejan de ser comunes y lo mejor es que son hechas a mano, un saludo.
Responder
Lis
19 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
Me encanto.. me parecio muy gracioso y original
Responder
Jose Miguel
23 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
Me gusto mucho...es genial.
Responder

Comentar la versión: A.1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2877