บทความบทนำของ wulin.com (www.vevb.com): เมื่อเร็ว ๆ นี้ฉันเริ่มเรียนรู้ HTML5+CSS3, ฝึก CSS3 และวาดปุ่มผู้เล่นหลายปุ่ม
เมื่อเร็ว ๆ นี้ฉันเริ่มเรียนรู้ HTML5+CSS3 ฝึก CSS3 และดึงปุ่มผู้เล่นหลายปุ่ม หากคุณมีคำแนะนำที่ดีกว่านี้ฉันหวังว่าคุณจะชี้ให้เห็น ...
<! doctype>
<html>
<head>
<meta charset = utf-8 />
<style>
ร่างกาย{
ความเป็นมา:#000;
-
ส่วนหัว {
Font-Family: Microsoft Yahei;
ขนาดตัวอักษร: 30px;
สี:#990000;
-
.วงกลม{
ความกว้าง: 120px;
ความสูง: 120px;
-webkit-Border-Radius: 60px;
-moz-Border-Radius: 60px;
แนวชายแดน: 60px;
ชายแดน: 2px #FFF SOLID;
ลอย: ซ้าย;
มาร์จิ้น: 10px;
เคอร์เซอร์: ตัวชี้;
-
.Circle: โฮเวอร์, .circle1: โฮเวอร์ {
-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 {
ความกว้าง: 140px;
ความสูง: 140px;
-webkit-Border-Radius: 70px;
-moz-Border-Radius: 70px;
แนวชายแดน: 70px;
ชายแดน: 2px #FFF SOLID;
ลอย: ซ้าย;
เคอร์เซอร์: ตัวชี้;
-
.triangleright {
ความกว้าง: 0;
ความสูง: 0;
ชายแดนซ้าย: 60px Solid #FFF;
ชายแดนด้านบน: 30px ของแข็งโปร่งใส;
ด้านล่างด้านล่าง: 30px ของแข็งโปร่งใส;
-webkit-transform: สเกล (0.6,1.2);
-moz-transform: สเกล (0.6,1.2);
แปลง: สเกล (0.6,1.2);
-
.NEXT1 {
มาร์จิ้น: 30px -10px 0 20px;
ลอย: ซ้าย;
-
.NEXT2 {
มาร์จิ้น: 30px 0 0 -20px;
ลอย: ซ้าย;
-
.trianleleft {
ความกว้าง: 0;
ความสูง: 0;
ชายแดนขวา: 60px Solid #FFF;
ชายแดนด้านบน: 30px ของแข็งโปร่งใส;
ด้านล่างด้านล่าง: 30px ของแข็งโปร่งใส;
-webkit-transform: สเกล (0.6,1.2);
-moz-transform: สเกล (0.6,1.2);
แปลง: สเกล (0.6,1.2);
-
.pre1 {
มาร์จิ้น: 30px -10px 0 10px;
ลอย: ซ้าย;
-
.pre2 {
มาร์จิ้น: 30px 0 0 -20px;
ลอย: ซ้าย;
-
.หยุดชั่วคราว{
ความกว้าง: 20px;
ความสูง: 80px;
ความเป็นมา: #FFF;
ลอย: ซ้าย;
-
.pause1 {
มาร์จิ้น: 30px 10px 0 40px;
-
.pause2 {
มาร์จิ้น: 30px 10px 0 10px;
-
</style>
</head>
<body>
<ส่วนหัว> ปุ่มผู้เล่น </header> <section>
<div class = circle>
<div class = triangleleft pre1> </div>
<div class = triangleleft pre2> </div>
</div>
<div class = circle1>
<div class = หยุดชั่วคราวชั่วคราว 1> </div>
<div class = หยุดชั่วคราว 2> </div>
</div>
<div class = circle>
<div class = triangleright next1> </div>
<div class = triangleright next2> </div>
</div>
</section>
</body>
</html>