Rumah

Kesan khas JS

Kesan khas CSS3

CSS3 pilih kod butang gelangsar

Muat turun sekarang Pratonton

<!DOCTYPE html>
<html lang="ms">
<kepala>
<meta charset="UTF-8">
<title>jQuery+CSS3选择滑块按钮代码 </title>

<gaya>
.tab-menu{
jidar atas: 20px;
ketinggian: 26px;
limpahan: tersembunyi;
jawatan: saudara;
jejari sempadan: 20px;
}
ul{
pelapik: 0;
jidar: 0;
gaya senarai: tiada;
}
li{
ketinggian: 24px;
ketinggian garis: 24px;
terapung: kiri;
penjajaran teks: tengah;
jawatan: saudara;
saiz fon: 12px;
}
.span menu tab{
jidar: 4px;
paparan: inline-block;
ketinggian: 18px;
jawatan: mutlak;
kiri: 0;
atas: 0;
jejari sempadan: 20px;
peralihan: kiri .4s;
-webkit-transition: kiri .4s;
-moz-transition: kiri .4s;
}
li:tuding{
kursor: penunjuk;
}
.dua{
lebar: 160px;
warna latar belakang: rgba(224, 229, 232, 1);
}
.dua jengkal{
lebar: 72px;
warna latar belakang: rgba(0, 54, 80, 1);
}
.dua .aktif{
warna: putih;
}
.dua li{
lebar: 80px;
warna:rgba(0, 54, 80, 1);
}
.eightrow li{
lebar: 50px;
warna: putih;
}
.eightrow .aktif{
warna: #10aefc;
}
.eightrow{
lebar: 700px;
latar belakang: #10aefc;
}
.jarak lapan baris{
lebar: 42px;
latar belakang: putih;
}
</style>

</head>
<badan>
<tengah>
<div class="tab-menu eightrow">
<span id="bg"></span>
<ul id="list">
<li class="active" type="1">24j</li>
<li type="2">48j</li>
<li type="3">72j</li>
<li type="4">96h</li>
<li type="5">120j</li>
<li type="6">144j</li>
<li type="7">168j</li>
<li type="8">192j</li>
<li type="9">216j</li>
<li type="10">240j</li>
<li type="11">264j</li>
<li type="12">288j</li>
<li type="13">312j</li>
<li type="14">336j</li>
</ul>
</div>

<div class="tab-menu tworow">
<span id="thirdbg"></span>
<ul id="hourlist">
</ul>
</div>
</center>
<skrip src="script/jquery.min.js"></script>
<skrip src="script/slide.js"></script>
<skrip>
Ikon Slaid baharu($("#senarai"),{
indeks:0,
muka depan:$("#bg"),
panggil balik:fungsi (data) {
console.log(data)
}
});
Ikon Slaid baharu($("#senarai jam"),{
indeks:0,
muka depan:$("#thirdbg"),
panggil balik:fungsi (data) {
console.log(data)
}
});
</skrip>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</badan>
</html>

Ini ialah kod butang gelangsar pilih CSS3 Rakan-rakan yang memerlukannya boleh memuat turunnya secara langsung Lebih banyak kod kesan khas boleh didapati di laman web PHP Cina.

Penafian

Semua sumber di laman web ini disumbangkan oleh netizen atau dicetak semula oleh tapak muat turun utama. Sila semak integriti perisian itu sendiri! Semua sumber di laman web ini adalah untuk rujukan pembelajaran sahaja. Tolong jangan gunakannya untuk tujuan komersial. Jika tidak, anda akan bertanggungjawab untuk semua akibat! Jika terdapat sebarang pelanggaran, sila hubungi kami untuk memadamkannya. Maklumat hubungan: admin@php.cn

Artikel Berkaitan

Cara mahir menggunakan kesan khas CSS3 untuk meningkatkan pengalaman pengguna halaman web

09 Sep 2023

Cara menggunakan kesan khas CSS3 dengan mahir untuk meningkatkan pengalaman pengguna laman web Dengan perkembangan Internet, reka bentuk web dan pengalaman pengguna telah menjadi pautan penting dalam pembangunan laman web. Aplikasi kesan khas CSS3 boleh menambah dinamik dan kesan visual pada halaman web dan meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan beberapa kesan khas CSS3 biasa dan contoh kodnya untuk membantu pembangun menjadi lebih mahir dalam menggunakan kesan khas CSS3 dan meningkatkan pengalaman pengguna halaman web. Kesan peralihan (Peralihan) Kesan peralihan ialah salah satu kesan khas yang paling asas dalam CSS3 Dengan menukar atribut

Satu helah untuk mengajar anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik (perkongsian kod)

06 Sep 2021

Dalam artikel sebelum ini "Newbies: Cara menggunakan ccs untuk membuat susun atur mudah (dengan kod)", saya memperkenalkan anda cara menggunakan ccs untuk membuat susun atur mudah. Artikel berikut akan memperkenalkan kepada anda cara menggunakan css3 untuk mencipta butang dan menambah kesan dinamik Mari lihat cara melakukannya bersama-sama.

putaran kesan css3

27 May 2023

Putaran kesan khas CSS3 Dalam reka bentuk web, kesan khas dinamik boleh meningkatkan interaktiviti dan kesenian halaman web, menjadikan pengguna melayari halaman web dengan lebih gembira. Antaranya, kesan putaran adalah kesan khas yang agak biasa. Dalam CSS3, kesan putaran boleh dicapai melalui atribut transformasi. 1. Gunakan transformasi untuk mencapai putaran Atribut transformasi dalam CSS3 digunakan untuk mencapai kesan ubah bentuk elemen, seperti putaran, pergerakan, penskalaan, dsb. Apabila menyedari kesan putaran elemen, anda boleh menggunakan fungsi putaran putar Sintaks khusus adalah seperti berikut: tra

jQuery melaksanakan kesan khas akordion dengan penstrim kaca texture_jquery

16 May 2016

Artikel ini terutamanya memperkenalkan jQuery untuk melaksanakan kesan khas akordion dengan tekstur strim kaca Ia adalah kesan khas akordion berdasarkan jQuery CSS3. Saya harap anda menyukainya.

Contoh terperinci kesan flop 3D kesan khas css3

16 May 2016

Artikel ini terutamanya memperkenalkan kesan flop 3D kesan khas CSS3 Ia mempunyai nilai rujukan tertentu Rakan-rakan yang berminat boleh merujuknya.

Kod CSS3 untuk melaksanakan kesan box_form log masuk latar belakang dinamik

16 May 2016

Artikel ini memperkenalkan kesan khas kotak log masuk latar belakang dinamik dengan kesan animasi berdasarkan jQuery CSS3 Rakan yang memerlukannya boleh merujuknya.

HTML5 css3 bar kemajuan animasi kod kesan khas [disyorkan]_html5 kemahiran tutorial

16 May 2016

Editor di bawah akan berkongsi dengan anda kod kesan khas animasi hitung detik css3 HTML5 css3 [disyorkan]. Semoga ia membantu semua orang. Mari ikuti editor dan lihat.

Bagaimana untuk mencapai kesan membalikkan imej dalam CSS3

23 Apr 2023

Dalam reka bentuk web, gambar adalah salah satu elemen yang sangat diperlukan. Selalunya terdapat keperluan untuk melakukan kesan khas pada gambar, seperti kesan menyelak gambar. Jadi bagaimana untuk menggunakan CSS3 untuk mencapai kesan flip imej? Artikel ini akan memperkenalkan secara terperinci kaedah untuk mencapai kesan flipping imej dalam CSS3. 1. Melaksanakan kesan flipping imej dalam CSS3 CSS3 menyediakan kita dengan dua cara untuk mencapai flipping imej: 1. Gunakan atribut transform untuk flip imej 2. Gunakan atribut backface-visibility untuk flip imej 2. Gunakan tran

css3 tidak dibuka

29 May 2023

Dengan perkembangan pesat teknologi Internet, semakin banyak laman web mula menggunakan CSS3 untuk membina gaya halaman web. Sebagai perbandingan, CSS3 mempunyai lebih fleksibiliti dan kreativiti apabila mereka bentuk halaman web, dan boleh memenuhi keperluan pengguna dengan lebih baik. Walau bagaimanapun, apabila menggunakan CSS3 untuk reka bentuk web, kami sering menghadapi masalah: Kesan khas CSS3 akan meregangkan halaman web. Masalah ini berlaku terutamanya apabila terdapat berbilang elemen dalam halaman web Sesetengah kesan khas boleh menyebabkan kandungan halaman melebihi sempadan asal, menyebabkan reka letak halaman tidak teratur. Seterusnya, kita akan membincangkan bagaimana untuk

See all articles