مقالة مقدمة من wulin.com (www.vevb.com): في الآونة الأخيرة ، بدأت في تعلم HTML5+CSS3 ، وممارسة CSS3 ، ورسم عدة أزرار اللاعب.
بدأت مؤخرًا في تعلم HTML5+CSS3 ، وممارسة CSS3 ، ورسمت العديد من أزرار اللاعبين. إذا كان لديك أي اقتراحات أفضل ، آمل أن تتمكن من الإشارة ...
<! doctype>
<html>
<head>
<meta charset = utf-8 />
<style>
جسم{
الخلفية:#000 ؛
}
رأس {
Font-Family: Microsoft Yahei ؛
حجم الخط: 30 بكسل ؛
اللون:#990000 ؛
}
.دائرة{
العرض: 120 بكسل ؛
الارتفاع: 120 بكسل ؛
-webkit-border-Radius: 60px ؛
-الزوم براديوس: 60 بكسل ؛
الحدود الراديوس: 60px ؛
الحدود: 2px #fff الصلبة ؛
تعويم: اليسار.
الهامش: 10px ؛
المؤشر: مؤشر.
}
.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 {
العرض: 140 بكسل ؛
الارتفاع: 140 بكسل ؛
-webkit-border-Radius: 70px ؛
-Moz-Border-Radius: 70px ؛
الحدود الراديوس: 70 بكسل ؛
الحدود: 2px #fff الصلبة ؛
تعويم: اليسار.
المؤشر: مؤشر.
}
.triandgleright {
العرض: 0 ؛
الارتفاع: 0 ؛
الحدود اليسرى: 60px الصلبة #FFF ؛
أعلى الحدود: 30 بكسل شفاف صلبة.
Border-Bottom: 30px شفاف صلب ؛
-webkit-transform: Scale (0.6،1.2) ؛
-moz-transform: Scale (0.6،1.2) ؛
التحويل: مقياس (0.6،1.2) ؛
}
.next1 {
الهامش: 30px -10px 0 20px ؛
تعويم: اليسار.
}
.next2 {
الهامش: 30px 0 0 -20px ؛
تعويم: اليسار.
}
.triangleleft {
العرض: 0 ؛
الارتفاع: 0 ؛
اليمين الحدودي: 60 بكسل Solid #FFF ؛
أعلى الحدود: 30 بكسل شفاف صلبة.
Border-Bottom: 30px شفاف صلب ؛
-webkit-transform: Scale (0.6،1.2) ؛
-moz-transform: Scale (0.6،1.2) ؛
التحويل: مقياس (0.6،1.2) ؛
}
.pre1 {
الهامش: 30px -10px 0 10px ؛
تعويم: اليسار.
}
.pre2 {
الهامش: 30px 0 0 -20px ؛
تعويم: اليسار.
}
.يوقف{
العرض: 20 بكسل ؛
الارتفاع: 80 بكسل ؛
الخلفية: #fff ؛
تعويم: اليسار.
}
.pause1 {
الهامش: 30px 10px 0 40px ؛
}
.pause2 {
الهامش: 30px 10px 0 10px ؛
}
</style>
</head>
<body>
<Header> زر لاعب </header> <section>
<div class = circle>
<div class = triangleleft pre1> </viv>
<div class = triangleleft pre2> </viv>
</div>
<div class = circle1>
<div class = pause pause1> </viv>
<div class = Pause Pause2> </viv>
</div>
<div class = circle>
<div class = triangleright next1> </viv>
<div class = triangleright next2> </viv>
</div>
</القسم>
</body>
</html>