Artikel Pengenalan Wulin.com (www.vevb.com): Baru -baru ini, saya mulai belajar HTML5+CSS3, berlatih CSS3, dan menggambar beberapa tombol pemain.
Baru -baru ini saya mulai belajar HTML5+CSS3, berlatih CSS3, dan menggambar beberapa tombol pemain. Jika Anda memiliki saran yang lebih baik, saya harap Anda bisa menunjukkan ...
<! Doctype>
<Html>
<head>
<Meta Charset = UTF-8 />
<tyle>
tubuh{
Latar belakang:#000;
}
header {
Font-Family: Microsoft Yahei;
font-size: 30px;
Warna:#990000;
}
.lingkaran{
Lebar: 120px;
Tinggi: 120px;
-webkit-border-radius: 60px;
-Moz-border-radius: 60px;
Border-Radius: 60px;
Perbatasan: 2px #fff Solid;
float: kiri;
margin: 10px;
kursor: pointer;
}
.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;
Kotak-Shadow: RGBA (255.255.255.0.6) 0 0 15px;
}
.circle1 {
Lebar: 140px;
Tinggi: 140px;
-webkit-border-radius: 70px;
-Moz-border-radius: 70px;
Border-Radius: 70px;
Perbatasan: 2px #fff Solid;
float: kiri;
kursor: pointer;
}
.TRIANGLIGHT {
Lebar: 0;
Tinggi: 0;
Border-left: 60px solid #FFF;
Border-Top: 30px Solid Transparent;
Border-Bottom: 30px Solid Transparent;
-webkit-transform: skala (0,6,1.2);
-Moz-Transform: skala (0,6,1.2);
Transformasi: Skala (0,6,1.2);
}
.next1 {
margin: 30px -10px 0 20px;
float: kiri;
}
.next2 {
margin: 30px 0 0 -20px;
float: kiri;
}
.TRIANGLELEFT {
Lebar: 0;
Tinggi: 0;
Border-Right: 60px solid #FFF;
Border-Top: 30px Solid Transparent;
Border-Bottom: 30px Solid Transparent;
-webkit-transform: skala (0,6,1.2);
-Moz-Transform: skala (0,6,1.2);
Transformasi: Skala (0,6,1.2);
}
.pre1 {
margin: 30px -10px 0 10px;
float: kiri;
}
.pre2 {
margin: 30px 0 0 -20px;
float: kiri;
}
.berhenti sebentar{
Lebar: 20px;
Tinggi: 80px;
Latar belakang: #FFF;
float: kiri;
}
.Pause1 {
margin: 30px 10px 0 40px;
}
.Pause2 {
margin: 30px 10px 0 10px;
}
</tyle>
</head>
<body>
<Header> Tombol pemutar </header> <section>
<Div class = Circle>
<Div Class = TriangLeleft Pre1> </Div>
<Div Class = TriangLeleft Pre2> </Div>
</div>
<Div class = Circle1>
<Div class = jeda jeda1> </div>
<Div class = jeda jeda2> </div>
</div>
<Div class = Circle>
<Div Class = Trianglide Next1> </div>
<Div class = Trianglight Next2> </div>
</div>
</section>
</body>
</html>