Artikel Einführung von Wulin.com (www.vevb.com): Kürzlich habe ich begonnen, HTML5+CSS3 zu lernen, CSS3 zu üben und mehrere Spielerschaltflächen zu zeichnen.
Kürzlich habe ich mit HTML5+CSS3 angefangen, CSS3 zu praktizieren und mehrere Spieler -Tasten zu zeichnen. Wenn Sie bessere Vorschläge haben, hoffe ich, dass Sie darauf hinweisen können ...
<! DocType>
<html>
<kopf>
<meta charset = utf-8 />
<Styles>
Körper{
Hintergrund:#000;
}
Header {
Schriftfamilie: Microsoft Yahei;
Schriftgröße: 30px;
Farbe:#990000;
}
.Kreis{
Breite: 120px;
Höhe: 120px;
-Webkit-Border-Radius: 60px;
-moz-border-radius: 60px;
Border-Radius: 60px;
Grenze: 2px #fff Solid;
float: links;
Rand: 10px;
Cursor: Zeiger;
}
.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 {
Breite: 140px;
Höhe: 140px;
-Webkit-Border-Radius: 70px;
-moz-border-radius: 70px;
Grenzradius: 70px;
Grenze: 2px #fff Solid;
float: links;
Cursor: Zeiger;
}
.Triangleright {
Breite: 0;
Höhe: 0;
Border-Links: 60px Solid #fff;
Grenze: 30px fest transparent;
Grenzboden: 30px fest transparent;
-Webkit-Transformation: Skala (0,6,1,2);
-moz-transform: Skala (0,6,1,2);
Transformation: Skala (0,6,1,2);
}
.Next1 {
Rand: 30px -10px 0 20px;
float: links;
}
.Next2 {
Rand: 30px 0 0 -20px;
float: links;
}
.Triangleleft {
Breite: 0;
Höhe: 0;
Grenzrechte: 60px Solid #fff;
Grenze: 30px fest transparent;
Grenzboden: 30px fest transparent;
-Webkit-Transformation: Skala (0,6,1,2);
-moz-transform: Skala (0,6,1,2);
Transformation: Skala (0,6,1,2);
}
.pre1 {
Rand: 30px -10px 0 10px;
float: links;
}
.pre2 {
Rand: 30px 0 0 -20px;
float: links;
}
.Pause{
Breite: 20px;
Höhe: 80px;
Hintergrund: #fff;
float: links;
}
.pause1 {
Rand: 30px 10px 0 40px;
}
.pause2 {
Rand: 30px 10px 0 10px;
}
</style>
</head>
<body>
<header> Player -Taste </header> <ABSCHNITT>
<div class = circle>
<div class = triandgleleft pre1> </div>
<div class = triandgleleft pre2> </div>
</div>
<div class = circle1>
<div class = pause pause1> </div>
<div class = pause pause2> </div>
</div>
<div class = circle>
<div class = triangleright next1> </div>
<div class = triangleright next2> </div>
</div>
</Abschnitt>
</body>
</html>