基于css3的属性transition制作菜单导航的效果
这篇文章主要为大家介绍了基于css3的属性transition制作菜单导航效果,可实现鼠标滑过菜单项动态改变背景滑块的功能,基于css3的属性transition实现,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了基于css3的属性transition制作菜单导航效果。分享给大家供大家参考。具体如下：
CSS3导航菜单，当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：
-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）。
运行效果截图如下：
具体代码如下：
<!DOCTYPE HTML>
<html lang=zh-cn>
<head>
<title>css3的属性transition制作菜单导航</title>
<style>
*{margin:0px;padding:0px;}
body{background:#45B5DA;margin:0px;padding:0px;}
.tips{width:370px;margin:0 auto;line-height:24px;padding-top:10px;}
.bredcolor{color:#fff;}
#nav{position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-185px;}
li{
width:74px;height:40px;text-align:center;float:left;line-height:40px;color:#fff;text-decoration:none;list-style:none;cursor : pointer;
}
li#chage{
width:70px;height:38px;display:block;position:absolute;left:0px;z-index:-1;border:2px solid #191919;
border-radius:10px;
background:-webkit-gradient(linear, 0 100%, 0 0, from(black), color-stop(0.5, black), color-stop(0.52,#313131), to(#6A6A6A));
box-shadow:0px 2px 0px rgba(255, 255, 255, .3);
-webkit-transform: translate(0px,0px);
-webkit-transition:-webkit-transform .2s ease-out;
}
</style>
</head>
<body>
<section class="tips">
当你运动层在显示层下面时，transition会使页面产生闪动，原因是Chrome在初始渲染CSS动画时产生的Bug，虽然暂时无法考证这个问题的根本原因，但是目前已知的解决方案有两条：
-webkit-backface-visibility: hidden;（设置进行转换的元素的背面在面对用户时是否可见：隐藏）
-webkit-transform-style: preserve-3d; （设置内嵌的元素在 3D 空间如何呈现：保留 3D ）
qq群:197326136
</section>
<section id="nav">
<li href="#" title＝"css3菜单,css3菜单导航">首页</li>
<li href="#" class="nav_2" onmouseover = "zhj.slide(1);" onmouseout = "zhj.slide(0);">脚本</li>
<li href="#" onmouseover = "zhj.slide(2);" onmouseout = "zhj.slide(0);">特效</li>
<li href="#" onmouseover = "zhj.slide(3);" onmouseout = "zhj.slide(0);">源码</li>
<li href="#" onmouseover = "zhj.slide(4);" onmouseout = "zhj.slide(0);">下载</li>
<li href="javascript:void(0);" id="chage"></li>
</section>
</body>
<script type="text/javascript">
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
var zhj = {};
zhj.slide = function(index){
var transX = 74*index;
$('chage').style['-webkit-transform'] = 'translate('+transX+'px,0px)';
}
</script>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Atas ialah kandungan terperinci 基于css3的属性transition制作菜单导航的效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Windows 11: Cara mudah untuk mengimport dan mengeksport reka letak permulaan
Aug 22, 2023 am 10:13 AM
Dalam Windows 11, menu Mula telah direka bentuk semula dan menampilkan set apl yang dipermudahkan yang disusun dalam grid halaman, tidak seperti pendahulunya, yang mempunyai folder, apl dan apl pada menu Mula. Anda boleh menyesuaikan susun atur menu Mula dan mengimport serta mengeksportnya ke peranti Windows lain untuk memperibadikannya mengikut keinginan anda. Dalam panduan ini, kami akan membincangkan arahan langkah demi langkah untuk mengimport Reka Letak Mula untuk menyesuaikan reka letak lalai pada Windows 11. Apakah Import-StartLayout dalam Windows 11? Import Start Layout ialah cmdlet yang digunakan dalam Windows 10 dan versi terdahulu untuk mengimport penyesuaian untuk menu Mula ke dalam
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!
Petua CSS: Gunakan peralihan untuk mengekalkan keadaan tuding
Sep 27, 2022 pm 02:01 PM
Bagaimana untuk mengekalkan keadaan tuding? Artikel berikut akan memperkenalkan kepada anda cara mengekalkan keadaan tuding tanpa menggunakan JavaScript. Saya harap ia akan membantu anda!
Cara Lalai 'Tunjukkan Lebih Banyak Pilihan' dalam Menu Klik Kanan Windows 11
Jul 10, 2023 pm 12:33 PM
Salah satu perubahan yang paling menjengkelkan yang kami pengguna tidak pernah mahu ialah kemasukan "Tunjukkan lebih banyak pilihan" dalam menu konteks klik kanan. Walau bagaimanapun, anda boleh mengalih keluarnya dan mendapatkan kembali menu konteks klasik dalam Windows 11. Tiada lagi berbilang klik dan mencari pintasan ZIP ini dalam menu konteks. Ikuti panduan ini untuk kembali ke menu konteks klik kanan penuh pada Windows 11. Betulkan 1 – Laraskan CLSID secara manual Ini adalah satu-satunya kaedah manual dalam senarai kami. Anda akan melaraskan kunci atau nilai tertentu dalam Editor Pendaftaran untuk menyelesaikan isu ini. Nota – Suntingan pendaftaran seperti ini sangat selamat dan akan berfungsi tanpa sebarang masalah. Oleh itu, anda harus membuat sandaran pendaftaran sebelum mencuba ini pada sistem anda. Langkah 1 – Cubalah
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!
Apakah angka mendatar 8 pada peta navigasi?
Jun 27, 2023 am 11:43 AM
Angka mendatar 8 pada peta navigasi bermaksud jerebu, sederhana ialah isyarat amaran kuning 8, dan teruk ialah isyarat amaran oren 8.
Apl Peta Baidu versi terbaharu 18.8.0 dikeluarkan, memperkenalkan fungsi radar lampu isyarat buat kali pertama dan menambah fungsi pengesyoran tempat letak kereta masa nyata
Aug 06, 2023 pm 06:05 PM
Baidu Map App versi Android dan iOS telah mengeluarkan versi 18.8.0, yang memperkenalkan fungsi radar lampu isyarat buat kali pertama, menerajui industri Menurut pengenalan rasmi, selepas menghidupkan radar lampu isyarat, ia menyokong pengesanan automatik lampu isyarat semasa memandu tanpa perlu memasuki destinasi Beidou High-Precision boleh meletakkan kedudukan dalam masa nyata , 1 juta+ lampu isyarat di seluruh negara secara automatik mencetuskan peringatan gelombang hijau. Selain itu, fungsi baharu ini juga menyediakan navigasi senyap penuh, menjadikan kawasan peta lebih ringkas, maklumat penting sepintas lalu, dan tiada siaran suara, membolehkan pemandu lebih fokus pada pemanduan Peta Baidu akan melancarkan fungsi kira detik lampu isyarat Oktober 2020, menyokong ramalan kira detik masa nyata, navigasi akan memaparkan baki detik kira detik secara automatik apabila menghampiri persimpangan lampu isyarat, membolehkan pengguna sentiasa memahami keadaan jalan di hadapan. Kira detik lampu isyarat hingga 31 Disember 2022
Bagaimana untuk mengalih keluar pilihan 'Buka dalam Windows Terminal' daripada menu konteks klik kanan dalam Windows 11
Apr 13, 2023 pm 06:28 PM
Secara lalai, menu konteks klik kanan Windows 11 mempunyai pilihan yang dipanggil Buka dalam Terminal Windows. Ini adalah ciri yang sangat berguna yang membolehkan pengguna membuka Terminal Windows di lokasi tertentu. Contohnya, jika anda klik kanan pada folder dan pilih pilihan "Buka dalam Terminal Windows", Terminal Windows akan melancarkan dan menetapkan lokasi khusus itu sebagai direktori kerja semasanya. Walaupun ini adalah ciri yang hebat, tidak semua orang mendapati kegunaan untuk ciri ini. Sesetengah pengguna mungkin tidak mahu pilihan ini dalam menu konteks klik kanan mereka dan mahu mengalih keluarnya untuk mengemas menu konteks klik kanan mereka.
