Utiliza principalmente una combinación de dos técnicas:
- Máscara PNG
- SVG
Aquí está la máscara PNG del zapato:
- ¿Puedes mostrar que esta teoría es incorrecta, http://www.creationoftheuniverse.org/?
- ¿Quién puede usar los sitios web de Google?
- Cómo reducir el tiempo de carga del sitio web
- Como propietario de un sitio web basado en Drupal con una base de datos que contiene más de 10 000 entradas, ¿cómo puedo mejorar la búsqueda?
- Cómo hacer que mi sitio web pueda buscarse en China
Como puede ver, la parte marcada del zapato es transparente. Usando un degradado de fondo (en este caso se aplica al elemento que contiene la máscara como imagen de fondo) obtendrá la parte principal del efecto:
Se utiliza la misma técnica para la “parte Shift”
Ahora agregue algunas formas hechas con SVG:
Y obtienes esto:
Luego, cuando tocas este botón, se agregan 3 cosas:
- El color de degradado de fondo se actualiza sin problemas (con un desvanecimiento)
- El color de los sapes son actualizaciones basadas en los colores degradados (observe que están menos saturados / más claros)
- Las posiciones de las formas cambian un poco y luego se restauran
Espero que ayude,
Baptiste
