Artigo Introdução de wulin.com (www.vevb.com): Recentemente, comecei a aprender HTML5+CSS3, praticar CSS3 e desenhar vários botões de jogador.
Recentemente, comecei a aprender HTML5+CSS3, pratiquei o CSS3 e desenhei vários botões de jogador. Se você tem alguma sugestão melhor, espero que você possa apontar ...
<! Doctype>
<html>
<head>
<meta charset = utf-8 />
<estilo>
corpo{
Antecedentes:#000;
}
cabeçalho{
Fonte-família: Microsoft Yahei;
tamanho da fonte: 30px;
Cor:#990000;
}
.círculo{
Largura: 120px;
Altura: 120px;
-Webkit-Border-Radius: 60px;
-Moz-Border-Radius: 60px;
Radio de fronteira: 60px;
Border: 2px #fff sólido;
flutuar: esquerda;
margem: 10px;
Cursor: Ponteiro;
}
.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 da caixa: RGBA (255.255,255,0,6) 0 0 15px;
}
.circle1 {
Largura: 140px;
Altura: 140px;
-Webkit-Border-Radius: 70px;
-Moz-Border-Radius: 70px;
Radio de fronteira: 70px;
Border: 2px #fff sólido;
flutuar: esquerda;
Cursor: Ponteiro;
}
.triangleright {
largura: 0;
altura: 0;
Border-Ift: 60px Solid #FFF;
Top de borda: 30px transparente sólido;
fundo da fronteira: 30px transparente sólido;
-Webkit-transform: escala (0,6,1,2);
-moz-transform: escala (0,6,1.2);
transformação: escala (0,6,1,2);
}
.Next1 {
Margem: 30px -10px 0 20px;
flutuar: esquerda;
}
.Next2 {
margem: 30px 0 0 -20px;
flutuar: esquerda;
}
.triangleleft {
largura: 0;
altura: 0;
Fronteira: 60px Solid #FFF;
Top de borda: 30px transparente sólido;
fundo da fronteira: 30px transparente sólido;
-Webkit-transform: escala (0,6,1,2);
-moz-transform: escala (0,6,1.2);
transformação: escala (0,6,1,2);
}
.pre1 {
Margem: 30px -10px 0 10px;
flutuar: esquerda;
}
.pre2 {
margem: 30px 0 0 -20px;
flutuar: esquerda;
}
.pausa{
Largura: 20px;
Altura: 80px;
Antecedentes: #FFF;
flutuar: esquerda;
}
.Pausa1 {
Margem: 30px 10px 0 40px;
}
.Pausa2 {
Margem: 30px 10px 0 10px;
}
</style>
</head>
<Body>
Botão do <Header>
<div class = círculo>
<div class = triangleleft pré -1> </div>
<div class = triangleleft pré2> </div>
</div>
<div class = círculo1>
<div class = pausa pause1> </div>
<div class = pausa pause2> </div>
</div>
<div class = círculo>
<div class = triangleright próximo1> </div>
<Div Class = Triangleright Next2> </div>
</div>
</seção>
</body>
</html>