Tema: Extraño suceso con CSS3
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/12/2012, 13:50
manuxdjent
 
Fecha de Ingreso: marzo-2012
Mensajes: 77
Antigüedad: 12 años, 7 meses
Puntos: 0
Extraño suceso con CSS3
Le tengo puesto a los divs "venda" y "lloguer" una transición en CSS3 con un hover, lo extraño es que cuando se está efectuando la transición, la imagen que tengo detrás del botón se mueve de manera extraña.

http://inmobiliaria.xtrweb.com/plantilla

Está es la hoja de estilos:

Código CSS: 
Ver original
  1. body{
  2. margin:0;
  3. background-image:url(1.jpg);
  4. background-size:100% 100%;
  5. }
  6. @font-face{
  7.  
  8. font-family:ostrich-black;
  9. src: url(fuentes/ostrich-black.ttf) format('truetype');
  10.  
  11. }
  12. #cabecera{
  13.  
  14. height:300px;
  15.  
  16. }
  17. #cabecera img{
  18. display:block;
  19. margin:0 auto;
  20. height:200px;
  21. width:558px;
  22. margin-bottom:50px;
  23. margin-top:30px;
  24. -webkit-animation-name: logo    ;
  25. -webkit-animation-timing-function: linear;
  26. -webkit-animation-duration: 3s;
  27. -moz-animation-name: logo   ;
  28. -moz-animation-timing-function: linear;
  29. -moz-animation-duration: 3s;
  30.  
  31. }
  32. @-webkit-keyframes logo {
  33.   from {  opacity:0;  }
  34.   to   { opacity:1; }
  35. }
  36. @-moz-keyframes logo {
  37.   from {  opacity:0;  }
  38.   to   { opacity:1; }
  39. }
  40.  
  41. #contenido{
  42. width:100%;
  43. -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  44. box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  45. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  46. height:800px;
  47. background-image:url(490.jpg);
  48. z-index:999;
  49. position:absolute;
  50.  
  51. }
  52. #botones {
  53. width:420px;
  54. margin:0 auto;
  55. height:40px;
  56. z-index:-1;
  57.  
  58. }
  59. #venda{
  60. width:200px;
  61. height:50px;
  62. background-color:#FFA200;
  63. -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  64. box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  65. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  66. -webkit-border-radius:15px 15px 0 0;
  67. border-radius:15px 15px 0 0;
  68. margin:0 auto;
  69. float:left;
  70. text-align:center;
  71. line-height: 50px;
  72.     -webkit-transition-property: all;
  73.     -webkit-transition-duration: 1s;
  74.     -webkit-transition-timing-function: ease;
  75.     -webkit-transition-delay: 0.1s;
  76.     -moz-transition-property: all;
  77.     -moz-transition-duration: 1s;
  78.     -moz-transition-timing-function: ease;
  79.     -moz-transition-delay: 0.1s;
  80.     color:white;
  81. font-family:ostrich-black;
  82. font-size:30px;
  83. background-image:url(patron.jpg);
  84. }
  85. #venda:hover{
  86. margin-top:-10px;
  87. }
  88. #lloguer:hover{
  89. margin-top:-10px;
  90. }
  91.  
  92. #lloguer{
  93. width:200px;
  94. height:50px;
  95. background-color:#FFA200;
  96. -webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  97. box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  98. -moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
  99. -webkit-border-radius:15px 15px 0 0;
  100. border-radius:15px 15px 0 0;
  101. margin:0 auto;
  102. float:left;
  103. margin-left:20px;
  104. text-align:center;
  105. line-height: 50px;
  106.     -webkit-transition-property: all;
  107.     -webkit-transition-duration: 1s;
  108.     -webkit-transition-timing-function: ease;
  109.     -webkit-transition-delay: 0.1s;
  110.         -moz-transition-property: all;
  111.     -moz-transition-duration: 1s;
  112.     -moz-transition-timing-function: ease;
  113.     -moz-transition-delay: 0.1s;
  114.         color:white;
  115. font-family:ostrich-black;
  116. font-size:30px;
  117. background-image:url(patron.jpg);
  118. }

Y éste el html:

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <HTML>
  3. <HEAD>
  4.     <LINK rel="stylesheet" href="estilo.css">
  5. </HEAD>
  6. <BODY>
  7.     <DIV id="cabecera">
  8.         <IMG src="logo.png"/>
  9.     </DIV>
  10.     <DIV id="botones">
  11.             <DIV id="venda">
  12.                 VENDA
  13.             </DIV>
  14.             <DIV id="lloguer">
  15.                 LLOGUER
  16.             </DIV>
  17.     </DIV>
  18.         <DIV id="contenido">
  19.         </DIV>
  20.     
  21. </BODY>
  22. </HTML>

Espero que me podáis ayudar, gracias y un saludo.