Wulin.com의 기사 소개 (www.vevb.com) : 최근에 HTML5+CSS3을 배우고 CSS3 연습 및 여러 플레이어 버튼을 그리기 시작했습니다.
최근에 나는 HTML5+CSS3을 배우기 시작했고, CSS3를 연습하고, 여러 플레이어 버튼을 그렸습니다. 더 나은 제안이 있다면 지적 할 수 있기를 바랍니다.
<! doctype>
<html>
<헤드>
<meta charset = utf-8 />
<스타일>
몸{
배경 :#000;
}
헤더 {
Font-Family : Microsoft Yahei;
글꼴 크기 : 30px;
색상 :#990000;
}
.원{
너비 : 120px;
높이 : 120px;
-webkit-border-radius : 60px;
-Moz 국경-라디우스 : 60px;
Border-Radius : 60px;
국경 : 2px #fff 고체;
플로트 : 왼쪽;
여백 : 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 국경 Radius : 70px;
Border-Radius : 70px;
국경 : 2px #fff 고체;
플로트 : 왼쪽;
커서 : 포인터;
}
.triangleright {
너비 : 0;
높이 : 0;
왼쪽 경계 : 60px 고체 #fff;
테두리 탑 : 30px 고체 투명;
국경-바닥 : 30px 고체 투명;
-webkit 변환 : 스케일 (0.6,1.2);
-Moz 변환 : 스케일 (0.6,1.2);
변환 : 스케일 (0.6,1.2);
}
.next1 {
여백 : 30px -10px 0 20px;
플로트 : 왼쪽;
}
.next2 {
여백 : 30px 0 0-20px;
플로트 : 왼쪽;
}
.triangleleft {
너비 : 0;
높이 : 0;
경계 오른쪽 : 60px 고체 #fff;
테두리 탑 : 30px 고체 투명;
국경-바닥 : 30px 고체 투명;
-webkit 변환 : 스케일 (0.6,1.2);
-Moz 변환 : 스케일 (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;
}
</스타일>
</head>
<body>
<Header> 플레이어 버튼 </Header> <섹션>
<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>
</섹션>
</body>
</html>