Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

150 ejemplos asombrosos de animación y efectos CSS

1. Tutorial de Swatch Book con CSS3 y jQuery [ Demo ]

Libro de muestras con CSS3 y jQuery

2. Efectos 3D de miniaturas en miniatura [ Demo ]

Efectos 3D en miniatura

3. Tutorial de menú impresionante en CSS3 [ Demo ]

4. Colección de Cool CSS Hover Effects

Hover_css _-_ A_collection_of_CSS3_powered_hover_effects
Este impresionante sitio web consta de más de 100 efectos CSS diferentes, como transiciones 2D, transiciones de fondo, efectos CSS de iconos, transiciones de borde, transiciones de brillo y brillo, efectos CSS de bocadillo de diálogo y efectos de enrollamiento CSS geniales. ¡Echale un vistazo!

5. Colección de ejemplos de animación CSS

Animate_css
Encontrará más de 50 ejemplos de animación CSS en este sencillo sitio web. Efectos de animación de texto en CSS como rebote, desvanecimiento, flipper, entradas con zoom y más.

6. Dominar CSS3 Múltiples Fondos

Dominar CSS3 Múltiples Fondos

7. Estilo de lista desplegable personalizado [ Demo ]

Estilo de lista desplegable personalizado

8. Construye rápidamente una página Swish Teaser con CSS3 [ Demo ]

9. Creciente cartera de miniaturas [ Demo ]

Cartera creciente de miniaturas

10. Interruptores de botón con casillas de verificación y fantasía de CSS3 [ Demo ]

Interruptores de botón con casillas de verificación y fantasía de CSS3

11. Filtros CSS3: Modificación de HTML e imágenes con solo CSS

12. 3D Flipping Circle con CSS3 y jQuery [ Demo ]

3D Flipping Circle con CSS3 y jQuery

13. Cool Product Showcase with CSS3 [ Demo ]

Hacer un escaparate de productos impresionante con CSS3

14. Disposición receptiva solo para CSS con transiciones suaves [ Demo ]

Diseño responsive solo para CSS con transiciones suaves

15. Creando una bola animada en 3D con efecto CSS3 [ Demo ]

Creando una bola animada en 3D con CSS3

16. Haciendo una página Flip Magazine con turn.js [ Demo ]

Haciendo una página Flip Magazine con turn.js

17. Gráfico de barras 3D animado con CSS3 [ Demo ]

Gráfico de barras 3D animado con CSS3

18. Un efecto de presentación de diapositivas de CSS3 puro [ Demo ]

A Pure CSS3 Cycling Slideshow

19. Efecto de superposición de anotación con efecto CSS3 [ Demo ]

Efecto de superposición de anotación con CSS3

20. Crea un gráfico interactivo usando CSS3 y jQuery [ Demo ]

Crea un gráfico interactivo usando CSS3 y jQuery

21. Presentación fluida de CSS3 con efecto de paralaje [ Demo ]

Fluid CSS3 Slideshow con efecto de paralaje

22. Crea un efecto de nota adhesiva con CSS3 y HTML5  [ Demo ]

Crea un efecto de nota adhesiva con CSS3 y HTML5

23. Pestañas de contenido animado con CSS3 [ Demo ]

Pestañas de contenido animado con CSS3

24. Swishy CSS3 Navigation Effect [ Demo ]

Swishy CSS3 de navegación

25. Rotando palabras con ejemplos de animación CSS [ Demo ]

Rotando palabras con animaciones CSS

26. Crea un menú de acordeón en Pure CSS3 [ Demo ]

Crear menú de acordeón en CSS3 puro

27. Formulario de inicio de sesión y registro con HTML5 y CSS3 [ Demo ]

Login y formulario de registro con Html5 y CSS3

28. Una introducción al módulo CSS Flexbox [ Demo ]

Una introducción al módulo CSS Flexbox

29. Responsive Content Navigator con CSS3 [ Demo ]

Responsive Content Navigator con CSS3

30. Recreando el logotipo de IBM Lotusphere en CSS3 [ Demo ]

Recreando el logo de IBM Lotusphere en CSS3

31. Formulario de inicio de sesión tipo Apple con transformaciones CSS 3D [ Demo ]

Formulario de inicio de sesión similar a Apple con transformaciones CSS 3D

32. CSS3 Menú desplegable Tutorial [ Demo ]

Menú desplegable CSS3

33. Hover Effects original con CSS3 [ Demo ]

Efectos originales de Hover con CSS3

34. Menú CSS3 efecto de navegación [ Demo ]

Menú CSS3 efecto de navegación

35. CSS3 con jQuery Reverse Animation [ Demo ]

CSS3 con jQuery / animación inversa

36. Barras de progreso CSS3 [ Demo ]

Barras de progreso CSS3

37. PHP y CSS3 Powered About Page [ Demo ]

Creando un PHP y CSS3 Powered About Page

38. Crear un hermoso icono con CSS3 [ Demo ]

Crear un hermoso icono con CSS3

39. Crear cintas 3D usando CSS3 [ Demo ]

Cómo crear cintas 3D en profundidad y agradables solo con CSS3

40. Crear un formulario de carga usando CSS3, HTML5 y jQuery [ Demo ]

Crea un formulario de carga usando CSS3, HTML5 y jQuery

41. Crea un reproductor de video con jQuery, HTML5 y CSS3 [ Demo ]

Crea un reproductor de video en jQuery, HTML5 y CSS3

42. Domina las nuevas propiedades de diseño CSS [ Demo ]

Domina las nuevas propiedades de diseño CSS

43. Acordeón de imagen con CSS3 [ Demo ]

44. Modern Lightbox con CSS3 y JavaScript [ Demo

Creando un Lightbox Moderno con CSS3 y JavaScript

45. Crear un medidor de fuerza de contraseña CSS [ Demo ]

Crear un hermoso medidor de fuerza de contraseña

46. Slider Slider de pantalla completa con jQuery y CSS3 [ Demo ]

Slider Slider de pantalla completa con jQuery y CSS3

47. La animación de carga de Facebook [ Demo ]

La animación de carga de Facebook.

48. Reloj CSS3 Con jQuery

Utiliza las características básicas de CSS3 Transform: rotate. Y la combinación de marcos de JavaScript como jQuery puede producir un excelente reloj CSS3.

49. Reloj analógico con efecto CSS.

Reloj analógico creado mediante webkit de transición y transformación de CSS. JavaScript solo se utiliza para tirar en el tiempo actual.

50. Cubo 3D que gira usando las teclas de flecha

Puede usar las teclas de arriba, abajo, izquierda y derecha para navegar por el cubo 3D. Este cubo 3D se construye utilizando -webkit-perspective, -webkit-transform y -webkit-transition.

51. Múltiples cubos 3D (deslizar dentro / fuera) Efecto CSS

Múltiples cubos 3D que utilizan CSS3 y propiedades de "transformación" y "transición" propietarias. Pensé que era increíble. Puedes ver la escritura en el objeto 3D.

52. CSS3 Tutorial de Acordeón

Un efecto de acordeón utilizando solo CSS. Animación propietaria en navegadores basados ​​en WebKit.

53. Efecto de animación CSS de paralaje automático de desplazamiento

Auto-Scrolling Parallax es un efecto de paralaje animado que utiliza la propiedad de transición CSS de WebKit, sin necesidad de JavaScript.

54. Isocube Image CSS Effect

Isocube es como 3DCube pero un poco diferente. Isocube puede cargar imágenes en un lado.

55. Galería de imágenes con CSS

56. Matriz

The Matrix es una de las mejores películas de ciencia ficción de todos los tiempos. CSS3 capaz de hacer una película animada tan increíble hecha

57. 7 Alternativas al efecto Javascript usando CSS3

Siete ejemplos de alternativas al efecto Javascript utilizando CSS3. Varios efectos como el Bloqueo de fundido, Bloqueo de pulsos, Empuje, Bloqueo de expansión, Bloqueo de rebote, Bloqueo de giro y Acordeón se tratan aquí.

58. Efectos de desplazamiento de imagen

Image Hover Effects es un ejemplo de uso de CSS para reemplazar Javascript. La imagen se reducirá cuando coloque el puntero del mouse sobre ella.

59. Torneado de lata de coca cola (Control con barra de desplazamiento)

60. Meninas 3D

61. Galería de Polaroid

Polaroid Gallery es una pila animada de fotografías que utilizan una tonelada de nuevos comandos CSS3. Es interesante verlo: cuando el cursor de su mouse esté sobre una imagen, se ampliará.

62. el espacio

63. CSS Mac Dock

Tome una lista de enlaces y cámbielos en una base de iconos de OS X. No es nada menos que increíble.

64. Modales Drop-In

Con los efectos y propiedades de CSS3 en Drop In Modals, puede hacer animaciones rápidas y señales de diseño sutiles.
.

65. Vinilo deslizante

El efecto de vinilo se puede crear utilizando transiciones CSS3 y un poco de HTML. Esto puede hacer para una portada de álbum estándar con un estilo llamativo

66. Zoom Polaroids en CSS3

Polaroids te permite mostrar imágenes en cajas que se barajan y giran como si estuvieran en una pila. Se basa en las técnicas de CSS3 para crear. También puede insertar texto y un atributo alt.

67. Tutorial animado de CSS Rocket

Animated Rocket utiliza efectos CSS para transformar la apariencia de un elemento en el navegador, moviéndolo, girándolo o por otros medios.

68. Cartel Círculo

Cartel del circulo. es una columna giratoria animada que consta de una fila de cuadros de colores y texto. El efecto general es fresco y sin duda vertiginoso.

69. Cubos Morphing

Los cubos transformadores se pueden usar para mostrar el contenido más interesante mediante transformaciones 3D, animaciones y transiciones.

70. Galería animada de Polaroid

Este es el ejemplo de otra Galería Polaroid. Las pilas de imágenes aparecen al azar y cuando el cursor se desplaza sobre una imagen, se amplía.

71. Efecto Spotlight de sombra de CSS

Cuando el cursor se mueve, es como un foco de luz que conduce a la escritura y proyecta una sombra.

72. Reloj colorido

Colorful Clock es un colorido efecto jQuery & CSS3 para crear cuentas regresivas o temporizadores.

73. Galería de CSS y jQuery Lightbox

Lightbox Gallery es una impresionante galería de imágenes que aprovecha las últimas técnicas CSS3 y jQuery. Lightbox Gallery utiliza jQuery, jQuery UI (para el arrastrar y soltar) y el complemento fQQ. Para la visualización de lightbox, además de PHP y CSS para interactividad y estilo.

74. Menú de miniaturas elásticas

El menú de miniaturas elásticas es un método alternativo para suavizar el menú, en particular al aumentar los elementos del menú cuando el mouse se sitúa sobre él.

75. Ejemplo de animación CSS de Coverflow

Esta animación imita el estilo de Apple y combina las transformaciones CSS y jQueryUI. Este realmente anima entre dos medios estados, lo que resulta en un control deslizante como el que se muestra en iTunes.

76. jQuery DJ Hero

DJ Hero usa una interesante combinación de CSS3 con jQuery. Puedes usar los controles en pantalla para controlar el ritmo.

77. Tarjetas de apilamiento dinámico

Este efecto cuenta con una pila dinámica de tarjetas de índice que simplemente utilizan características HTML y CSS3 como cambio y transición (para los efectos dinámicos) y @ font-face, box-shadow y border-radius (para el estilo).

78. Otra galería de imágenes

Este es un ejemplo de otra galería de imágenes que utiliza las transiciones de propiedad y transformación de CSS3.

79. Pila de nieve (Control con teclas de flecha)

80. Columna animada de precios

La animación CSS3 también se puede utilizar en el precio de paquete de un producto. Los precios de columnas animadas se pueden aplicar en tales casos.

81. Slick jQuery Menu

Slick jQuery Menu se logra a través de una combinación de CSS3 y jQuery.

82. Pestañas CSS Sin Javascript

83. Menús Tab sin Javascript

84. Menú SVG Fisheye

La animación CSS puede animar casi cualquier propiedad en el elemento y hacer cosas divertidas, como rotar e inclinar.

85. Hojas cayendo

Como el otoño. Las hojas que caen animadas se hacen usando CSS3.

86. Galería rotativa

Esta es una galería de imágenes con una construcción rotativa con transiciones de transformación CSS y características CSS. Para ver los efectos de la rotación, haga clic en la imagen pequeña.

87. Menú desplegable

El menú desplegable es un menú de navegación muy agradable creado con la propiedad de transición CSS3.

88. Star Wars Crawl

Star Wars abriendo rastreo, usando solo HTML y CSS. Solo funciona en Snow Leopard en Safari 4.0.4 y el WebKit.

89. Notas adhesivas

90. Copos de nieve

91. Otro efecto CSS de ojo de pez

Este es otro ojo de pez que usa CSS3.

92. Animación cuadro por cuadro

La primera demostración requiere que sigas haciendo clic en la imagen para ver el siguiente fotograma, y ​​se ajusta al inicio cuando alcanzas el último fotograma. La segunda demostración solo necesita que el mouse se mueva sobre la imagen en la mayoría de los navegadores. Pero el gran inconveniente de este método es que la velocidad de movimiento del ratón gobierna la velocidad de la animación.

93. AT-AT Walker

Este AT-AT Walker no está basado en flash, sino solo en CSS3. ¡Increíble!

94. Otro acordeón

95. Presentación dinámica sin flash en CSS

96. Menú Slider Smoothie

97. Efectos de animación mágica CSS

efectos cool css

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas