Código de CSS - css3: Ejemplo utilización transition cubic-bezier

Imágen de perfil

css3: Ejemplo utilización transition cubic-beziergráfica de visualizaciones


CSS

Publicado el 31 de Julio del 2013 por Xavi
3.634 visualizaciones desde el 31 de Julio del 2013. Una media de 21 por semana
Código que muestra como utilizar transition cubic-bezier para cambiar el fondo de nuestra web (body). Se utiliza jquery.

Versión 1

Publicado el 31 de Julio del 2013gráfica de visualizaciones de la versión: Versión 1
3.635 visualizaciones desde el 31 de Julio del 2013. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo de dicho código aquí
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
    <style>
    .recuadro {width:100px;height:100px;border:1px solid #ccc;margin:5px;}
    #color1 {background:#597326;}
    .color1 {
        background-color:#597326;
        transition: background 1s cubic-bezier(0, .5, 1, .5);
        -webkit-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -moz-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -o-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -ms-transition: background 1s cubic-bezier(0, .5, 1, .5);
    }
    #color2 {background:#d00;}
    .color2 {
        background-color:#d00;
        transition: background 1s cubic-bezier(0, .5, 1, .5);
        -webkit-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -moz-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -o-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -ms-transition: background 1s cubic-bezier(0, .5, 1, .5);
    }
    #color3 {background:yellow;}
    .color3 {
        background-color:yellow;
        transition: background 1s cubic-bezier(0, .5, 1, .5);
        -webkit-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -moz-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -o-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -ms-transition: background 1s cubic-bezier(0, .5, 1, .5);
    }
    #color4 {background:#00aaff;}
    .color4 {
        background-color:#00aaff;
        transition: background 1s cubic-bezier(0, .5, 1, .5);
        -webkit-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -moz-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -o-transition: background 1s cubic-bezier(0, .5, 1, .5);
        -ms-transition: background 1s cubic-bezier(0, .5, 1, .5);
    }
    </style>
 
    <script>
    $(document).ready(function(){
        $(".recuadro").click(function(){
            $("body").removeClass().addClass($(this).attr("id"));
        })
    })
    </script>
    <title>Ejemplo utilización transition cubic-bezier</title>
</head>
 
<body>
    <h1>Ejemplo utilización transition cubic-bezier</h1>
    <div class="recuadro" id="color1" style="background:#597326"></div>
    <div class="recuadro" id="color2" style="background:#d00;"></div>
    <div class="recuadro" id="color3" style="background:yellow;"></div>
    <div class="recuadro" id="color4" style="background:#00aaff;"></div>
 
    <p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</a></p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

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

http://lwp-l.com/s2440