Introducción al artículo de Wulin.com (www.vevb.com): Aprenda un poco de HTML5+CSS3 todos los días, acumule la experiencia lentamente y comience desde lo básico. Lo siguiente presenta principalmente botones de reproductor simples.
Aprenda un poco de HTML5+CSS3 todos los días, acumule la experiencia lentamente y comience desde lo básico. Lo siguiente presenta principalmente botones de juego simples;
Primero, veamos cómo se ve el borde de ajuste cuando el ancho y la altura del div son 0.
El código es el siguiente:
1
Las representaciones de operación son las siguientes:
Entonces, ¿podemos ver algo de esta imagen?
Si eliminamos tres de los bordes, ¿podemos dibujar un triángulo? La respuesta es sí. Con solo un código, puede dibujar un triángulo:
Efecto:
Ahora es fácil dibujar el botón del reproductor. Combinado con algunos consejos de notas de aprendizaje, y un poco de adaptación del código para dibujar el triángulo anterior, es fácil dibujar el último botón del jugador.
El código es el siguiente:
1
Botón de reproductor
Efecto:
Resumen: este simple ejemplo utiliza principalmente el uso de bordes para dibujar triángulos, y transformar ligeramente, como cambiar el ancho del borde o el tamaño del DIV, para dibujar algunos otros gráficos básicos. Además, también se utilizan curvas redondeadas, sombras y transformaciones gráficas en CSS3.