Introduction de l'article de wulin.com (www.vevb.com): Récemment, j'ai commencé à apprendre HTML5 + CSS3, pratiquer CSS3 et dessiner plusieurs boutons de joueur.
Récemment, j'ai commencé à apprendre HTML5 + CSS3, j'ai pratiqué CSS3 et dessiné plusieurs boutons de joueur. Si vous avez de meilleures suggestions, j'espère que vous pourrez souligner ...
<! Doctype>
<html>
<adal>
<Meta Charset = UTF-8 />
<style>
corps{
Contexte: # 000;
}
en-tête {
Font-Family: Microsoft Yahei;
taille de police: 30px;
Couleur: # 990000;
}
.cercle{
Largeur: 120px;
hauteur: 120px;
-Webkit-Border-Radius: 60px;
-Moz-Border-Radius: 60px;
Border-Radius: 60px;
Border: 2px #fff solide;
flottant: à gauche;
marge: 10px;
curseur: pointeur;
}
.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;
Box-Shadow: RGBA (255 255,255,0,6) 0 0 15px;
}
.Circle1 {
Largeur: 140px;
hauteur: 140px;
-Webkit-Border-Radius: 70px;
-Moz-Border-Radius: 70px;
Border-Radius: 70px;
Border: 2px #fff solide;
flottant: à gauche;
curseur: pointeur;
}
.TriangleRight {
Largeur: 0;
hauteur: 0;
Border-Left: 60px solide #FFF;
Border-top: 30px solide transparent;
Border-Bottom: 30px solide transparent;
-Webkit-transform: échelle (0,6,1,2);
-Moz-transform: échelle (0,6,1,2);
transformée: échelle (0,6,1,2);
}
.Next1 {
marge: 30px -10px 0 20px;
flottant: à gauche;
}
.Next2 {
marge: 30px 0 0 -20px;
flottant: à gauche;
}
.Triangleleft {
Largeur: 0;
hauteur: 0;
Border-droite: 60px Solid #FFF;
Border-top: 30px solide transparent;
Border-Bottom: 30px solide transparent;
-Webkit-transform: échelle (0,6,1,2);
-Moz-transform: échelle (0,6,1,2);
transformée: échelle (0,6,1,2);
}
.pre1 {
marge: 30px -10px 0 10px;
flottant: à gauche;
}
.pre2 {
marge: 30px 0 0 -20px;
flottant: à gauche;
}
.pause{
Largeur: 20px;
hauteur: 80px;
Contexte: #FFF;
flottant: à gauche;
}
.Pause1 {
marge: 30px 10px 0 40px;
}
.Pause2 {
marge: 30px 10px 0 10px;
}
</ style>
</ head>
<body>
<Dider> Bouton du lecteur </-header> <section>
<div class = cercle>
<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 = cercle>
<div class = triangleright next1> </div>
<div class = triangleright next2> </div>
</div>
</ section>
</docy>
</html>