Create a border animation using CSS-CSS Tutorial-php.cn

Table of Contents

Approach - 3

Algorithm

Example

Method - 2

Conclusion

Home

Web Front-end

CSS Tutorial

Create a border animation using 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 a 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. We can also use border animations on call -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

Create an HTML document and define the title as "Hover Effect Border Animation".
Add a pulsing animation to the border with an infinite duration and ease-in-out timing. Fade the border from red to green to blue when the mouse is over the box and disable the pulsating animation
Define the pulsing animation with a keyframe that changes the border color from red to green to blue. Add a div element with a box class to the body of the HTML document
Save and view the HTML file in a web browser to see the hover effect border animation.

The Chinese translation of

Example

is:

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>

Copy after login

Method - 2

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

Algorithm

Use the declaration to declare the document type as HTML.
Start the HTML document by opening the tag.
Add the tag inside the tag.
Inside the tag, add a tag and set the title of the document to "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>Add a CSS rule to style the loading animation by setting its size, shape, border color and animation properties. </p></li> <li><p>Use the @keyframes rule to create an animation named "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> The Chinese translation of <h3 id="Example">Example</h3> is: <h3 id="Example">Example</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">Copy after login</div></div> <h2 id="Approach">Approach - 3</h2> <p> We will use CSS to apply a border animation to the call-to-action button. </p> <h3 id="Algorithm">Algorithm</h3> <ul class="list"> <li><p>Create a container and center it.</p></li> <li><p>Style the element with an initially transparent border and transition properties so that the border animates in 0.5 seconds. </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>Define a keyframe animation called "border-pulse" to change the border color of an element over time. </p></li> <li><p>Apply "border-pulse" animation to the element's initial state. </p></li> <li><p>When the element is hovered over, disable the "border-pulse" animation by setting it to "none".</p></li> </ul> The Chinese translation of <h3 id="Example">Example</h3> is: <h3 id="Example">Example</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">Copy after login</div></div> <h2 id="Conclusion">Conclusion</h2> <p> However, border animations can sometimes cause performance issues, especially when overused or applied to large elements, resulting in slower page load times and lower overall performance. Some older web browsers may not support certain animation techniques. </p> <p>We can also create border animations using SVG graphics and JavaScript. They allow for more complex animations and provide more control over animations. </p><p>The above is the detailed content of Create a border animation using CSS. For more information, please follow other related articles on the PHP Chinese website!</p> </div> </div> <div class="wzconShengming_sp"> <div class="bzsmdiv_sp">Statement of this Website</div> <div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact 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>Hot AI Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>AI-powered app for creating realistic nude photos</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Online AI tool for removing clothes from photos.</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Undress images for free</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>AI clothes remover</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Swap faces in any video effortlessly with our completely free AI face swap tool!</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</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>Hot Article</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796793874.html" title="How to fix KB5055523 fails to install in Windows 11?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055523 fails to install in Windows 11?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796793871.html" title="How to fix KB5055518 fails to install in Windows 10?" class="phpgenera_Details_mainR4_bottom_title">How to fix KB5055518 fails to install in Windows 10?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796792155.html" title="Strength Levels for Every Enemy & Monster in R.E.P.O." class="phpgenera_Details_mainR4_bottom_title">Strength Levels for Every Enemy & Monster in R.E.P.O.</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By 尊渡假赌尊渡假赌尊渡假赌</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796791957.html" title="Roblox: Dead Rails - How To Tame Wolves" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Tame Wolves</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796794243.html" title="Blue Prince: How To Get To The Basement" class="phpgenera_Details_mainR4_bottom_title">Blue Prince: How To Get To The Basement</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>3 weeks ago</span> <span>By DDD</span> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/article.html">Show More</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>Hot Tools</h2> </div> <div class="phpgenera_Details_mainR3_bottom"> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Easy-to-use and free code editor</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" 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 Chinese version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/93" title="SublimeText3 Chinese version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Chinese version</h3> </a> <p>Chinese version, very easy to use</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend 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="Zend Studio 13.0.1" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/121" title="Zend Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Zend Studio 13.0.1</h3> </a> <p>Powerful PHP integrated development environment</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/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/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Visual web development tools</p> </div> </div> <div class="phpmain_tab2_mids_top"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" 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 version" /> </a> <div class="phpmain_tab2_mids_info"> <a href="https://www.php.cn/toolset/development-tools/500" title="SublimeText3 Mac version" class="phpmain_tab2_mids_title"> <h3>SublimeText3 Mac version</h3> </a> <p>God-level code editing software (SublimeText3)</p> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/ai">Show More</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>Hot Topics</h2> </div> <div class="phpgenera_Details_mainR4_bottom"> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1653</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/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1413</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/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1306</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/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1251</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>29</span> </div> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/c-tutorial" title="C# Tutorial" class="phpgenera_Details_mainR4_bottom_title">C# Tutorial</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1224</span> </div> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>24</span> </div> </div> </div> </div> <div class="phpgenera_Details_mainR3_more"> <a href="https://www.php.cn/faq/zt">Show More</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/faq/1796793402.html" title="Google Fonts Variable Fonts" 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/174416654036527.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Google Fonts Variable Fonts" /> </a> <a href="https://www.php.cn/faq/1796793402.html" title="Google Fonts Variable Fonts" class="phphistorical_Version2_mids_title">Google Fonts Variable Fonts</a> <span class="Articlelist_txts_time">Apr 09, 2025 am 10:42 AM</span> <p class="Articlelist_txts_p">I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796794438.html" title="How to Create an Animated Countdown Timer With HTML, CSS and JavaScript" 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/174434215340834.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to Create an Animated Countdown Timer With HTML, CSS and JavaScript" /> </a> <a href="https://www.php.cn/faq/1796794438.html" title="How to Create an Animated Countdown Timer With HTML, CSS and JavaScript" class="phphistorical_Version2_mids_title">How to Create an Animated Countdown Timer With HTML, CSS and JavaScript</a> <span class="Articlelist_txts_time">Apr 11, 2025 am 11:29 AM</span> <p class="Articlelist_txts_p">Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796794458.html" title="HTML Data Attributes Guide" 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/174434341038602.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="HTML Data Attributes Guide" /> </a> <a href="https://www.php.cn/faq/1796794458.html" title="HTML Data Attributes Guide" class="phphistorical_Version2_mids_title">HTML Data Attributes Guide</a> <span class="Articlelist_txts_time">Apr 11, 2025 am 11:50 AM</span> <p class="Articlelist_txts_p">Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796791125.html" title="How to select a child element with the first class name item through 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/246/273/174260401491371.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How to select a child element with the first class name item through CSS?" /> </a> <a href="https://www.php.cn/faq/1796791125.html" title="How to select a child element with the first class name item through CSS?" class="phphistorical_Version2_mids_title">How to select a child element with the first class name item through CSS?</a> <span class="Articlelist_txts_time">Apr 05, 2025 pm 11:24 PM</span> <p class="Articlelist_txts_p">When the number of elements is not fixed, how to select the first child element of the specified class name through CSS. When processing HTML structure, you often encounter different elements...</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796791012.html" title="Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?" 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="Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?" /> </a> <a href="https://www.php.cn/faq/1796791012.html" title="Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?" class="phphistorical_Version2_mids_title">Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?</a> <span class="Articlelist_txts_time">Apr 05, 2025 pm 05:51 PM</span> <p class="Articlelist_txts_p">Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796797090.html" title="A Proof of Concept for Making Sass Faster" 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/174477109476267.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="A Proof of Concept for Making Sass Faster" /> </a> <a href="https://www.php.cn/faq/1796797090.html" title="A Proof of Concept for Making Sass Faster" class="phphistorical_Version2_mids_title">A Proof of Concept for Making Sass Faster</a> <span class="Articlelist_txts_time">Apr 16, 2025 am 10:38 AM</span> <p class="Articlelist_txts_p">At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796791104.html" title="In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?" 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/174261013851777.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?" /> </a> <a href="https://www.php.cn/faq/1796791104.html" title="In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?" class="phphistorical_Version2_mids_title">In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?</a> <span class="Articlelist_txts_time">Apr 05, 2025 pm 10:21 PM</span> <p class="Articlelist_txts_p">How to implement Windows-like in front-end development...</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796793463.html" title="How We Created a Static Site That Generates Tartan Patterns in SVG" 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/174416935255514.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="How We Created a Static Site That Generates Tartan Patterns in SVG" /> </a> <a href="https://www.php.cn/faq/1796793463.html" title="How We Created a Static Site That Generates Tartan Patterns in SVG" class="phphistorical_Version2_mids_title">How We Created a Static Site That Generates Tartan Patterns in SVG</a> <span class="Articlelist_txts_time">Apr 09, 2025 am 11:29 AM</span> <p class="Articlelist_txts_p">Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan</p> </div> </div> <a href="https://www.php.cn/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>Public welfare online PHP training，Help PHP learners grow quickly！</p> </div> <div class="footermid"> <a href="https://www.php.cn/about/us.html">About us</a> <a href="https://www.php.cn/about/disclaimer.html">Disclaimer</a> <a href="https://www.php.cn/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?1746295955"></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>