Introducción al artículo de Wulin.com (www.vevb.com): Recientemente, comencé a aprender HTML5+CSS3, practicar CSS3 y dibujar varios botones de reproductor.
Recientemente comencé a aprender HTML5+CSS3, practiqué CSS3 y dibujé varios botones de jugador. Si tienes alguna sugerencia mejor, espero que puedas señalar ...
<! Doctype>
<html>
<Evista>
<meta charset = utf-8 />
<estilo>
cuerpo{
Antecedentes:#000;
}
encabezamiento{
Font-Family: Microsoft Yahei;
tamaño de fuente: 30px;
Color:#990000;
}
.círculo{
Ancho: 120px;
Altura: 120px;
-WebKit-Border-Radius: 60px;
-Moz-Border-Radius: 60px;
Border-Radius: 60px;
borde: 2px #fff sólido;
flotante: izquierda;
margen: 10px;
cursor: puntero;
}
.circle: hover, .circle1: hover {
-Webkit-box-shadow: RGBA (255,255,255,0.6) 0 0 15px;
-Moz-Box-Shadow: RGBA (255,255,255,0.6) 0 0 15px;
Shadow de caja: RGBA (255,255,255,0.6) 0 0 15px;
}
.circle1 {
Ancho: 140px;
Altura: 140px;
-WebKit-Border-Radius: 70px;
-Moz-Border-Radius: 70px;
Radio fronterizo: 70px;
borde: 2px #fff sólido;
flotante: izquierda;
cursor: puntero;
}
.triangleright {
Ancho: 0;
Altura: 0;
Border-izquierda: 60px sólido #fff;
Top de borde: 30px sólido transparente;
Border-Bottom: 30px sólido transparente;
-Webkit-transform: escala (0.6,1.2);
-Moz-transform: escala (0.6,1.2);
transformación: escala (0.6,1.2);
}
.next1 {
margen: 30px -10px 0 20px;
flotante: izquierda;
}
.next2 {
margen: 30px 0 0 -20px;
flotante: izquierda;
}
.triangleleft {
Ancho: 0;
Altura: 0;
Border-Right: 60px Solid #FFF;
Top de borde: 30px sólido transparente;
Border-Bottom: 30px sólido transparente;
-Webkit-transform: escala (0.6,1.2);
-Moz-transform: escala (0.6,1.2);
transformación: escala (0.6,1.2);
}
.pre1 {
margen: 30px -10px 0 10px;
flotante: izquierda;
}
.pre2 {
margen: 30px 0 0 -20px;
flotante: izquierda;
}
.pausa{
Ancho: 20px;
Altura: 80px;
Antecedentes: #fff;
flotante: izquierda;
}
.Pause1 {
margen: 30px 10px 0 40px;
}
.Pause2 {
margen: 30px 10px 0 10px;
}
</style>
</ablo>
<Body>
<Argán> Botón de reproductor </weader> <section>
<Div class = círculo>
<div class = triangleleft pre1> </div>
<div class = triangleleft pre2> </div>
</div>
<Div class = Circle1>
<div class = pause pause1> </div>
<div class = pause pause2> </div>
</div>
<Div class = círculo>
<div class = triangleright next1> </div>
<div class = triangleright next2> </div>
</div>
</section>
</body>
</html>