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/1796785841.html" title="Assassin's Creed Shadows: Seashell Riddle Solution" class="phpgenera_Details_mainR4_bottom_title">Assassin's Creed Shadows: Seashell Riddle Solution</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796789525.html" title="What's New in Windows 11 KB5054979 & How to Fix Update Issues" class="phpgenera_Details_mainR4_bottom_title">What's New in Windows 11 KB5054979 & How to Fix Update Issues</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/1796785857.html" title="Where to find the Crane Control Keycard in Atomfall" class="phpgenera_Details_mainR4_bottom_title">Where to find the Crane Control Keycard in Atomfall</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>4 weeks ago</span> <span>By DDD</span> </div> </div> <div class="phpgenera_Details_mainR4_bottoms"> <a href="https://www.php.cn/faq/1796784440.html" title="Roblox: Dead Rails - How To Complete Every Challenge" class="phpgenera_Details_mainR4_bottom_title">Roblox: Dead Rails - How To Complete Every Challenge</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <span>1 months ago</span> <span>By DDD</span> </div> </div> <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>2 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/gmailyxdlrkzn" title="Where is the login entrance for gmail email?" class="phpgenera_Details_mainR4_bottom_title">Where is the login entrance for gmail email?</a> <div class="phpgenera_Details_mainR4_bottoms_info"> <div class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>7728</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/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>1643</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>1397</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>1290</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>1233</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/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/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/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">It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796785898.html" title="Building an Ethereum app using Redwood.js and 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="Building an Ethereum app using Redwood.js and Fauna" /> </a> <a href="https://www.php.cn/faq/1796785898.html" title="Building an Ethereum app using Redwood.js and Fauna" class="phphistorical_Version2_mids_title">Building an Ethereum app using Redwood.js and Fauna</a> <span class="Articlelist_txts_time">Mar 28, 2025 am 09:18 AM</span> <p class="Articlelist_txts_p">With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796788752.html" title="Can you get valid CSS property values from the browser?" 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="Can you get valid CSS property values from the browser?" /> </a> <a href="https://www.php.cn/faq/1796788752.html" title="Can you get valid CSS property values from the browser?" class="phphistorical_Version2_mids_title">Can you get valid CSS property values from the browser?</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:17 PM</span> <p class="Articlelist_txts_p">I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796789317.html" title="Stacked Cards with Sticky Positioning and a Dash of 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="Stacked Cards with Sticky Positioning and a Dash of Sass" /> </a> <a href="https://www.php.cn/faq/1796789317.html" title="Stacked Cards with Sticky Positioning and a Dash of Sass" class="phphistorical_Version2_mids_title">Stacked Cards with Sticky Positioning and a Dash of Sass</a> <span class="Articlelist_txts_time">Apr 03, 2025 am 10:30 AM</span> <p class="Articlelist_txts_p">The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796788757.html" title="A bit on 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="A bit on ci/cd" /> </a> <a href="https://www.php.cn/faq/1796788757.html" title="A bit on ci/cd" class="phphistorical_Version2_mids_title">A bit on ci/cd</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:21 PM</span> <p class="Articlelist_txts_p">I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796788762.html" title="Comparing Browsers for Responsive Design" 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="Comparing Browsers for Responsive Design" /> </a> <a href="https://www.php.cn/faq/1796788762.html" title="Comparing Browsers for Responsive Design" class="phphistorical_Version2_mids_title">Comparing Browsers for Responsive Design</a> <span class="Articlelist_txts_time">Apr 02, 2025 pm 06:25 PM</span> <p class="Articlelist_txts_p">There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing</p> </div> <div class="phphistorical_Version2_mids"> <a href="https://www.php.cn/faq/1796788000.html" title="Using Markdown and Localization in the WordPress Block Editor" 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="Using Markdown and Localization in the WordPress Block Editor" /> </a> <a href="https://www.php.cn/faq/1796788000.html" title="Using Markdown and Localization in the WordPress Block Editor" class="phphistorical_Version2_mids_title">Using Markdown and Localization in the WordPress Block Editor</a> <span class="Articlelist_txts_time">Apr 02, 2025 am 04:27 AM</span> <p class="Articlelist_txts_p">If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?</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> <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?1745648846"></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>