display: inline-block;<\/code>\n<\/p> Buat animasi teks paparan .container {\n display: inline-block;\n}<\/pre>\n Animasi Typewriter akan membuat kesan verbatim untuk teks dalam elemen <\/p> yang akan dipaparkan. Kami akan menggunakan peraturan animasi
CSS: typed-out<\/code>\n\n \n Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>
<h1><a href="http://ipnx.cn/">亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱</a></h1>\n <div id="wjcelcm34c" class=\"container\">\n <div id="wjcelcm34c" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>\n<p> Seperti yang anda lihat, semua animasi ini adalah mengubah lebar elemen dari 0% hingga 100%. <\/p>\n<p> Sekarang, kami menyertakan animasi ini dalam kelas <code>typed-out<\/code> kami dan menetapkan orientasi animasinya ke <code>forwards<\/code> untuk memastikan bahawa elemen teks tidak kembali ke <code>width: 0<\/code> selepas animasi selesai: <\/p>\n<pre class='brush:php;toolbar:false;'>.typed-out {\n overflow: hidden;\n border-right: .15em solid orange;\n font-size: 1.6rem;\n width: 0;\n}<\/pre>\n<p> elemen teks kami akan dipaparkan dari kiri ke kanan dengan cara yang lancar: <\/p>\n<p> tambah langkah untuk mencapai kesan mesin taip <\/p>\n<p> Setakat ini, teks kami telah dipaparkan, tetapi ia adalah cara yang lancar untuk tidak memaparkan verbatim teks. Ini adalah permulaan, tetapi jelasnya ia tidak kelihatan seperti kesan mesin taip. <\/p>\n<p> Agar animasi ini untuk memaparkan verbatim elemen teks atau langkah demi langkah (sama seperti mesin taip), kita perlu membahagikan animasi menaip yang terkandung dalam kelas <code>typed-out<\/code> . Di sinilah fungsi CSS <code>steps()<\/code> dimainkan: <\/p>\n<pre class='brush:php;toolbar:false;'>.container {\n display: inline-block;\n}<\/pre>\n<p> Seperti yang anda lihat, kami menggunakan fungsi CSS <code>steps()<\/code> untuk membahagikan animasi menaip ke dalam 20 langkah. <\/p>\n<p> Laraskan langkah -langkah untuk menaip lebih lama <\/p>\n<p> Untuk menyesuaikan teks yang lebih lama, anda perlu meningkatkan langkah dan tempoh animasi menaip. <\/p>\n<p> Laraskan langkah -langkah untuk menaip yang lebih pendek <\/p>\n<p> Untuk menyesuaikan teks yang lebih pendek, anda perlu mengurangkan langkah dan tempoh animasi menaip. <\/p>\n<p> Buat dan tetapkan animasi kursor berkelip <\/p>\n<p> Nampaknya, mesin taip mekanikal asal tidak mempunyai kursor yang berkelip, tetapi menambahnya untuk meniru kesan kursor berkelip dari pemproses komputer\/kata yang lebih moden telah menjadi tradisi. Animasi kursor berkelip membantu membuat teks dicetak menonjol dari elemen teks statik. <\/p>\n<p> Untuk menambah animasi kursor berkelip ke animasi mesin taip kami, kami akan mula membuat animasi berkelip: <\/p>\n<pre class='brush:php;toolbar:false;'>@keyframes typing {\n from { width: 0 }\n to { width: 100% }\n}<\/pre>\n<p> Di laman web kami, animasi ini akan mengubah warna sempadan sempadan elemen <code>typed-out<\/code> (digunakan sebagai kursor untuk kesan mesin taip) dari telus ke oren. <\/p>\n<p> Kami menyertakan animasi ini dalam peraturan kelas <code>typed-out<\/code> dan menetapkan sifat animasinya untuk <code>infinite<\/code> untuk membuat kursor hilang dan muncul semula selama -lamanya setiap 0.8 saat: <\/p>\n<pre class='brush:php;toolbar:false;'>.typed-out{\n overflow: hidden;\n border-right: .15em solid orange;\n white-space: nowrap;\n font-size: 1.6rem;\n width: 0;\n animation: typing 1s forwards;\n}<\/pre>\n<p> kod untuk menyesuaikan kesan menaip berkelip <\/p>\n<p> kita boleh membuat kursor kurus atau lebih tebal dengan menyesuaikan atribut <code>border-right: .15em solid orange;<\/code>, atau anda boleh membuat warna kursor berbeza, berikannya <code>border-radius<\/code>, menyesuaikan kekerapan kelipannya, dan sebagainya. <\/p>\n<p> unsur menggabungkan animasi teks mesin taip <\/p>\n<p> Sekarang anda tahu bagaimana membuat kesan mesin taip di CSS, sudah tiba masanya untuk menunjukkan beberapa kes penggunaan praktikal dan relevan untuk kesan mesin taip ini. <\/p>\n<p> Kesimpulan <\/p>\n<p> Dalam artikel ini, kita faham betapa mudahnya untuk membuat teks \"mesin taip\" animasi menggunakan CSS. Kesan menaip ini pasti dapat menambah keseronokan dan menyeronokkan ke halaman anda. <\/p><p> Walau bagaimanapun, ia mungkin bernilai amaran lembut pada akhirnya. Teknik ini lebih baik digunakan untuk sedikit teks bukan kritikal, hanya untuk menambah sedikit keseronokan tambahan. Tetapi berhati-hati untuk tidak terlalu bergantung pada itu, kerana terdapat beberapa batasan untuk menggunakan animasi CSS seperti ini. Pastikan untuk menguji teks mesin taip anda pada pelbagai peranti dan saiz viewport, kerana hasilnya mungkin berbeza mengikut platform. Juga pertimbangkan pengguna akhir yang bergantung kepada teknologi bantuan, idealnya, beberapa ujian kebolehgunaan boleh dilakukan untuk memastikan anda tidak menimbulkan kesulitan kepada pengguna. Kerana anda boleh melakukan sesuatu dengan CSS tulen tidak semestinya bermakna anda sepatutnya. Jika kesan mesin taip penting bagi anda dan anda mahu menggunakannya untuk kandungan yang lebih kritikal, mungkin sekurang -kurangnya mempertimbangkan penyelesaian JavaScript juga. <\/p>\n<p> Bagaimanapun, saya harap anda menikmati siaran ini dan ia membuat anda berfikir tentang perkara -perkara lain yang boleh anda lakukan dengan animasi CSS untuk menambah keseronokan dan menyeronokkan ke halaman anda. <\/p>\n<p> soalan yang sering ditanya mengenai membuat kesan mesin taip CSS <\/p>\n<p> Akhirnya, mari kita jawab beberapa soalan yang paling biasa tentang cara membuat kesan mesin taip di CSS. <\/p>\n<ul>\n<li> <strong> Apakah kesan mesin taip? <\/strong> <\/li>\n<\/ul>\n<p> \"Kesan Typewriter\" adalah teknik animasi yang membuat rentetan teks muncul perkataan dengan perkataan pada skrin seolah -olah ia ditaip dalam masa nyata oleh mesin taip. Kesan ini biasanya dibuat dengan JavaScript, tetapi ia juga boleh dilaksanakan menggunakan CSS sahaja, seperti yang ditunjukkan dalam artikel ini. <\/p>\n<ul>\n<li> <strong> Apakah animasi mesin taip? <\/strong> <\/li>\n<\/ul>\n<p> mesin taip mencetak teks satu huruf pada satu masa. Animasi Taip adalah animasi yang meniru menaip mesin taip, menyampaikan teks dengan satu huruf pada satu masa. Ia adalah kesan animasi yang popular di banyak laman web. <\/p>\n<ul>\n<li> <strong> Bagaimana membuat teks animasi menaip dalam CSS? <\/strong> <\/li>\n<\/ul>\n<p> CSS moden menyediakan pelbagai alat untuk membuat animasi, termasuk <code>animation<\/code>, <code>@keyframes<\/code>, <code>steps()<\/code>. Alat ini digunakan untuk memaparkan teks secara beransur -ansur yang pertama kali tersembunyi melalui atribut <code>overflow<\/code>. <\/p>\n<ul>\n<li> <strong> Bagaimana menggunakan CSS untuk membuat animasi mesin taip yang disesuaikan? <\/strong> <\/li>\n<\/ul>\n<p> Membuat animasi mesin taip yang disesuaikan dengan CSS melibatkan penggunaan frame dan sifat CSS untuk mengawal bagaimana teks kelihatan dan berkelakuan semasa menaip pada skrin. Anda boleh membuatnya disesuaikan dengan mendedahkan beberapa parameter animasi sebagai pembolehubah CSS (sifat tersuai) supaya anda dapat dengan mudah mengubahnya dalam lembaran styles anda. Contohnya: <st>\n<q>\n<\/q> Dalam kod CSS ini, kami mentakrifkan sifat tersuai (<\/p> dan <pre class='brush:php;toolbar:false;'><!doctype html>\n<html>\n <head>\n <title>Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>\n <div id="wjcelcm34c" class=\"container\">\n <div id="wjcelcm34c" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>) untuk membuat animasi disesuaikan. Anda boleh menukar nilai lalai dengan mengubahsuai sifat -sifat ini. <p>\n<code>--typewriter-text<\/code>\n<code>--typewriter-duration<\/code> <\/p> Bagaimana untuk menghentikan kursor selepas surat terakhir elemen <ul> dicetak sepenuhnya? <li> <strong>\n<code>typed-out<\/code>\n<\/strong> Untuk menghentikan kursor huruf terakhir elemen <\/li> dalam animasi mesin taip CSS, anda boleh menggunakan animasi CSS dan atribut <\/ul>: <p><pre class='brush:php;toolbar:false;'><!doctype html>\n<html>\n <head>\n <title>Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>\n <div id="wjcelcm34c" class=\"container\">\n <div id="wjcelcm34c" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>\n<p> Di CSS di atas, animasi mesin taip secara beransur -ansur meningkatkan lebar unsur -unsur dalam bekas, dengan berkesan menaip teks. Hartanah <code>.typewriter<\/code> ditetapkan kepada <code>animation-fill-mode<\/code> untuk memastikan bahawa animasi tetap muktamad (dimainkan sepenuhnya) selepas selesai. Dengan tetapan ini, kursor akan berkelip di elemen <code>forwards<\/code> selepas ia dicetak sepenuhnya. <code>typed-out<\/code>\n<\/p>\n<ul> <li> Apakah beberapa contoh laman web yang berkesan menggunakan kesan mesin taip? <strong> <\/strong>\n<\/li>\n<\/ul> Animasi mesin taip sering digunakan di laman web seperti laman portfolio, terutamanya pada pereka dan laman web pemaju, yang digunakan untuk menyerlahkan kemahiran utama dan menambah rasa kreatif ke halaman, dengan itu menarik perhatian pembaca. Kesan mesin taip kadang -kadang digunakan di laman web blog dan halaman log masuk serta demonstrasi produk. <p><\/p>\n<\/div><\/code><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="wjcelcm34c" class="head">
<div id="wjcelcm34c" class="haed_left">
<div id="wjcelcm34c" class="haed_logo">
<a href="http://ipnx.cn/ms/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="wjcelcm34c" class="head_nav">
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a>
<div class="wjcelcm34c" id="dropdown-template1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a>
<a href="http://ipnx.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a>
<a href="http://ipnx.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a>
<div class="wjcelcm34c" id="dropdown-template1_1" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a>
<a href="http://ipnx.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a>
<div class="wjcelcm34c" id="dropdown-template1_2" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a>
<a href="http://ipnx.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a>
<a href="http://ipnx.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a>
<a href="http://ipnx.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a>
<a href="http://ipnx.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a>
<a href="http://ipnx.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="http://ipnx.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a>
</div>
<div id="wjcelcm34c" class="head_navs">
<a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a>
<div class="wjcelcm34c" id="dropdown-template1_3" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="http://ipnx.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a>
<a href="http://ipnx.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a>
</div>
<div id="wjcelcm34c" class="head_right">
<div id="wjcelcm34c" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="wjcelcm34c" id="dropdown-template" style="display: none;">
<div id="wjcelcm34c" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="wjcelcm34c" class="Article_Details_main">
<div id="wjcelcm34c" class="Article_Details_main1">
<div id="wjcelcm34c" class="Article_Details_main1M">
<div id="wjcelcm34c" class="phpgenera_Details_mainL1">
<a href="http://ipnx.cn/ms/" title="Rumah"
class="phpgenera_Details_mainL1a">Rumah</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ms/web-designer.html"
class="phpgenera_Details_mainL1a">hujung hadapan web</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://ipnx.cn/ms/css-tutorial.html"
class="phpgenera_Details_mainL1a">tutorial css</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>Cara membuat kesan mesin taip CSS untuk laman web anda</span>
</div>
<div id="wjcelcm34c" class="Articlelist_txts">
<div id="wjcelcm34c" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">Cara membuat kesan mesin taip CSS untuk laman web anda</h1>
<div id="wjcelcm34c" class="Articlelist_txts_info_head">
<div id="wjcelcm34c" class="author_info">
<a href="http://ipnx.cn/ms/member/1242473.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/242/473/646b03ec7509a724.jpg" src="/static/imghw/default1.png" alt="Jack chen">
</a>
<div id="wjcelcm34c" class="author_detail">
<a href="http://ipnx.cn/ms/member/1242473.html" class="author_name">Jack chen</a>
</div>
</div>
</div>
<span id="wjcelcm34c" class="Articlelist_txts_time">Feb 08, 2025 am 10:20 AM</span>
</div>
</div>
<hr />
<div id="wjcelcm34c" class="article_main php-article">
<div id="wjcelcm34c" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p> CSS tulen mencipta kesan teks mesin taip yang menarik </p>
<p> <strong> mata teras: </strong> </p>
<ul>
<li> Kesan mesin taip CSS menjadikan kandungan laman web lebih dinamik dan menarik dengan secara beransur -ansur memaparkan teks, dan boleh digunakan untuk halaman log masuk, laman web peribadi dan demonstrasi kod. </li>
Kesan mesin taip <li> boleh dibuat dengan menggunakan fungsi CSS <code>steps()</code> untuk menukar lebar elemen teks dari 0% hingga 100%, dan untuk mensimulasikan kursor "putout" teks melalui animasi. </li>
<li> Kesan menaip boleh diselaraskan dengan meningkatkan atau mengurangkan bilangan langkah dan tempoh animasi menaip untuk menampung teks yang lebih panjang atau lebih pendek. </li>
Kesan mesin taip <li> boleh digunakan bersamaan dengan animasi kursor yang berkelip untuk meningkatkan kesannya, dan kursor boleh disesuaikan dengan menyesuaikan sifat, warna, kekerapan berkedip, dan lain -lain. <code>border-right</code>
</li>
</ul> Artikel ini akan membimbing anda bagaimana untuk membuat kesan mesin taip teks yang dinamik dan lebih menarik menggunakan CSS tulen. <p>
</p> Teks simulasi kesan mesin taip dipaparkan perkataan dengan perkataan, sama seperti menaip dalam masa nyata di hadapan anda. <p>
</p> <p> <s>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898121699865.jpg" class="lazy" alt="How to Create a CSS Typewriter Effect for Your Website "> Menambah kesan mesin taip dalam coretan teks membantu menarik pelawat laman web dan membuat mereka berminat untuk terus membaca. Kesan mesin taip boleh digunakan untuk pelbagai tujuan, seperti membuat halaman log masuk yang menarik, elemen panggilan-ke-tindakan, laman web peribadi, dan persembahan kod. </s></p>
<p> mudah untuk membuat kesan mesin taip </p>
<p> Mewujudkan kesan mesin taip adalah sangat mudah, anda hanya perlu mempunyai pengetahuan asas mengenai animasi CSS dan CSS untuk memahami tutorial ini. </p>
<p> Prinsip kerja kesan mesin taip adalah seperti berikut: </p>
<p>
</p> Animasi Typewriter secara beransur -ansur akan mengubah lebar elemen teks dari 0% hingga 100% dengan menggunakan fungsi CSS <ul>, dengan itu memaparkan elemen teks kami. <li>
<code>steps()</code> Animasi berkelip akan mensimulasikan kursor "putout" teks. </li>
<li>
</li> Buat laman web kesan mesin taip </ul>
<p> Pertama, mari buat halaman web untuk demonstrasi mesin taip. Ia akan mengandungi bekas </p> untuk teks mesin taip, dengan nama kelas <p>: <code><div>
<code>typed-out</code>
gaya gaya untuk bekas teks mesin taip <pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p> Sekarang kita mempunyai susun atur laman web, mari gaya untuk </p> dengan kelas "ditaip-keluar": <p>
<code><div></code>
</p> Sila ambil perhatian bahawa untuk membuat kesan mesin taip berkesan, kami telah menambah yang berikut: <pre class='brush:php;toolbar:false;'>.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</pre>
<p>
</p> <ul> dan <li> pastikan kandungan teks tidak dipaparkan sehingga kesan menaip bermula. <code>"overflow: hidden;"</code>
<code>"width: 0;"</code> </li>, buat kursor mesin taip. <li>
<code>"border-right: .15em solid orange;"</code>
</li> Sebelum membuat kesan menaip, untuk menghentikan kursor selepas huruf terakhir elemen </ul> sepenuhnya menaip (seperti mesin taip atau pemproses perkataan), kami akan membuat bekas untuk elemen <p> dan menambah <code>typed-out</code>: <code>typed-out</code>
<code>display: inline-block;</code>
</p> Buat animasi teks paparan <pre class='brush:php;toolbar:false;'>.container {
display: inline-block;
}</pre>
<p> Animasi Typewriter akan membuat kesan verbatim untuk teks dalam elemen </p> yang akan dipaparkan. Kami akan menggunakan peraturan animasi <p> CSS: <code>typed-out</code><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p> Seperti yang anda lihat, semua animasi ini adalah mengubah lebar elemen dari 0% hingga 100%. </p>
<p> Sekarang, kami menyertakan animasi ini dalam kelas <code>typed-out</code> kami dan menetapkan orientasi animasinya ke <code>forwards</code> untuk memastikan bahawa elemen teks tidak kembali ke <code>width: 0</code> selepas animasi selesai: </p>
<pre class='brush:php;toolbar:false;'>.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</pre>
<p> elemen teks kami akan dipaparkan dari kiri ke kanan dengan cara yang lancar: </p>
<p> tambah langkah untuk mencapai kesan mesin taip </p>
<p> Setakat ini, teks kami telah dipaparkan, tetapi ia adalah cara yang lancar untuk tidak memaparkan verbatim teks. Ini adalah permulaan, tetapi jelasnya ia tidak kelihatan seperti kesan mesin taip. </p>
<p> Agar animasi ini untuk memaparkan verbatim elemen teks atau langkah demi langkah (sama seperti mesin taip), kita perlu membahagikan animasi menaip yang terkandung dalam kelas <code>typed-out</code> . Di sinilah fungsi CSS <code>steps()</code> dimainkan: </p>
<pre class='brush:php;toolbar:false;'>.container {
display: inline-block;
}</pre>
<p> Seperti yang anda lihat, kami menggunakan fungsi CSS <code>steps()</code> untuk membahagikan animasi menaip ke dalam 20 langkah. </p>
<p> Laraskan langkah -langkah untuk menaip lebih lama </p>
<p> Untuk menyesuaikan teks yang lebih lama, anda perlu meningkatkan langkah dan tempoh animasi menaip. </p>
<p> Laraskan langkah -langkah untuk menaip yang lebih pendek </p>
<p> Untuk menyesuaikan teks yang lebih pendek, anda perlu mengurangkan langkah dan tempoh animasi menaip. </p>
<p> Buat dan tetapkan animasi kursor berkelip </p>
<p> Nampaknya, mesin taip mekanikal asal tidak mempunyai kursor yang berkelip, tetapi menambahnya untuk meniru kesan kursor berkelip dari pemproses komputer/kata yang lebih moden telah menjadi tradisi. Animasi kursor berkelip membantu membuat teks dicetak menonjol dari elemen teks statik. </p>
<p> Untuk menambah animasi kursor berkelip ke animasi mesin taip kami, kami akan mula membuat animasi berkelip: </p>
<pre class='brush:php;toolbar:false;'>@keyframes typing {
from { width: 0 }
to { width: 100% }
}</pre>
<p> Di laman web kami, animasi ini akan mengubah warna sempadan sempadan elemen <code>typed-out</code> (digunakan sebagai kursor untuk kesan mesin taip) dari telus ke oren. </p>
<p> Kami menyertakan animasi ini dalam peraturan kelas <code>typed-out</code> dan menetapkan sifat animasinya untuk <code>infinite</code> untuk membuat kursor hilang dan muncul semula selama -lamanya setiap 0.8 saat: </p>
<pre class='brush:php;toolbar:false;'>.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}</pre>
<p> kod untuk menyesuaikan kesan menaip berkelip </p>
<p> kita boleh membuat kursor kurus atau lebih tebal dengan menyesuaikan atribut <code>border-right: .15em solid orange;</code>, atau anda boleh membuat warna kursor berbeza, berikannya <code>border-radius</code>, menyesuaikan kekerapan kelipannya, dan sebagainya. </p>
<p> unsur menggabungkan animasi teks mesin taip </p>
<p> Sekarang anda tahu bagaimana membuat kesan mesin taip di CSS, sudah tiba masanya untuk menunjukkan beberapa kes penggunaan praktikal dan relevan untuk kesan mesin taip ini. </p>
<p> Kesimpulan </p>
<p> Dalam artikel ini, kita faham betapa mudahnya untuk membuat teks "mesin taip" animasi menggunakan CSS. Kesan menaip ini pasti dapat menambah keseronokan dan menyeronokkan ke halaman anda. </p><p> Walau bagaimanapun, ia mungkin bernilai amaran lembut pada akhirnya. Teknik ini lebih baik digunakan untuk sedikit teks bukan kritikal, hanya untuk menambah sedikit keseronokan tambahan. Tetapi berhati-hati untuk tidak terlalu bergantung pada itu, kerana terdapat beberapa batasan untuk menggunakan animasi CSS seperti ini. Pastikan untuk menguji teks mesin taip anda pada pelbagai peranti dan saiz viewport, kerana hasilnya mungkin berbeza mengikut platform. Juga pertimbangkan pengguna akhir yang bergantung kepada teknologi bantuan, idealnya, beberapa ujian kebolehgunaan boleh dilakukan untuk memastikan anda tidak menimbulkan kesulitan kepada pengguna. Kerana anda boleh melakukan sesuatu dengan CSS tulen tidak semestinya bermakna anda sepatutnya. Jika kesan mesin taip penting bagi anda dan anda mahu menggunakannya untuk kandungan yang lebih kritikal, mungkin sekurang -kurangnya mempertimbangkan penyelesaian JavaScript juga. </p>
<p> Bagaimanapun, saya harap anda menikmati siaran ini dan ia membuat anda berfikir tentang perkara -perkara lain yang boleh anda lakukan dengan animasi CSS untuk menambah keseronokan dan menyeronokkan ke halaman anda. </p>
<p> soalan yang sering ditanya mengenai membuat kesan mesin taip CSS </p>
<p> Akhirnya, mari kita jawab beberapa soalan yang paling biasa tentang cara membuat kesan mesin taip di CSS. </p>
<ul>
<li> <strong> Apakah kesan mesin taip? </strong> </li>
</ul>
<p> "Kesan Typewriter" adalah teknik animasi yang membuat rentetan teks muncul perkataan dengan perkataan pada skrin seolah -olah ia ditaip dalam masa nyata oleh mesin taip. Kesan ini biasanya dibuat dengan JavaScript, tetapi ia juga boleh dilaksanakan menggunakan CSS sahaja, seperti yang ditunjukkan dalam artikel ini. </p>
<ul>
<li> <strong> Apakah animasi mesin taip? </strong> </li>
</ul>
<p> mesin taip mencetak teks satu huruf pada satu masa. Animasi Taip adalah animasi yang meniru menaip mesin taip, menyampaikan teks dengan satu huruf pada satu masa. Ia adalah kesan animasi yang popular di banyak laman web. </p>
<ul>
<li> <strong> Bagaimana membuat teks animasi menaip dalam CSS? </strong> </li>
</ul>
<p> CSS moden menyediakan pelbagai alat untuk membuat animasi, termasuk <code>animation</code>, <code>@keyframes</code>, <code>steps()</code>. Alat ini digunakan untuk memaparkan teks secara beransur -ansur yang pertama kali tersembunyi melalui atribut <code>overflow</code>. </p>
<ul>
<li> <strong> Bagaimana menggunakan CSS untuk membuat animasi mesin taip yang disesuaikan? </strong> </li>
</ul>
<p> Membuat animasi mesin taip yang disesuaikan dengan CSS melibatkan penggunaan frame dan sifat CSS untuk mengawal bagaimana teks kelihatan dan berkelakuan semasa menaip pada skrin. Anda boleh membuatnya disesuaikan dengan mendedahkan beberapa parameter animasi sebagai pembolehubah CSS (sifat tersuai) supaya anda dapat dengan mudah mengubahnya dalam lembaran styles anda. Contohnya: <st>
<q>
</q> Dalam kod CSS ini, kami mentakrifkan sifat tersuai (</p> dan <pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>) untuk membuat animasi disesuaikan. Anda boleh menukar nilai lalai dengan mengubahsuai sifat -sifat ini. <p>
<code>--typewriter-text</code>
<code>--typewriter-duration</code> </p> Bagaimana untuk menghentikan kursor selepas surat terakhir elemen <ul> dicetak sepenuhnya? <li> <strong>
<code>typed-out</code>
</strong> Untuk menghentikan kursor huruf terakhir elemen </li> dalam animasi mesin taip CSS, anda boleh menggunakan animasi CSS dan atribut </ul>: <p><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p> Di CSS di atas, animasi mesin taip secara beransur -ansur meningkatkan lebar unsur -unsur dalam bekas, dengan berkesan menaip teks. Hartanah <code>.typewriter</code> ditetapkan kepada <code>animation-fill-mode</code> untuk memastikan bahawa animasi tetap muktamad (dimainkan sepenuhnya) selepas selesai. Dengan tetapan ini, kursor akan berkelip di elemen <code>forwards</code> selepas ia dicetak sepenuhnya. <code>typed-out</code>
</p>
<ul> <li> Apakah beberapa contoh laman web yang berkesan menggunakan kesan mesin taip? <strong> </strong>
</li>
</ul> Animasi mesin taip sering digunakan di laman web seperti laman portfolio, terutamanya pada pereka dan laman web pemaju, yang digunakan untuk menyerlahkan kemahiran utama dan menambah rasa kreatif ke halaman, dengan itu menarik perhatian pembaca. Kesan mesin taip kadang -kadang digunakan di laman web blog dan halaman log masuk serta demonstrasi produk. <p></p>
</div></code></p><p>Atas ialah kandungan terperinci Cara membuat kesan mesin taip CSS untuk laman web anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p>
</div>
</div>
<div id="wjcelcm34c" class="wzconShengming_sp">
<div id="wjcelcm34c" class="bzsmdiv_sp">Kenyataan Laman Web ini</div>
<div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div>
</div>
</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="2507867629"></ins>
<div id="wjcelcm34c" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796828810.html" title="NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini" class="phpgenera_Details_mainR4_bottom_title">NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div> -->
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat AI Hot</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title">
<h3>Undress AI Tool</h3>
</a>
<p>Gambar buka pakaian secara percuma</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title">
<h3>Undresser.AI Undress</h3>
</a>
<p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title">
<h3>AI Clothes Remover</h3>
</a>
<p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>Penyingkiran pakaian AI</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title">
<h3>Video Face Swap</h3>
</a>
<p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Artikel Panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796832397.html" title="Panduan Membina Rumput Wonder | Uma Musume Pretty Derby" class="phpgenera_Details_mainR4_bottom_title">Panduan Membina Rumput Wonder | Uma Musume Pretty Derby</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796833110.html" title="<??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka" class="phpgenera_Details_mainR4_bottom_title"><??>: 99 Malam di Hutan - Semua Lencana Dan Cara Membuka Kunci Mereka</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By DDD</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796831605.html" title="Jadual Banner Pretty Derby Uma Musume (Julai 2025)" class="phpgenera_Details_mainR4_bottom_title">Jadual Banner Pretty Derby Uma Musume (Julai 2025)</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 minggu yang lalu</span>
<span>By Jack chen</span>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/1796828810.html" title="NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini" class="phpgenera_Details_mainR4_bottom_title">NYT 'Connections' Lifs for Rabu, 2 Julai: Petunjuk dan Jawapan untuk Permainan Hari Ini</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 bulan yang lalu</span>
<span>By DDD</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/article.html">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hottools2.png" alt="" />
<h2>Alat panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_bottom">
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title">
<h3>Notepad++7.3.1</h3>
</a>
<p>Editor kod yang mudah digunakan dan percuma</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Cina</h3>
</a>
<p>Versi Cina, sangat mudah digunakan</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title">
<h3>Hantar Studio 13.0.1</h3>
</a>
<p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title">
<h3>Dreamweaver CS6</h3>
</a>
<p>Alat pembangunan web visual</p>
</div>
</div>
<div id="wjcelcm34c" class="phpmain_tab2_mids_top">
<a href="http://ipnx.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" />
</a>
<div id="wjcelcm34c" class="phpmain_tab2_mids_info">
<a href="http://ipnx.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title">
<h3>SublimeText3 versi Mac</h3>
</a>
<p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/ai">Tunjukkan Lagi</a>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4">
<div id="wjcelcm34c" class="phpmain1_4R_readrank">
<div id="wjcelcm34c" class="phpmain1_4R_readrank_top">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/hotarticle2.png" alt="" />
<h2>Topik panas</h2>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottom">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1597</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>29</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1488</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>72</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/nytminicrosswordanswe" title="Jawapan silang kata NYT mini" class="phpgenera_Details_mainR4_bottom_title">Jawapan silang kata NYT mini</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>268</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>587</span>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms">
<a href="http://ipnx.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_info">
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>130</span>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>836</span>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainR3_more">
<a href="http://ipnx.cn/ms/faq/zt">Tunjukkan Lagi</a>
</div>
</div>
</div>
</div>
</div>
<div id="wjcelcm34c" class="Article_Details_main2">
<div id="wjcelcm34c" class="phpgenera_Details_mainL4">
<div id="wjcelcm34c" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="wjcelcm34c" class="phpgenera_Details_mainL4_info">
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah AutoPrefixer dan bagaimana ia berfungsi?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796828180.html" title="Apakah AutoPrefixer dan bagaimana ia berfungsi?" class="phphistorical_Version2_mids_title">Apakah AutoPrefixer dan bagaimana ia berfungsi?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">AutoPrefixer adalah alat yang secara automatik menambah awalan vendor ke atribut CSS berdasarkan skop penyemak imbas sasaran. 1. Ia menyelesaikan masalah mengekalkan awalan secara manual dengan kesilapan; 2. Bekerja melalui borang pemalam postcss, menghuraikan CSS, menganalisis atribut yang perlu diawali, dan menjana kod mengikut konfigurasi; 3. Langkah-langkah penggunaan termasuk memasang pemalam, menetapkan senarai pelayar, dan membolehkan mereka dalam proses membina; 4. Nota termasuk tidak menambah awalan secara manual, menyimpan kemas kini konfigurasi, awalan tidak semua atribut, dan disyorkan untuk menggunakannya dengan preprocessor.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796828149.html" title="Tutorial CSS untuk membuat tajuk atau footer melekit" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175138946074845.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutorial CSS untuk membuat tajuk atau footer melekit" />
</a>
<a href="http://ipnx.cn/ms/faq/1796828149.html" title="Tutorial CSS untuk membuat tajuk atau footer melekit" class="phphistorical_Version2_mids_title">Tutorial CSS untuk membuat tajuk atau footer melekit</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 02, 2025 am 01:04 AM</span>
<p class="Articlelist_txts_p">TOCREATESTICKYHEADERSANDFOOTERSWITHCSS, USEPOSISI: STICKYFORHEADERSWITHOPVARUEANDZ-INDEX, MemastikanParentContainersdon'Trestrictit.1.ForstickyHeaders: SetPosition: Sticky, atas: 0, Z-index, dan BEBERKOORSICHISTORS.2.FORTOORSTICE: FORBORTORSIS.2.FORTORSICHORORS.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796828192.html" title="Bagaimana untuk membuat susun atur grid yang responsif secara intrinsik?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139036062064.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk membuat susun atur grid yang responsif secara intrinsik?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796828192.html" title="Bagaimana untuk membuat susun atur grid yang responsif secara intrinsik?" class="phphistorical_Version2_mids_title">Bagaimana untuk membuat susun atur grid yang responsif secara intrinsik?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 02, 2025 am 01:19 AM</span>
<p class="Articlelist_txts_p">Untuk membuat susun atur grid responsif intrinsik, kaedah teras adalah menggunakan mod berulang CSSGRID (auto-fit, minmax ()); 1. Tetapkan grid-templat-lajur: ulangi (auto-fit, Minmax (200px, 1FR)) untuk membiarkan penyemak imbas secara automatik menyesuaikan bilangan lajur dan menghadkan lebar minimum dan maksimum setiap lajur; 2. Gunakan jurang untuk mengawal jarak grid; 3. Bekas hendaklah ditetapkan kepada unit relatif seperti lebar: 100%, dan gunakan kotak saiz: kotak sempadan untuk mengelakkan kesilapan pengiraan lebar dan memusatkannya dengan margin: auto; 4. Secara pilihan menetapkan ketinggian baris dan penjajaran kandungan untuk meningkatkan konsistensi visual, seperti baris</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796831408.html" title="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175181807052041.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" />
</a>
<a href="http://ipnx.cn/ms/faq/1796831408.html" title="Tutorial CSS untuk membuat pemuatan dan animasi pemuatan" class="phphistorical_Version2_mids_title">Tutorial CSS untuk membuat pemuatan dan animasi pemuatan</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 12:07 AM</span>
<p class="Articlelist_txts_p">Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796828118.html" title="Tutorial CSS yang memberi tumpuan kepada reka bentuk pertama mudah alih" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175138874138984.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Tutorial CSS yang memberi tumpuan kepada reka bentuk pertama mudah alih" />
</a>
<a href="http://ipnx.cn/ms/faq/1796828118.html" title="Tutorial CSS yang memberi tumpuan kepada reka bentuk pertama mudah alih" class="phphistorical_Version2_mids_title">Tutorial CSS yang memberi tumpuan kepada reka bentuk pertama mudah alih</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 02, 2025 am 12:52 AM</span>
<p class="Articlelist_txts_p">Mudah alih-firstcssdesignrequiressettingtheViewportmetatag, menggunakan pelindung, stylingfromsmallscreensup, optimizingtypographyandtouchtargets.first, addtocontrolscaling.second, use%, eM, orreminsteadofpixelflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflexflex</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796828119.html" title="Bagaimana untuk memusatkan seluruh grid dalam paparan?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175138878123538.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk memusatkan seluruh grid dalam paparan?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796828119.html" title="Bagaimana untuk memusatkan seluruh grid dalam paparan?" class="phphistorical_Version2_mids_title">Bagaimana untuk memusatkan seluruh grid dalam paparan?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 02, 2025 am 12:53 AM</span>
<p class="Articlelist_txts_p">Untuk menjadikan keseluruhan susun atur grid berpusat di viewport, ia dapat dicapai dengan kaedah berikut: 1. Gunakan margin: 0Auto untuk mencapai pusat mendatar, dan bekas perlu ditetapkan untuk menetapkan lebar tetap, yang sesuai untuk susun atur tetap; 2. Gunakan Flexbox untuk menetapkan sifat-sifat yang wajar dan menyelaraskan-item di dalam bekas luar, dan menggabungkan min yang tinggi: 100VH untuk mencapai pusat menegak dan mendatar, yang sesuai untuk senario paparan skrin penuh; 3. Gunakan harta benda-item tempat CSSGRID untuk cepat berpusat pada bekas induk, yang mudah dan mempunyai sokongan yang baik dari pelayar moden, dan pada masa yang sama, adalah perlu untuk memastikan bahawa bekas induk mempunyai ketinggian yang mencukupi. Setiap kaedah mempunyai senario dan sekatan yang berkenaan, hanya pilih penyelesaian yang sesuai mengikut keperluan sebenar.</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796828177.html" title="Apakah pengesanan ciri dalam CSS menggunakan @Supports?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139007073539.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah pengesanan ciri dalam CSS menggunakan @Supports?" />
</a>
<a href="http://ipnx.cn/ms/faq/1796828177.html" title="Apakah pengesanan ciri dalam CSS menggunakan @Supports?" class="phphistorical_Version2_mids_title">Apakah pengesanan ciri dalam CSS menggunakan @Supports?</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 02, 2025 am 01:14 AM</span>
<p class="Articlelist_txts_p">Featuredetectionincsusing@supportschecksifabrowsersupportsaspecificfeatureBeforeapplyingrelatedStyles.1.itusesconditionalcssblocksbasedonproperty-nilai, suchas@supports (paparan: grid)</p>
</div>
<div id="wjcelcm34c" class="phphistorical_Version2_mids">
<a href="http://ipnx.cn/ms/faq/1796831743.html" title="Menangani masalah dan awalan keserasian penyemak imbas CSS" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175182386183257.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Menangani masalah dan awalan keserasian penyemak imbas CSS" />
</a>
<a href="http://ipnx.cn/ms/faq/1796831743.html" title="Menangani masalah dan awalan keserasian penyemak imbas CSS" class="phphistorical_Version2_mids_title">Menangani masalah dan awalan keserasian penyemak imbas CSS</a>
<span id="wjcelcm34c" class="Articlelist_txts_time">Jul 07, 2025 am 01:44 AM</span>
<p class="Articlelist_txts_p">Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,</p>
</div>
</div>
<a href="http://ipnx.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton">
<span>See all articles</span>
<img src="/static/imghw/down_right.png" alt="" />
</a>
</div>
</div>
</div>
</main>
<footer>
<div id="wjcelcm34c" class="footer">
<div id="wjcelcm34c" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p>
</div>
<div id="wjcelcm34c" class="footermid">
<a href="http://ipnx.cn/ms/about/us.html">Tentang kita</a>
<a href="http://ipnx.cn/ms/about/disclaimer.html">Penafian</a>
<a href="http://ipnx.cn/ms/update/article_0_1.html">Sitemap</a>
</div>
<div id="wjcelcm34c" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://ipnx.cn/" title="亚洲国产日韩欧美一区二区三区">亚洲国产日韩欧美一区二区三区</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="tltav" class="pl_css_ganrao" style="display: none;"><p id="tltav"></p><table id="tltav"></table><form id="tltav"></form><ol id="tltav"><var id="tltav"><video id="tltav"><delect id="tltav"></delect></video></var></ol><output id="tltav"></output><dl id="tltav"><pre id="tltav"><u id="tltav"><tt id="tltav"></tt></u></pre></dl><sup id="tltav"></sup><pre id="tltav"></pre><samp id="tltav"></samp><thead id="tltav"><tfoot id="tltav"><source id="tltav"></source></tfoot></thead><sup id="tltav"></sup><label id="tltav"></label><table id="tltav"></table><label id="tltav"></label><rp id="tltav"><pre id="tltav"></pre></rp><optgroup id="tltav"></optgroup><strong id="tltav"></strong><label id="tltav"></label><ins id="tltav"><ruby id="tltav"><li id="tltav"><delect id="tltav"></delect></li></ruby></ins><pre id="tltav"><legend id="tltav"><s id="tltav"></s></legend></pre><button id="tltav"><mark id="tltav"><center id="tltav"></center></mark></button><table id="tltav"><b id="tltav"><small id="tltav"></small></b></table><optgroup id="tltav"><ruby id="tltav"><th id="tltav"><nobr id="tltav"></nobr></th></ruby></optgroup><dfn id="tltav"><abbr id="tltav"></abbr></dfn><th id="tltav"></th><center id="tltav"></center><center id="tltav"><progress id="tltav"></progress></center><menuitem id="tltav"><span id="tltav"><thead id="tltav"><i id="tltav"></i></thead></span></menuitem><nav id="tltav"><button id="tltav"><mark id="tltav"><tfoot id="tltav"></tfoot></mark></button></nav><form id="tltav"><acronym id="tltav"><pre id="tltav"></pre></acronym></form><acronym id="tltav"><menu id="tltav"><i id="tltav"><s id="tltav"></s></i></menu></acronym><fieldset id="tltav"><thead id="tltav"><tbody id="tltav"><meter id="tltav"></meter></tbody></thead></fieldset><kbd id="tltav"></kbd><tr id="tltav"><ruby id="tltav"><rp id="tltav"></rp></ruby></tr><progress id="tltav"></progress><dfn id="tltav"></dfn><dd id="tltav"><acronym id="tltav"><label id="tltav"><th id="tltav"></th></label></acronym></dd><ol id="tltav"></ol><big id="tltav"><source id="tltav"><strong id="tltav"></strong></source></big><em id="tltav"><output id="tltav"><u id="tltav"><form id="tltav"></form></u></output></em><strike id="tltav"></strike><output id="tltav"><tr id="tltav"><strike id="tltav"></strike></tr></output><optgroup id="tltav"><strong id="tltav"></strong></optgroup><output id="tltav"><pre id="tltav"></pre></output><b id="tltav"></b><div id="tltav"><style id="tltav"><tr id="tltav"><xmp id="tltav"></xmp></tr></style></div><output id="tltav"><tr id="tltav"></tr></output><dl id="tltav"><code id="tltav"><abbr id="tltav"><del id="tltav"></del></abbr></code></dl><thead id="tltav"><progress id="tltav"></progress></thead><strong id="tltav"></strong></div>
</html>