Buat animasi sempadan menggunakan CSS-tutorial css-php.cn

Jadual Kandungan

Pendekatan - 3

Algoritma

Contoh

Kaedah - 2

Kesimpulan

Rumah

hujung hadapan web

tutorial css

Buat animasi sempadan menggunakan CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2023 am 08:57 AM

使用 CSS 创建边框动画

CSS digunakan untuk mencipta animasi sempadan yang cantik dan menarik, yang menambah pergerakan dan minat pada halaman web Untuk mencipta animasi sempadan, kita perlu menentukan sempadan untuk elemen yang ingin kita animasikan, kemudian kita akan gunakan peralihan CSS dan animasi untuk menambah pergerakan pada sempadan

Animasi sempadan boleh digunakan untuk membuat kesan tuding pada butang, pautan dan elemen interaktif yang lain. Animasi ini juga boleh digunakan untuk membuat animasi pemuatan yang menunjukkan kemajuan semasa halaman atau elemen sedang dimuatkan -butang tindakan untuk menjadikannya lebih ketara.

Pendekatan - 1

kami akan mencipta kesan tuding yang menghidupkan sempadan unsur apabila pengguna menuding di atasnya.

Algoritma

Buat dokumen HTML dan takrifkan tajuk sebagai "Hover Effect Border Animation".
Tambahkan animasi berdenyut pada sempadan dengan tempoh yang tidak terhingga dan pemasaan mudah masuk. Pudarkan sempadan daripada merah kepada hijau kepada biru apabila tetikus berada di atas kotak dan lumpuhkan animasi berdenyut
Tentukan animasi berdenyut dengan bingkai utama yang menukar warna jidar daripada merah kepada hijau kepada biru. Tambahkan elemen div dengan kelas kotak pada badan dokumen HTML
Simpan dan lihat fail HTML dalam pelayar web untuk melihat animasi sempadan kesan hover.

Terjemahan bahasa Cina bagi

Contoh

ialah:

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Hover Effect Border Animation</title>
   <style>
      /* Set up the body with flexbox to center the box */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         background-color: #48b6ff;
         min-height: 100vh;
      }
      /* Style the box with a transparent border */
      .box {
         display: inline-block;
         padding: 10px;
         font-size: 18px;
         color: #333;
         border: 2px solid transparent;
         transition: border 0.5s ease;
         /* Add the pulsing animation to the border */
         animation: border-pulse 2s ease-in-out infinite;
      }
      /* When the box is hovered, change the border to a gradient and disable the pulsing animation */
      .box:hover {
         border-image: linear-gradient(to right, #f00, #0f0, #00f);
         border-image-slice: 1;
         animation: none;
      }
      /* Define the pulsing animation */
      @keyframes border-pulse {
         0% {
            border-color: #f00;
         }
         50% {
            border-color: #0f0;
         }
         100% {
            border-color: #00f;
         }
      }
   </style>
</head>
<body>
   <!-- Add the box element to the HTML -->
   <div class="box">
      Hover over me
   </div>
</body>
</html>

Salin selepas log masuk

Kaedah - 2

Di sini, kami akan mencipta animasi pemuatan dengan menganimasikan sempadan ikon pemuatan.

Algoritma

Isytiharkan jenis dokumen sebagai HTML menggunakan
Mulakan dokumen HTML dengan membuka teg .
Tambahkan teg
Di dalam teg , tambahkan teg dan tetapkan tajuk dokumen kepada "Memuatkan Animasi Sempadan". </p></li> <li><p>Tambahkan teg <gaya> di dalam teg <head> untuk menambah penggayaan pada dokumen.</p></li> <li><p>Di dalam teg <style>, tambahkan peraturan CSS untuk menggayakan elemen <body> termasuk memusatkan animasi pemuatan dan menetapkan warna latar belakang.</p></li> <li><p>Tambahkan peraturan CSS untuk menggayakan animasi pemuatan dengan menetapkan saiz, bentuk, warna jidar dan sifat animasinya. </p></li> <li><p>Buat animasi bernama "spin" menggunakan peraturan @keyframes. </p></li> <li><p>Tambah peraturan transformasi untuk memutarkan elemen 360 darjah.</p></li> <li><p>Di dalam teg <body> tambahkan elemen <div> dengan kelas "pemuatan" untuk memaparkan animasi pemuatan.</p></li> </ul> Terjemahan bahasa Cina bagi <h3 id="Contoh">Contoh</h3> ialah: <h3 id="Contoh">Contoh</h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <title>Loading Border Animation</title> <style> /* Styling the body element to center the loading animation */ body{ display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; background-color: rgb(253, 114, 114); } /* Styling the loading element */ .loading { width: 50px; height: 50px; border: 5px solid #ccc; border-top-color: #3498db; /* Changing the top border color */ border-radius: 50%; /* Making the border round */ animation: spin 1s linear infinite; /* Adding animation to spin continuously */ margin: 50px auto; /* Centering the element with margin */ } /* Defining the animation */ @keyframes spin { to { transform: rotate(360deg); /* Rotating the element 360 degrees */ } } </style> </head> <body> <div class="loading"></div>  </body> </html> </pre><div class="contentsignin">Salin selepas log masuk</div></div> <h2 id="Pendekatan">Pendekatan - 3</h2> <p>Kami akan menggunakan CSS untuk menggunakan animasi sempadan pada butang seruan tindak. </p> <h3 id="Algoritma">Algoritma</h3> <ul class="list"> <li><p>Buat bekas dan tengahkannya.</p></li> <li><p>Gayakan elemen dengan jidar yang pada mulanya telus dan sifat peralihan untuk menghidupkan sempadan dalam 0.5 saat. </p></li> <li><p>Buat kesan tuding untuk elemen yang menukar jidar kepada kecerunan linear tiga warna: merah, hijau dan biru.</p></li> <li><p>Tentukan animasi bingkai utama yang dipanggil "nadi sempadan" untuk menukar warna sempadan elemen dari semasa ke semasa. </p></li> <li><p>Gunakan animasi "nadi sempadan" pada keadaan awal elemen. </p></li> <li><p>Apabila elemen dituding ke atas, lumpuhkan animasi "nadi sempadan" dengan menetapkannya kepada "tiada".</p></li> </ul> Terjemahan bahasa Cina bagi <h3 id="Contoh">Contoh</h3> ialah: <h3 id="Contoh">Contoh</h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <title>Call to Action Border Animation</title> <style> /* Set the background color and center content vertically */ body { background-color: #48b6ff; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; } /* Style the button */ .cta-button { display: inline-block; position: relative; padding: 16px 32px; background-color: #ff4d4d; color: #fff; font-size: 24px; text-transform: uppercase; text-decoration: none; border: none; overflow: hidden; transition: all 0.4s ease-out; } /* Add a pseudo-element to create the border animation */ .cta-button:before { content: ""; display: block; position: absolute; top: 0; left: 50%; width: 0; height: 100%; background-color: #fff; transform: translateX(-50%); z-index: -1; transition: all 0.4s ease-out; } /* Change the background and text color on hover */ .cta-button:hover { background-color: #fff; color: #ff4d4d; } /* Animate the pseudo-element to create the border animation */ .cta-button:hover:before { width: 110%; } </style> </head> <body> <a href="#" class="cta-button">Click Me</a> </body> </html> </pre><div class="contentsignin">Salin selepas log masuk</div></div> <h2 id="Kesimpulan">Kesimpulan</h2> <p>Walau bagaimanapun, animasi sempadan kadangkala boleh menyebabkan masalah prestasi, terutamanya apabila digunakan secara berlebihan atau digunakan pada elemen besar, mengakibatkan masa muat halaman yang lebih perlahan dan prestasi keseluruhan yang lebih rendah. Sesetengah pelayar web lama mungkin tidak menyokong teknik animasi tertentu. </p> <p>Kami juga boleh mencipta animasi sempadan menggunakan grafik SVG dan JavaScript. Mereka membenarkan animasi yang lebih kompleks dan memberikan lebih kawalan ke atas animasi. </p><p>Atas ialah kandungan terperinci Buat animasi sempadan menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </div> </div> <div class="wzconShengming_sp"> <div 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> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div 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> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>  <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div 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 class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" 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/173405034393877.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Hentai Generator" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/ms/ai/ai-hentai-generator" title="AI Hentai Generator" class="phpmain_tab2_mids_title"> <h3>AI Hentai Generator</h3> </a> <p>Menjana ai hentai secara percuma.</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div 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 class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785841.html" title="Assassin's Creed Shadows: Penyelesaian Riddle Seashell" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Penyelesaian Riddle Seashell</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796789525.html" title="Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini" class="phpgenera_Details_mainR4_bottom_title">Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796785857.html" title="Di mana untuk mencari kad kunci kawalan kren di atomfall" class="phpgenera_Details_mainR4_bottom_title">Di mana untuk mencari kad kunci kawalan kren di atomfall</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796781206.html" title="Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)" class="phpgenera_Details_mainR4_bottom_title">Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 bulan yang lalu</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/1796783009.html" title="Assassin's Creed Shadows - Cara Mencari Orang Panda" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows - Cara Mencari Orang Panda</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div class="phpgenera_Details_mainR3"> <div class="phpmain1_4R_readrank"> <div 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 class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpmain_tab2_mids_top"> <a href="https://www.php.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 class="phpmain_tab2_mids_info"> <a href="https://www.php.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 class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div class="phpgenera_Details_mainR4"> <div class="phpmain1_4R_readrank"> <div 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 class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7563</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>15</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1385</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>52</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/steamdzhmcssmgs" title="Apakah format nama akaun stim" class="phpgenera_Details_mainR4_bottom_title">Apakah format nama akaun stim</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>84</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>11</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/winactivationkeyper" title="kunci pengaktifan win11 kekal" class="phpgenera_Details_mainR4_bottom_title">kunci pengaktifan win11 kekal</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>61</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>19</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/ms/faq/newyorktimesdailybrief" title="Sambungan NYT menunjukkan dan jawapan" class="phpgenera_Details_mainR4_bottom_title">Sambungan NYT menunjukkan dan jawapan</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>28</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>99</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div class="Article_Details_main2"> <div class="phpgenera_Details_mainL4"> <div 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 class="phpgenera_Details_mainL4_info"> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796781381.html" title="Bekerja dengan Caching Graphql" 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/242/473/174234817561178.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bekerja dengan Caching Graphql" /> </a> <a href="https://www.php.cn/ms/faq/1796781381.html" title="Bekerja dengan Caching Graphql" class="phphistorical_Version2_mids_title">Bekerja dengan Caching Graphql</a> <span class="Articlelist_txts_time">Mar 19, 2025 am 09:36 AM</span> <p class="Articlelist_txts_p">Sekiranya anda baru -baru ini mula bekerja dengan GraphQL, atau mengkaji semula kebaikan dan keburukannya, anda tidak akan ragu -ragu mendengar perkara seperti "Graphql tidak menyokong caching" atau</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796785898.html" title="Membina aplikasi Ethereum menggunakan redwood.js dan fauna" 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/242/473/174312469519177.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Membina aplikasi Ethereum menggunakan redwood.js dan fauna" /> </a> <a href="https://www.php.cn/ms/faq/1796785898.html" title="Membina aplikasi Ethereum menggunakan redwood.js dan fauna" class="phphistorical_Version2_mids_title">Membina aplikasi Ethereum menggunakan redwood.js dan fauna</a> <span class="Articlelist_txts_time">Mar 28, 2025 am 09:18 AM</span> <p class="Articlelist_txts_p">Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796788768.html" title="Vue 3" 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/242/473/174358993181853.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Vue 3" /> </a> <a href="https://www.php.cn/ms/faq/1796788768.html" title="Vue 3" class="phphistorical_Version2_mids_title">Vue 3</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:32 PM</span> <p class="Articlelist_txts_p">Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796788752.html" title="Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?" 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/242/473/174358903289234.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?" /> </a> <a href="https://www.php.cn/ms/faq/1796788752.html" title="Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?" class="phphistorical_Version2_mids_title">Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:17 PM</span> <p class="Articlelist_txts_p">Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796788757.html" title="Sedikit di CI/CD" 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/242/473/174358927236069.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Sedikit di CI/CD" /> </a> <a href="https://www.php.cn/ms/faq/1796788757.html" title="Sedikit di CI/CD" class="phphistorical_Version2_mids_title">Sedikit di CI/CD</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:21 PM</span> <p class="Articlelist_txts_p">Saya '</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796788762.html" title="Membandingkan penyemak imbas untuk reka bentuk responsif" 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/242/473/174358951197249.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Membandingkan penyemak imbas untuk reka bentuk responsif" /> </a> <a href="https://www.php.cn/ms/faq/1796788762.html" title="Membandingkan penyemak imbas untuk reka bentuk responsif" class="phphistorical_Version2_mids_title">Membandingkan penyemak imbas untuk reka bentuk responsif</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:25 PM</span> <p class="Articlelist_txts_p">Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796789317.html" title="Kad yang disusun dengan kedudukan melekit dan sasaran sass" 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/242/473/174364741689028.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kad yang disusun dengan kedudukan melekit dan sasaran sass" /> </a> <a href="https://www.php.cn/ms/faq/1796789317.html" title="Kad yang disusun dengan kedudukan melekit dan sasaran sass" class="phphistorical_Version2_mids_title">Kad yang disusun dengan kedudukan melekit dan sasaran sass</a> <span class="Articlelist_txts_time">Apr 03, 2025 am 10:30 AM</span> <p class="Articlelist_txts_p">Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/ms/faq/1796788000.html" title="Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress" 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/242/473/174353923244621.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress" /> </a> <a href="https://www.php.cn/ms/faq/1796788000.html" title="Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress" class="phphistorical_Version2_mids_title">Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress</a> <span class="Articlelist_txts_time">Apr 02, 2025 am 04:27 AM</span> <p class="Articlelist_txts_p">Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?</p> </div> </div> <a href="https://www.php.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 class="footer"> <div 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 class="footermid"> <a href="https://www.php.cn/ms/about/us.html">Tentang kita</a> <a href="https://www.php.cn/ms/about/disclaimer.html">Penafian</a> <a href="https://www.php.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div class="footerbottom"> <p> © php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script> <script src="/static/js/common_new.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js?1745007668"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <script type='text/javascript' src='/static/js/viewer.min.js?1'></script> <script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script> <script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script> <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function () { var u = "https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u + 'matomo.php']); _paq.push(['setSiteId', '9']); var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0]; g.async = true; g.src = u + 'matomo.js'; s.parentNode.insertBefore(g, s); })(); </script> <script> // top layui.use(function () { var util = layui.util; util.fixbar({ on: { mouseenter: function (type) { layer.tips(type, this, { tips: 4, fixed: true, }); }, mouseleave: function (type) { layer.closeAll("tips"); }, }, }); }); document.addEventListener("DOMContentLoaded", (event) => { // 定义一个函数来处理滚动链接的点击事件 function setupScrollLink(scrollLinkId, targetElementId) { const scrollLink = document.getElementById(scrollLinkId); const targetElement = document.getElementById(targetElementId); if (scrollLink && targetElement) { scrollLink.addEventListener("click", (e) => { e.preventDefault(); // 阻止默认链接行为 targetElement.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到目标元素 }); } else { console.warn( `Either scroll link with ID '${scrollLinkId}' or target element with ID '${targetElementId}' not found.` ); } } // 使用该函数设置多个滚动链接 setupScrollLink("Article_Details_main1L2s_1", "article_main_title1"); setupScrollLink("Article_Details_main1L2s_2", "article_main_title2"); setupScrollLink("Article_Details_main1L2s_3", "article_main_title3"); setupScrollLink("Article_Details_main1L2s_4", "article_main_title4"); setupScrollLink("Article_Details_main1L2s_5", "article_main_title5"); setupScrollLink("Article_Details_main1L2s_6", "article_main_title6"); // 可以继续添加更多的滚动链接设置 }); window.addEventListener("scroll", function () { var fixedElement = document.getElementById("Article_Details_main1Lmain"); var scrollTop = window.scrollY || document.documentElement.scrollTop; // 兼容不同浏览器 var clientHeight = window.innerHeight || document.documentElement.clientHeight; // 视口高度 var scrollHeight = document.documentElement.scrollHeight; // 页面总高度 // 计算距离底部的距离 var distanceToBottom = scrollHeight - scrollTop - clientHeight; // 当距离底部小于或等于300px时，取消固定定位 if (distanceToBottom <= 980) { fixedElement.classList.remove("Article_Details_main1Lmain"); fixedElement.classList.add("Article_Details_main1Lmain_relative"); } else { // 否则，保持固定定位 fixedElement.classList.remove("Article_Details_main1Lmain_relative"); fixedElement.classList.add("Article_Details_main1Lmain"); } }); </script> </body> </html>