使用 CSS 建立邊框動畫-css教學-PHP中文網

Approach - 3

Algorithm

Example

範例

方法 - 2

Conclusion

首頁

web前端

css教學

使用 CSS 建立邊框動畫

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2023 am 08:57 AM

使用 CSS 创建边框动画

CSS is used to create beautiful and engaging border animations, which add movement and interest to a web page. To create border animation, we will first need to define aorder for the element animation, we will first need to define border for the element we want to animate, then we'll use CSS transitions and animations to add movement to the border.

Border animations can be used to create hover effects on buttons, links, and other interactive elements. They can also be used to create loading animations that show progress while a page or element is loading animations that show progress on page or -to-action buttons to make them more noticeable.

Approach - 1

we will create a hover effect that animates the border of an element when a user hovers over it.

Algorithm

建立一個HTML文檔，並將標題定義為"Hover Effect Border Animation"。
Add a pulsing animation to the border with an infinite duration and ease-in-out timing. 當滑鼠懸停在盒子上時，將邊框從紅色漸變為綠色再到藍色，並禁用脈動動畫
Define the pulsing animation with a keyframe that changes the border color from red to green to blue. 在HTML文件的body中新增一個帶有box類別的div元素
Save and view the HTML file in a web browser to see the hover effect border animation.

Example

的中文翻譯為：

範例

<!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>

登入後複製

方法 - 2

Here, we will create a loading animation by animating the border of the loading icon.

Algorithm

使用宣告將文件類型宣告為HTML。
Start the HTML document by opening the tag.
在標籤內部加上標籤。
在標籤內，新增一個標籤，並將文件的標題設為"Loading Border Animation"。 </p></li> <li><p>Add a <style> tag inside the <head> tag to add styling to the document.</p></li><li><p>#Inside the <style> tag, add CSS rules to style the <body> element, including centering the loading animation and setting the background color.</p></li> <li><p>透過設定其大小、形狀、邊框顏色和動畫屬性，新增一個CSS規則來樣式化載入動畫。 </p></li> <li><p>使用 @keyframes 規則建立一個名為 "spin" 的動畫。 </p></li> <li><p>Add the transform rule to rotate the element 360 degrees.</p></li> <li><p>Inside the <body> tag, add an <div> element with a class of "loading" to display the loading animation.</p></li> </ul> <h3 id="Example">Example</h3> 的中文翻譯為：<h3 id="範例">範例</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">登入後複製</div></div> <h2 id="Approach">Approach - 3</h2> <p>我們將使用CSS對呼叫到行動按鈕套用邊框動畫。 </p> <h3 id="Algorithm">Algorithm</h3> <ul class="list"> <li><p>Create a container and center it.</p></li><li><p>#使用初始為透明的邊框和過渡屬性對元素進行樣式設置，使邊框在0.5秒內動畫化。 </p></li> <li><p>Create a hover effect for the element that changes the border to a linear gradient of three colors: red, green, and blue.</p></li> <li><p>定義一個名為 "border-pulse" 的關鍵影格動畫，隨著時間的推移改變元素的邊框顏色。 </p></li> <li><p>將「border-pulse」動畫套用到元素的初始狀態。 </p></li> <li><p>When the element is hovered over, disable the "border-pulse" animation by setting it to "none".</p></li> </ul> <h3 id="Example">Example</h3> 的中文翻譯為：<h3 id="範例">範例</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">登入後複製</div></div> <h2 id="Conclusion">Conclusion</h2> <p>然而，邊框動畫有時可能會導致效能問題，特別是在過度使用或應用於大型元素時，會導致頁面載入時間變慢和整體效能降低。一些較舊的網頁瀏覽器可能不支援某些動畫技術。 </p> <p>我們也可以使用SVG圖形和JavaScript來建立邊框動畫。它們允許更複雜的動畫，並提供對動畫的更多控制。 </p><p>以上是使用 CSS 建立邊框動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">本網站聲明</div> <div>本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡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>熱AI工具</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/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/zh-tw/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>人工智慧驅動的應用程序，用於創建逼真的裸體照片</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/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/zh-tw/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>用於從照片中去除衣服的線上人工智慧工具。</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/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/zh-tw/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>免費脫衣圖片</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/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/zh-tw/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI脫衣器</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/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 class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/ai">顯示更多</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>熱門文章</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796785841.html" title="刺客信條陰影：貝殼謎語解決方案" class="phpgenera_Details_mainR4_bottom_title">刺客信條陰影：貝殼謎語解決方案</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個月前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796789525.html" title="Windows 11 KB5054979中的新功能以及如何解決更新問題" class="phpgenera_Details_mainR4_bottom_title">Windows 11 KB5054979中的新功能以及如何解決更新問題</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796785857.html" title="在哪裡可以找到原子中的起重機控制鑰匙卡" class="phpgenera_Details_mainR4_bottom_title">在哪裡可以找到原子中的起重機控制鑰匙卡</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 個月前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796793874.html" title="如何修復KB5055523無法在Windows 11中安裝？" class="phpgenera_Details_mainR4_bottom_title">如何修復KB5055523無法在Windows 11中安裝？</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>2 週前</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/1796787760.html" title="Inzoi：如何申請學校和大學" class="phpgenera_Details_mainR4_bottom_title">Inzoi：如何申請學校和大學</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 週前</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/article.html">顯示更多</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>熱工具</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/92" title="記事本++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="記事本++7.3.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/92" title="記事本++7.3.1" class="phpmain_tab2_mids_title"> <h3>記事本++7.3.1</h3> </a> <p>好用且免費的程式碼編輯器</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" 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漢化版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/93" title="SublimeText3漢化版" class="phpmain_tab2_mids_title"> <h3>SublimeText3漢化版</h3> </a> <p>中文版，非常好用</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/121" title="禪工作室 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="禪工作室 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/121" title="禪工作室 13.0.1" class="phpmain_tab2_mids_title"> <h3>禪工作室 13.0.1</h3> </a> <p>強大的PHP整合開發環境</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/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/zh-tw/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>視覺化網頁開發工具</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 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 Mac版" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/zh-tw/toolset/development-tools/500" title="SublimeText3 Mac版" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac版</h3> </a> <p>神級程式碼編輯軟體(SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/ai">顯示更多</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>熱門話題</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/gmailyxdlrkzn" title="gmail信箱登陸入口在哪裡" class="phpgenera_Details_mainR4_bottom_title">gmail信箱登陸入口在哪裡</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7783</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/zh-tw/faq/java-tutorial" title="Java教學" class="phpgenera_Details_mainR4_bottom_title">Java教學</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1644</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>14</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/cakephp-tutor" title="CakePHP 教程" class="phpgenera_Details_mainR4_bottom_title">CakePHP 教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1400</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/zh-tw/faq/laravel-tutori" title="Laravel 教程" class="phpgenera_Details_mainR4_bottom_title">Laravel 教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1297</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>25</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/zh-tw/faq/php-tutorial" title="PHP教程" class="phpgenera_Details_mainR4_bottom_title">PHP教程</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1234</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/zh-tw/faq/zt">顯示更多</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/zh-tw/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/zh-tw/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">它的出局！恭喜Vue團隊完成了完成，我知道這是一項巨大的努力，而且很長時間。所有新文檔也是如此。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796785898.html" title="使用Redwood.js和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="使用Redwood.js和Fauna構建以太坊應用" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796785898.html" title="使用Redwood.js和Fauna構建以太坊應用" class="phphistorical_Version2_mids_title">使用Redwood.js和Fauna構建以太坊應用</a> <span class="Articlelist_txts_time">Mar 28, 2025 am 09:18 AM</span> <p class="Articlelist_txts_p">隨著最近比特幣價格超過20k美元的攀升，最近打破了3萬美元，我認為值得深入研究創建以太坊</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796788752.html" title="您可以從瀏覽器獲得有效的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/242/473/174358903289234.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="您可以從瀏覽器獲得有效的CSS屬性值嗎？" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796788752.html" title="您可以從瀏覽器獲得有效的CSS屬性值嗎？" class="phphistorical_Version2_mids_title">您可以從瀏覽器獲得有效的CSS屬性值嗎？</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:17 PM</span> <p class="Articlelist_txts_p">我有人寫了這個非常合法的問題。 Lea只是在博客上介紹瞭如何從瀏覽器中獲得有效的CSS屬性。那樣的是這樣。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796789317.html" title="帶有粘性定位的堆疊卡和一點點的雜物" 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="帶有粘性定位的堆疊卡和一點點的雜物" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796789317.html" title="帶有粘性定位的堆疊卡和一點點的雜物" class="phphistorical_Version2_mids_title">帶有粘性定位的堆疊卡和一點點的雜物</a> <span class="Articlelist_txts_time">Apr 03, 2025 am 10:30 AM</span> <p class="Articlelist_txts_p">前幾天，我發現了科里·金尼文（Corey Ginnivan）網站上的這一點，當您滾動時，彼此之間的卡片堆放集。</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796788757.html" title="在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="在CI/CD上有點" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796788757.html" title="在CI/CD上有點" class="phphistorical_Version2_mids_title">在CI/CD上有點</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:21 PM</span> <p class="Articlelist_txts_p">我說的“網站”比“移動應用程序”更合適，但我喜歡Max Lynch的框架：</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796788000.html" title="在WordPress塊編輯器中使用Markdown和本地化" 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="在WordPress塊編輯器中使用Markdown和本地化" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796788000.html" title="在WordPress塊編輯器中使用Markdown和本地化" class="phphistorical_Version2_mids_title">在WordPress塊編輯器中使用Markdown和本地化</a> <span class="Articlelist_txts_time">Apr 02, 2025 am 04:27 AM</span> <p class="Articlelist_txts_p">如果我們需要直接在WordPress編輯器中向用戶顯示文檔，那麼最佳方法是什麼？</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796788762.html" title="比較瀏覽器的響應式設計" 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="比較瀏覽器的響應式設計" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796788762.html" title="比較瀏覽器的響應式設計" class="phphistorical_Version2_mids_title">比較瀏覽器的響應式設計</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:25 PM</span> <p class="Articlelist_txts_p">這些桌面應用程序中有許多目標是同時在不同的維度上顯示您的網站。因此，例如，您可以寫作</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/zh-tw/faq/1796791012.html" title="為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？" 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/246/273/174278089355920.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？" /> </a> <a href="https://www.php.cn/zh-tw/faq/1796791012.html" title="為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？" class="phphistorical_Version2_mids_title">為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”？</a> <span class="Articlelist_txts_time">Apr 05, 2025 pm 05:51 PM</span> <p class="Articlelist_txts_p">關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時，你可能會遇到一些令人困惑的現象，比如在開發者工具（d...</p> </div> </div> <a href="https://www.php.cn/zh-tw/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>公益線上PHP培訓，幫助PHP學習者快速成長！</p> </div> <div class="footermid"> <a href="https://www.php.cn/zh-tw/about/us.html">關於我們</a> <a href="https://www.php.cn/zh-tw/about/disclaimer.html">免責聲明</a> <a href="https://www.php.cn/zh-tw/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?1745820394"></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> <script> document.addEventListener('DOMContentLoaded', function() { const mainNav = document.querySelector('.Article_Details_main1Lmain'); const header = document.querySelector('header'); if (mainNav) { window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; if (scrollPosition > 84) { mainNav.classList.add('fixed'); } else { mainNav.classList.remove('fixed'); } }); } }); </script> </body> </html>