Введение статьи Wulin.com (www.vevb.com): Недавно я начал изучать HTML5+CSS3, Practice CSS3 и рисую несколько кнопок игроков.
Недавно я начал изучать HTML5+CSS3, практиковал CSS3 и нарисовал несколько кнопок игроков. Если у вас есть какие -либо лучшие предложения, я надеюсь, что вы сможете указать ...
<! Доктип>
<html>
<голова>
<meta charset = utf-8 />
<style>
тело{
Фон:#000;
}
заголовок {
Семейство шрифта: Microsoft Yahei;
размер шрифта: 30px;
Цвет:#990000;
}
.круг{
Ширина: 120px;
Высота: 120px;
-Вебкит-грамотный радий: 60px;
-Моз-грамотный радий: 60px;
граница радий: 60px;
Граница: 2px #fff твердый;
Плавание: осталось;
Маржа: 10px;
курсор: указатель;
}
.circle: Hover, .circle1: Hover {
-Вебкит-бокс-Shadow: RGBA (255,255,255,0,6) 0 0 15px;
-Мозо-бокс-тень: RGBA (255,255,255,0,6) 0 0 15px;
Box-Shadow: RGBA (255,255,255,0,6) 0 0 15px;
}
.circle1 {
Ширина: 140px;
Высота: 140px;
-Вебкит-грамотный радиус: 70px;
-Моз-грамотр-радиус: 70px;
граница-радий: 70px;
Граница: 2px #fff твердый;
Плавание: осталось;
курсор: указатель;
}
.triangleright {
Ширина: 0;
высота: 0;
РЕМЖА СЛЕДОВАНИЯ: 60px SOLID #fff;
Пограничная топ: 30px сплошной прозрачный;
Пограничный подклад: 30px сплошной прозрачный;
-Вебкит-трансформация: масштаб (0,6,1,2);
-Моз-трансформ: масштаб (0,6,1,2);
преобразование: масштаб (0,6,1,2);
}
.next1 {
Маржа: 30px -10px 0 20px;
Плавание: осталось;
}
.next2 {
поля: 30px 0 0 -20px;
Плавание: осталось;
}
.trianGleleft {
Ширина: 0;
высота: 0;
граница правая: 60px solid #fff;
Пограничная топ: 30px сплошной прозрачный;
Пограничный подклад: 30px сплошной прозрачный;
-Вебкит-трансформация: масштаб (0,6,1,2);
-Моз-трансформ: масштаб (0,6,1,2);
преобразование: масштаб (0,6,1,2);
}
.pre1 {
Полевая: 30px -10px 0 10px;
Плавание: осталось;
}
.pre2 {
поля: 30px 0 0 -20px;
Плавание: осталось;
}
.pause {
Ширина: 20px;
Высота: 80px;
Фон: #fff;
Плавание: осталось;
}
.pause1 {
Полевая: 30px 10px 0 40px;
}
.pause2 {
Полевая: 30px 10px 0 10px;
}
</style>
</head>
<тело>
<Header> кнопка игрока </Header> <section>
<div class = circle>
<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 = circle>
<div class = triangleright next1> </div>
<div class = triangleright next2> </div>
</div>
</section>
</body>
</html>