display: inline-block;<\/code> :<\/p>\n.container {\n display: inline-block;\n}<\/pre>\nCreate display text animation<\/p>\n
Typewriter animation will create a verbatim effect for text within the typed-out<\/code> element to be displayed. We will use @keyframes<\/code> CSS animation rules: <\/p>\n\n \n Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>
<h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <div id="377j5v51b" class=\"container\">\n <div id="377j5v51b" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>\n<p>As you can see, all this animation does is change the width of the element from 0% to 100%. <\/p>\n<p>Now, we include this animation in our <code>typed-out<\/code> class and set its animation orientation to <code>forwards<\/code> to ensure that the text element does not return to <code>width: 0<\/code> after the animation is over: <\/p>\n<pre class='brush:php;toolbar:false;'>.typed-out {\n overflow: hidden;\n border-right: .15em solid orange;\n font-size: 1.6rem;\n width: 0;\n}<\/pre>\n<p>Our text elements will be displayed from left to right in a smooth manner: <\/p>\n<p>Add steps to achieve typewriter effect<\/p>\n<p> So far, our text has been displayed, but it is a smooth way to not display the text verbatim. This is a start, but obviously it doesn't look like the typewriter effect. <\/p>\n<p> In order for this animation to display our text elements verbatim or step by step (just like a typewriter), we need to split the typing animation contained in the <code>typed-out<\/code> class into steps so that it looks like it is typing out. This is where the CSS <code>steps()<\/code> function comes into play: <\/p>\n<pre class='brush:php;toolbar:false;'>.container {\n display: inline-block;\n}<\/pre>\n<p> As you can see, we use the CSS <code>steps()<\/code> function to divide the typing animation into 20 steps. <\/p>\n<p>Adjust the steps for longer typing<\/p>\n<p>To adjust longer text, you need to increase the steps and duration of the typing animation. <\/p>\n<p>Adjust the steps for shorter typing <\/p>\n<p>To adjust shorter text, you need to reduce the steps and duration of typing animations. <\/p>\n<p>Create and set flashing cursor animation<\/p>\n<p> Apparently, the original mechanical typewriters did not have a flashing cursor, but adding it in to mimic the flashing cursor effect of more modern computer\/word processors has become tradition. The flashing cursor animation helps make the imprinted text stand out from the static text elements. <\/p>\n<p>To add a flashing cursor animation to our typewriter animation, we will first create a flashing animation: <\/p>\n<pre class='brush:php;toolbar:false;'>@keyframes typing {\n from { width: 0 }\n to { width: 100% }\n}<\/pre>\n<p> In our webpage, this animation will change the border color of the <code>typed-out<\/code> element border (used as the cursor for typewriter effects) from transparent to orange. <\/p>\n<p>We include this animation in the rules of the <code>typed-out<\/code> class and set its animation direction property to <code>infinite<\/code> to make the cursor disappear and reappear indefinitely every 0.8 seconds: <\/p>\n<pre class='brush:php;toolbar:false;'>.typed-out{\n overflow: hidden;\n border-right: .15em solid orange;\n white-space: nowrap;\n font-size: 1.6rem;\n width: 0;\n animation: typing 1s forwards;\n}<\/pre>\n<p>Code to adjust the flashing typing effect<\/p>\n<p>We can make the cursor thinner or thicker by adjusting its <code>border-right: .15em solid orange;<\/code> attribute, or you can make the cursor color differently, give it <code>border-radius<\/code>, adjust its flicker frequency, etc. <\/p>\n<p>Elements of Combining Typewriter Text Animation<\/p>\n<p> Now that you know how to make a typewriter effect in CSS, it's time to demonstrate some practical and relevant use cases for this typewriter effect. <\/p>\n<p>Conclusion<\/p>\n<p>In this article, we understand how easy it is to create animated \"typewriter\" text using CSS. This typing effect can definitely add fun and fun to your page. <\/p><p> However, it may be worth a gentle warning at the end. This technique is best used for a small amount of non-critical text, just to add a little extra fun. But be careful not to over-rely rely on it, as there are some limitations to using CSS animations like this. Make sure to test your typewriter text on various devices and viewport sizes, as the results may vary by platform. Also consider end users who rely on assistive technology, ideally, some usability tests can be performed to ensure you don't cause inconvenience to users. Because you can do something with pure CSS doesn't necessarily mean you should. If typewriter effects are important to you and you want to use it for more critical content, maybe at least consider a JavaScript solution, too. <\/p>\n<p>Anyway, I hope you enjoyed this post and it gets you to think about what other cool things you can do with CSS animations to add fun and fun to your page. <\/p>\n<p>Frequently Asked Questions about Creating CSS Typewriter Effects<\/p>\n<p> Finally, let's answer some of the most common questions about how to create typewriter effects in CSS. <\/p>\n<ul>\n<li><strong>What is the typewriter effect? <\/strong><\/li>\n<\/ul>\n<p>\"Typewriter Effect\" is an animation technique that makes a string of text appear word by word on the screen as if it is being typed in real time by the typewriter. This effect is usually created with JavaScript, but it can also be implemented using CSS only, as shown in this article. <\/p>\n<ul>\n<li><strong>What is typewriter animation? <\/strong><\/li>\n<\/ul>\n<p>The typewriter prints text one letter at a time. Typewriter animation is an animation that imitates typewriter typing, presenting text with one letter at a time. It is a popular animation effect on many web pages. <\/p>\n<ul>\n<li><strong>How to make animated text typing in CSS? <\/strong><\/li>\n<\/ul>\n<p>Modern CSS provides a variety of tools for creating animations, including <code>animation<\/code>, <code>@keyframes<\/code>, <code>steps()<\/code>. These tools are used to gradually display text that is first hidden through the <code>overflow<\/code> attribute. <\/p>\n<ul>\n<li><strong>How to use CSS to create customizable typewriter animations? <\/strong><\/li>\n<\/ul>\n<p>Creating customizable typewriter animations with CSS involves using keyframes and CSS properties to control how text looks and behaves when typing on the screen. You can make it customizable by exposing some animation parameters as CSS variables (custom properties) so that you can easily change them in your stylesheet. For example: <q>\n<\/q>\n<\/p>In this CSS code, we define custom properties (<pre class='brush:php;toolbar:false;'><!doctype html>\n<html>\n <head>\n <title>Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>\n <div id="377j5v51b" class=\"container\">\n <div id="377j5v51b" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre> and <p>) to make the animation customizable. You can change the default values ??by modifying these properties. <code>--typewriter-text<\/code>\n<code>--typewriter-duration<\/code>\n<\/p><ul>How to stop the cursor after the last letter of the <li> element is fully printed? <strong><code>typed-out<\/code>\n<\/strong>\n<\/li>To stop the cursor of the last letter of the <\/ul> element in the CSS typewriter animation, you can use the CSS animation and the <p> attribute: <code>typed-out<\/code><pre class='brush:php;toolbar:false;'><!doctype html>\n<html>\n <head>\n <title>Typewriter effect<\/title>\n <style>\n body{\n background: navajowhite;\n background-size: cover;\n font-family: 'Trebuchet MS', sans-serif; \n }\n <\/style>\n <\/head>\n <body>\n <div id="377j5v51b" class=\"container\">\n <div id="377j5v51b" class=\"typed-out\">Web Developer<\/div>\n <\/div>\n <\/body>\n<\/html><\/pre>\n<p>In the above CSS, the typewriter animation gradually increases the width of the elements in the container, effectively typing out text. The <code>.typewriter<\/code> property is set to <code>animation-fill-mode<\/code> to ensure that the animation remains final (completely played out) after completion. With this setting, the cursor will flash at the <code>forwards<\/code> element after it is fully printed. <code>typed-out<\/code>\n<\/p>\n<ul>\n<li>What are some website examples that effectively use typewriter effects? <strong><\/strong>\n<\/li>\n<\/ul>Typewriter animations are often used on sites such as portfolio sites, especially on designers and developers’ websites, which are used to highlight key skills and add creative sense to the page, thereby attracting the reader’s attention. Typewriter effects are sometimes used in blog websites and login pages as well as product demonstrations. <p><\/p>\n<\/div><\/code><\/p>"} </script>
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<script>var V_PATH="/";window.onerror=function(){ return true; };</script>
</head>
<body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2">
<link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css">
<header>
<div id="377j5v51b" class="head">
<div id="377j5v51b" class="haed_left">
<div id="377j5v51b" class="haed_logo">
<a href="http://www.miracleart.cn/" title="" class="haed_logo_a">
<img src="/static/imghw/logo.png" alt="" class="haed_logoimg">
</a>
</div>
<div id="377j5v51b" class="head_nav">
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Community" class="head_nava head_nava-template1">Community</a>
<div class="377j5v51b" id="dropdown-template1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/article.html" title="Articles" class="languagechoosea on">Articles</a>
<a href="http://www.miracleart.cn/faq/zt" title="Topics" class="languagechoosea">Topics</a>
<a href="http://www.miracleart.cn/wenda.html" title="Q&A" class="languagechoosea">Q&A</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Learn" class="head_nava head_nava-template1_1">Learn</a>
<div class="377j5v51b" id="dropdown-template1_1" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/course.html" title="Course" class="languagechoosea on">Course</a>
<a href="http://www.miracleart.cn/dic/" title="Programming Dictionary" class="languagechoosea">Programming Dictionary</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Tools Library" class="head_nava head_nava-template1_2">Tools Library</a>
<div class="377j5v51b" id="dropdown-template1_2" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/toolset/development-tools" title="Development tools" class="languagechoosea on">Development tools</a>
<a href="http://www.miracleart.cn/toolset/website-source-code" title="Website Source Code" class="languagechoosea">Website Source Code</a>
<a href="http://www.miracleart.cn/toolset/php-libraries" title="PHP Libraries" class="languagechoosea">PHP Libraries</a>
<a href="http://www.miracleart.cn/toolset/js-special-effects" title="JS special effects" class="languagechoosea on">JS special effects</a>
<a href="http://www.miracleart.cn/toolset/website-materials" title="Website Materials" class="languagechoosea on">Website Materials</a>
<a href="http://www.miracleart.cn/toolset/extension-plug-ins" title="Extension plug-ins" class="languagechoosea on">Extension plug-ins</a>
</div>
</div>
</div>
<div id="377j5v51b" class="head_navs">
<a href="http://www.miracleart.cn/ai" title="AI Tools" class="head_nava head_nava-template1_3">AI Tools</a>
</div>
<div id="377j5v51b" class="head_navs">
<a href="javascript:;" title="Leisure" class="head_nava head_nava-template1_3">Leisure</a>
<div class="377j5v51b" id="dropdown-template1_3" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="http://www.miracleart.cn/game" title="Game Download" class="languagechoosea on">Game Download</a>
<a href="http://www.miracleart.cn/mobile-game-tutorial/" title="Game Tutorials" class="languagechoosea">Game Tutorials</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="head_search">
<input id="key_words" onkeydown="if (event.keyCode == 13) searchs('en')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value="">
<a href="javascript:;" title="search" onclick="searchs('en')"><img src="/static/imghw/find.png" alt="search"></a>
</div>
<div id="377j5v51b" class="head_right">
<div id="377j5v51b" class="haed_language">
<a href="javascript:;" class="layui-btn haed_language_btn">English<i class="layui-icon layui-icon-triangle-d"></i></a>
<div class="377j5v51b" id="dropdown-template" style="display: none;">
<div id="377j5v51b" class="languagechoose">
<a href="javascript:setlang('zh-cn');" title="簡體中文" class="languagechoosea">簡體中文</a>
<a href="javascript:;" title="English" class="languagechoosea">English</a>
<a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a>
<a href="javascript:setlang('ja');" title="日本語" class="languagechoosea">日本語</a>
<a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a>
<a href="javascript:setlang('ms');" title="Melayu" class="languagechoosea">Melayu</a>
<a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a>
<a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a>
</div>
</div>
</div>
<span id="377j5v51b" class="head_right_line"></span>
<div style="display: block;" id="login" class="haed_login ">
<a href="javascript:;" title="Login" class="haed_logina ">Login</a>
</div>
<div style="display: block;" id="reg" class="head_signup login">
<a href="javascript:;" title="singup" class="head_signupa">singup</a>
</div>
</div>
</div>
</header>
<main>
<div id="377j5v51b" class="Article_Details_main">
<div id="377j5v51b" class="Article_Details_main1">
<div id="377j5v51b" class="Article_Details_main1M">
<div id="377j5v51b" class="phpgenera_Details_mainL1">
<a href="http://www.miracleart.cn/" title="Home"
class="phpgenera_Details_mainL1a">Home</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/web-designer.html"
class="phpgenera_Details_mainL1a">Web Front-end</a>
<img src="/static/imghw/top_right.png" alt="" />
<a href="http://www.miracleart.cn/css-tutorial.html"
class="phpgenera_Details_mainL1a">CSS Tutorial</a>
<img src="/static/imghw/top_right.png" alt="" />
<span>How to Create a CSS Typewriter Effect for Your Website</span>
</div>
<div id="377j5v51b" class="Articlelist_txts">
<div id="377j5v51b" class="Articlelist_txts_info">
<h1 class="Articlelist_txts_title">How to Create a CSS Typewriter Effect for Your Website</h1>
<div id="377j5v51b" class="Articlelist_txts_info_head">
<div id="377j5v51b" class="author_info">
<a href="http://www.miracleart.cn/member/1242473.html" class="author_avatar">
<img class="lazy" data-src="https://img.php.cn/upload/avatar/001/242/473/646b03ec7509a724.jpg" src="/static/imghw/default1.png" alt="Jack chen">
</a>
<div id="377j5v51b" class="author_detail">
<a href="http://www.miracleart.cn/member/1242473.html" class="author_name">Jack chen</a>
</div>
</div>
</div>
<span id="377j5v51b" class="Articlelist_txts_time">Feb 08, 2025 am 10:20 AM</span>
</div>
</div>
<hr />
<div id="377j5v51b" class="article_main php-article">
<div id="377j5v51b" class="article-list-left detail-content-wrap content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3461856641">
</ins>
<p>Pure CSS creates engaging typewriter text effects</p>
<p><strong>Core points: </strong></p>
<ul>
<li>CSS typewriter effect makes the website content more dynamic and attractive by gradually displaying text, and can be used for login pages, personal websites and code demonstrations. </li>
The <li>Typewriter effect can be created by using the CSS <code>steps()</code> function to change the width of the text element from 0% to 100%, and to simulate the cursor of "Putout" the text through animation. </li>
<li>The typing effect can be adjusted by increasing or decreasing the number of steps and duration of the typing animation to accommodate longer or shorter text. </li>
The <li>Typewriter effect can be used in conjunction with the flashing cursor animation to enhance the effect, and the cursor can be customized by adjusting its <code>border-right</code> properties, color, flicker frequency, etc. </li>
</ul>
<p>This article will guide you how to create dynamic, more attractive website text typewriter effects using pure CSS. </p>
<p>The typewriter effect simulation text is displayed word by word, just like typing in real time in front of you. </p>
<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898121699865.jpg" class="lazy" alt="How to Create a CSS Typewriter Effect for Your Website "></p>
<p>Adding typewriter effects in text snippets helps attract website visitors and keep them interested in continuing to read. Typewriter effects can be used for a variety of purposes, such as creating engaging login pages, call-to-action elements, personal websites, and code presentations. </p>
<p>Easy to create typewriter effects</p>
<p>Creating a typewriter effect is very simple, you only need to have the basic knowledge of CSS and CSS animations to understand this tutorial. </p>
<p>The working principle of typewriter effect is as follows: </p>
<ul>
<li>Typewriter animation will gradually change the width of the text element from 0% to 100% by using the CSS <code>steps()</code> function, thus displaying our text element. </li>
<li>The flashing animation will simulate the cursor of "Putout" the text. </li>
</ul>
<p>Create a typewriter effect webpage</p>
<p>First, let's create a web page for the typewriter demonstration. It will contain a <code><div> container for typewriter text, with class name <code>typed-out</code>:
<pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p>Style style for typewriter text container</p>
<p>Now that we have the layout of the web page, let's style for <code><div></code> with the "typed-out" class: </p>
<pre class='brush:php;toolbar:false;'>.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</pre>
<p>Please note that in order to make the typewriter effect effective, we have added the following: </p>
<ul>
<li><code>"overflow: hidden;"</code> and <code>"width: 0;"</code> make sure that the text content is not displayed until the typing effect begins. </li>
<li><code>"border-right: .15em solid orange;"</code>, create the typewriter cursor. </li>
</ul>
<p> Before making a typing effect, in order to stop the cursor after the last letter of the <code>typed-out</code> element is fully typing (like a typewriter or word processor), we will create a container for the <code>typed-out</code> element and add <code>display: inline-block;</code> :</p>
<pre class='brush:php;toolbar:false;'>.container {
display: inline-block;
}</pre>
<p>Create display text animation</p>
<p>Typewriter animation will create a verbatim effect for text within the <code>typed-out</code> element to be displayed. We will use <code>@keyframes</code> CSS animation rules: </p><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p>As you can see, all this animation does is change the width of the element from 0% to 100%. </p>
<p>Now, we include this animation in our <code>typed-out</code> class and set its animation orientation to <code>forwards</code> to ensure that the text element does not return to <code>width: 0</code> after the animation is over: </p>
<pre class='brush:php;toolbar:false;'>.typed-out {
overflow: hidden;
border-right: .15em solid orange;
font-size: 1.6rem;
width: 0;
}</pre>
<p>Our text elements will be displayed from left to right in a smooth manner: </p>
<p>Add steps to achieve typewriter effect</p>
<p> So far, our text has been displayed, but it is a smooth way to not display the text verbatim. This is a start, but obviously it doesn't look like the typewriter effect. </p>
<p> In order for this animation to display our text elements verbatim or step by step (just like a typewriter), we need to split the typing animation contained in the <code>typed-out</code> class into steps so that it looks like it is typing out. This is where the CSS <code>steps()</code> function comes into play: </p>
<pre class='brush:php;toolbar:false;'>.container {
display: inline-block;
}</pre>
<p> As you can see, we use the CSS <code>steps()</code> function to divide the typing animation into 20 steps. </p>
<p>Adjust the steps for longer typing</p>
<p>To adjust longer text, you need to increase the steps and duration of the typing animation. </p>
<p>Adjust the steps for shorter typing </p>
<p>To adjust shorter text, you need to reduce the steps and duration of typing animations. </p>
<p>Create and set flashing cursor animation</p>
<p> Apparently, the original mechanical typewriters did not have a flashing cursor, but adding it in to mimic the flashing cursor effect of more modern computer/word processors has become tradition. The flashing cursor animation helps make the imprinted text stand out from the static text elements. </p>
<p>To add a flashing cursor animation to our typewriter animation, we will first create a flashing animation: </p>
<pre class='brush:php;toolbar:false;'>@keyframes typing {
from { width: 0 }
to { width: 100% }
}</pre>
<p> In our webpage, this animation will change the border color of the <code>typed-out</code> element border (used as the cursor for typewriter effects) from transparent to orange. </p>
<p>We include this animation in the rules of the <code>typed-out</code> class and set its animation direction property to <code>infinite</code> to make the cursor disappear and reappear indefinitely every 0.8 seconds: </p>
<pre class='brush:php;toolbar:false;'>.typed-out{
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
font-size: 1.6rem;
width: 0;
animation: typing 1s forwards;
}</pre>
<p>Code to adjust the flashing typing effect</p>
<p>We can make the cursor thinner or thicker by adjusting its <code>border-right: .15em solid orange;</code> attribute, or you can make the cursor color differently, give it <code>border-radius</code>, adjust its flicker frequency, etc. </p>
<p>Elements of Combining Typewriter Text Animation</p>
<p> Now that you know how to make a typewriter effect in CSS, it's time to demonstrate some practical and relevant use cases for this typewriter effect. </p>
<p>Conclusion</p>
<p>In this article, we understand how easy it is to create animated "typewriter" text using CSS. This typing effect can definitely add fun and fun to your page. </p><p> However, it may be worth a gentle warning at the end. This technique is best used for a small amount of non-critical text, just to add a little extra fun. But be careful not to over-rely rely on it, as there are some limitations to using CSS animations like this. Make sure to test your typewriter text on various devices and viewport sizes, as the results may vary by platform. Also consider end users who rely on assistive technology, ideally, some usability tests can be performed to ensure you don't cause inconvenience to users. Because you can do something with pure CSS doesn't necessarily mean you should. If typewriter effects are important to you and you want to use it for more critical content, maybe at least consider a JavaScript solution, too. </p>
<p>Anyway, I hope you enjoyed this post and it gets you to think about what other cool things you can do with CSS animations to add fun and fun to your page. </p>
<p>Frequently Asked Questions about Creating CSS Typewriter Effects</p>
<p> Finally, let's answer some of the most common questions about how to create typewriter effects in CSS. </p>
<ul>
<li><strong>What is the typewriter effect? </strong></li>
</ul>
<p>"Typewriter Effect" is an animation technique that makes a string of text appear word by word on the screen as if it is being typed in real time by the typewriter. This effect is usually created with JavaScript, but it can also be implemented using CSS only, as shown in this article. </p>
<ul>
<li><strong>What is typewriter animation? </strong></li>
</ul>
<p>The typewriter prints text one letter at a time. Typewriter animation is an animation that imitates typewriter typing, presenting text with one letter at a time. It is a popular animation effect on many web pages. </p>
<ul>
<li><strong>How to make animated text typing in CSS? </strong></li>
</ul>
<p>Modern CSS provides a variety of tools for creating animations, including <code>animation</code>, <code>@keyframes</code>, <code>steps()</code>. These tools are used to gradually display text that is first hidden through the <code>overflow</code> attribute. </p>
<ul>
<li><strong>How to use CSS to create customizable typewriter animations? </strong></li>
</ul>
<p>Creating customizable typewriter animations with CSS involves using keyframes and CSS properties to control how text looks and behaves when typing on the screen. You can make it customizable by exposing some animation parameters as CSS variables (custom properties) so that you can easily change them in your stylesheet. For example: <q>
</q>
</p>In this CSS code, we define custom properties (<pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre> and <p>) to make the animation customizable. You can change the default values ??by modifying these properties. <code>--typewriter-text</code>
<code>--typewriter-duration</code>
</p><ul>How to stop the cursor after the last letter of the <li> element is fully printed? <strong><code>typed-out</code>
</strong>
</li>To stop the cursor of the last letter of the </ul> element in the CSS typewriter animation, you can use the CSS animation and the <p> attribute: <code>typed-out</code><pre class='brush:php;toolbar:false;'><!doctype html>
<html>
<head>
<title>Typewriter effect</title>
<style>
body{
background: navajowhite;
background-size: cover;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="typed-out">Web Developer</div>
</div>
</body>
</html></pre>
<p>In the above CSS, the typewriter animation gradually increases the width of the elements in the container, effectively typing out text. The <code>.typewriter</code> property is set to <code>animation-fill-mode</code> to ensure that the animation remains final (completely played out) after completion. With this setting, the cursor will flash at the <code>forwards</code> element after it is fully printed. <code>typed-out</code>
</p>
<ul>
<li>What are some website examples that effectively use typewriter effects? <strong></strong>
</li>
</ul>Typewriter animations are often used on sites such as portfolio sites, especially on designers and developers’ websites, which are used to highlight key skills and add creative sense to the page, thereby attracting the reader’s attention. Typewriter effects are sometimes used in blog websites and login pages as well as product demonstrations. <p></p>
</div></code></p><p>The above is the detailed content of How to Create a CSS Typewriter Effect for Your Website. For more information, please follow other related articles on the PHP Chinese website!</p>
</div>
</div>
<div id="377j5v51b" class="wzconShengming_sp">
<div id="377j5v51b" 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>
<div id="377j5v51b" class="AI_ToolDetails_main4sR">
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="3653428331"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<!-- <div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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 id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div> -->
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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 id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.cn/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title">
<h3>Clothoff.io</h3>
</a>
<p>AI clothes remover</p>
</div>
</div>
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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 id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821119.html" title="Guide: Stellar Blade Save File Location/Save File Lost/Not Saving" class="phpgenera_Details_mainR4_bottom_title">Guide: Stellar Blade Save File Location/Save File Lost/Not Saving</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>4 weeks ago</span>
<span>By DDD</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796827210.html" title="Oguri Cap Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>2 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796828723.html" title="Agnes Tachyon Build Guide | A Pretty Derby Musume" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | A Pretty Derby Musume</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>1 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821436.html" title="Dune: Awakening - Advanced Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Advanced Planetologist Quest Walkthrough</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/1796821278.html" title="Date Everything: Dirk And Harper Relationship Guide" class="phpgenera_Details_mainR4_bottom_title">Date Everything: Dirk And Harper Relationship Guide</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<span>3 weeks ago</span>
<span>By Jack chen</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/article.html">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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 id="377j5v51b" class="phpgenera_Details_mainR3_bottom">
<div id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_top">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpmain_tab2_mids_info">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/ai">Show More</a>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4">
<div id="377j5v51b" class="phpmain1_4R_readrank">
<div id="377j5v51b" 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 id="377j5v51b" class="phpgenera_Details_mainR4_bottom">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.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 id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>8636</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>17</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/java-tutorial" title="Java Tutorial" class="phpgenera_Details_mainR4_bottom_title">Java Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1783</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>16</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/cakephp-tutor" title="CakePHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">CakePHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1725</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>56</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/laravel-tutori" title="Laravel Tutorial" class="phpgenera_Details_mainR4_bottom_title">Laravel Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1577</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>28</span>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms">
<a href="http://www.miracleart.cn/faq/php-tutorial" title="PHP Tutorial" class="phpgenera_Details_mainR4_bottom_title">PHP Tutorial</a>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info">
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/eyess.png" alt="" />
<span>1440</span>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos">
<img src="/static/imghw/tiezi.png" alt="" />
<span>31</span>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainR3_more">
<a href="http://www.miracleart.cn/faq/zt">Show More</a>
</div>
</div>
</div>
</div>
</div>
<div id="377j5v51b" class="Article_Details_main2">
<div id="377j5v51b" class="phpgenera_Details_mainL4">
<div id="377j5v51b" class="phpmain1_2_top">
<a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img
src="/static/imghw/index2_title2.png" alt="" /></a>
</div>
<div id="377j5v51b" class="phpgenera_Details_mainL4_info">
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175069693197174.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is 'render-blocking CSS'?" />
</a>
<a href="http://www.miracleart.cn/faq/1796823628.html" title="What is 'render-blocking CSS'?" class="phphistorical_Version2_mids_title">What is 'render-blocking CSS'?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 24, 2025 am 12:42 AM</span>
<p class="Articlelist_txts_p">CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035152168797.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="External vs. Internal CSS: What's the Best Approach?" />
</a>
<a href="http://www.miracleart.cn/faq/1796822133.html" title="External vs. Internal CSS: What's the Best Approach?" class="phphistorical_Version2_mids_title">External vs. Internal CSS: What's the Best Approach?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:45 AM</span>
<p class="Articlelist_txts_p">ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026415047262.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Does my CSS must be on lower case?" />
</a>
<a href="http://www.miracleart.cn/faq/1796821588.html" title="Does my CSS must be on lower case?" class="phphistorical_Version2_mids_title">Does my CSS must be on lower case?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:29 AM</span>
<p class="Articlelist_txts_p">No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175034936181156.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS Case Sensitivity: Understanding What Matters" />
</a>
<a href="http://www.miracleart.cn/faq/1796821998.html" title="CSS Case Sensitivity: Understanding What Matters" class="phphistorical_Version2_mids_title">CSS Case Sensitivity: Understanding What Matters</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:09 AM</span>
<p class="Articlelist_txts_p">CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139012130913.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What is Autoprefixer and how does it work?" />
</a>
<a href="http://www.miracleart.cn/faq/1796828180.html" title="What is Autoprefixer and how does it work?" class="phphistorical_Version2_mids_title">What is Autoprefixer and how does it work?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:15 AM</span>
<p class="Articlelist_txts_p">Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026444127039.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="What are CSS counters?" />
</a>
<a href="http://www.miracleart.cn/faq/1796821606.html" title="What are CSS counters?" class="phphistorical_Version2_mids_title">What are CSS counters?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:34 AM</span>
<p class="Articlelist_txts_p">CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026403168895.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="CSS: When Does Case Matter (and When Doesn't)?" />
</a>
<a href="http://www.miracleart.cn/faq/1796821580.html" title="CSS: When Does Case Matter (and When Doesn't)?" class="phphistorical_Version2_mids_title">CSS: When Does Case Matter (and When Doesn't)?</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:27 AM</span>
<p class="Articlelist_txts_p">In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.</p>
</div>
<div id="377j5v51b" class="phphistorical_Version2_mids">
<a href="http://www.miracleart.cn/faq/1796821622.html" title="Case Sensitivity in CSS: Selectors, Properties, and Values Explained" class="phphistorical_Version2_mids_img">
<img onerror="this.onerror=''; this.src='/static/imghw/default1.png'"
src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026469053848.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Case Sensitivity in CSS: Selectors, Properties, and Values Explained" />
</a>
<a href="http://www.miracleart.cn/faq/1796821622.html" title="Case Sensitivity in CSS: Selectors, Properties, and Values Explained" class="phphistorical_Version2_mids_title">Case Sensitivity in CSS: Selectors, Properties, and Values Explained</a>
<span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:38 AM</span>
<p class="Articlelist_txts_p">CSSselectorsandpropertynamesarecase-insensitive,whilevaluescanbecase-sensitivedependingoncontext.1)Selectorslike'div'and'DIV'areequivalent.2)Propertiessuchas'background-color'and'BACKGROUND-COLOR'aretreatedthesame.3)Valueslikecolornamesarecase-insens</p>
</div>
</div>
<a href="http://www.miracleart.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 id="377j5v51b" class="footer">
<div id="377j5v51b" class="footertop">
<img src="/static/imghw/logo.png" alt="">
<p>Public welfare online PHP training，Help PHP learners grow quickly！</p>
</div>
<div id="377j5v51b" class="footermid">
<a href="http://www.miracleart.cn/about/us.html">About us</a>
<a href="http://www.miracleart.cn/about/disclaimer.html">Disclaimer</a>
<a href="http://www.miracleart.cn/update/article_0_1.html">Sitemap</a>
</div>
<div id="377j5v51b" class="footerbottom">
<p>
? php.cn All rights reserved
</p>
</div>
</div>
</footer>
<input type="hidden" id="verifycode" value="/captcha.html">
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' />
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="vmlhv" class="pl_css_ganrao" style="display: none;"><kbd id="vmlhv"></kbd><label id="vmlhv"></label><em id="vmlhv"><sup id="vmlhv"></sup></em><legend id="vmlhv"></legend><nav id="vmlhv"></nav><acronym id="vmlhv"></acronym><center id="vmlhv"><rp id="vmlhv"><nav id="vmlhv"><menu id="vmlhv"></menu></nav></rp></center><sup id="vmlhv"><option id="vmlhv"><output id="vmlhv"><nav id="vmlhv"></nav></output></option></sup><span id="vmlhv"><del id="vmlhv"></del></span><label id="vmlhv"></label><pre id="vmlhv"><strike id="vmlhv"><tfoot id="vmlhv"></tfoot></strike></pre><xmp id="vmlhv"><rp id="vmlhv"><video id="vmlhv"></video></rp></xmp><em id="vmlhv"></em><th id="vmlhv"></th><listing id="vmlhv"><rt id="vmlhv"><ol id="vmlhv"><xmp id="vmlhv"></xmp></ol></rt></listing><ruby id="vmlhv"><optgroup id="vmlhv"><s id="vmlhv"></s></optgroup></ruby><xmp id="vmlhv"><rp id="vmlhv"><kbd id="vmlhv"></kbd></rp></xmp><ol id="vmlhv"><form id="vmlhv"><ul id="vmlhv"><kbd id="vmlhv"></kbd></ul></form></ol><dl id="vmlhv"><cite id="vmlhv"></cite></dl><menuitem id="vmlhv"></menuitem><font id="vmlhv"><dfn id="vmlhv"></dfn></font><video id="vmlhv"></video><dfn id="vmlhv"><sup id="vmlhv"></sup></dfn><strike id="vmlhv"><pre id="vmlhv"></pre></strike><xmp id="vmlhv"></xmp><menuitem id="vmlhv"><abbr id="vmlhv"><table id="vmlhv"><p id="vmlhv"></p></table></abbr></menuitem><sup id="vmlhv"></sup><thead id="vmlhv"></thead><legend id="vmlhv"><dfn id="vmlhv"><sup id="vmlhv"><form id="vmlhv"></form></sup></dfn></legend><abbr id="vmlhv"></abbr><acronym id="vmlhv"></acronym><form id="vmlhv"><em id="vmlhv"><var id="vmlhv"></var></em></form><blockquote id="vmlhv"></blockquote><dfn id="vmlhv"></dfn><i id="vmlhv"></i><span id="vmlhv"></span><center id="vmlhv"></center><center id="vmlhv"><optgroup id="vmlhv"><fieldset id="vmlhv"><dl id="vmlhv"></dl></fieldset></optgroup></center><nav id="vmlhv"></nav><optgroup id="vmlhv"></optgroup><track id="vmlhv"><s id="vmlhv"><strong id="vmlhv"><dd id="vmlhv"></dd></strong></s></track><thead id="vmlhv"><font id="vmlhv"><tbody id="vmlhv"><ol id="vmlhv"></ol></tbody></font></thead><track id="vmlhv"><input id="vmlhv"><progress id="vmlhv"><meter id="vmlhv"></meter></progress></input></track><small id="vmlhv"><strong id="vmlhv"></strong></small><code id="vmlhv"></code><em id="vmlhv"></em><small id="vmlhv"></small><progress id="vmlhv"><output id="vmlhv"></output></progress><b id="vmlhv"><optgroup id="vmlhv"><pre id="vmlhv"></pre></optgroup></b><font id="vmlhv"><li id="vmlhv"><u id="vmlhv"><strong id="vmlhv"></strong></u></li></font><xmp id="vmlhv"></xmp><dfn id="vmlhv"><small id="vmlhv"><dfn id="vmlhv"><label id="vmlhv"></label></dfn></small></dfn><b id="vmlhv"><small id="vmlhv"></small></b><button id="vmlhv"></button><thead id="vmlhv"></thead><xmp id="vmlhv"><blockquote id="vmlhv"></blockquote></xmp><form id="vmlhv"></form><abbr id="vmlhv"></abbr><strike id="vmlhv"></strike><button id="vmlhv"><style id="vmlhv"></style></button><listing id="vmlhv"></listing><tbody id="vmlhv"><u id="vmlhv"><style id="vmlhv"><tbody id="vmlhv"></tbody></style></u></tbody><tr id="vmlhv"><dfn id="vmlhv"><button id="vmlhv"></button></dfn></tr><nav id="vmlhv"></nav><meter id="vmlhv"><option id="vmlhv"></option></meter><thead id="vmlhv"></thead><code id="vmlhv"></code><pre id="vmlhv"></pre><del id="vmlhv"></del><track id="vmlhv"><th id="vmlhv"><object id="vmlhv"><meter id="vmlhv"></meter></object></th></track><dl id="vmlhv"><blockquote id="vmlhv"></blockquote></dl><i id="vmlhv"></i><thead id="vmlhv"></thead><form id="vmlhv"><cite id="vmlhv"></cite></form><i id="vmlhv"></i><dl id="vmlhv"></dl><acronym id="vmlhv"><pre id="vmlhv"><ul id="vmlhv"><listing id="vmlhv"></listing></ul></pre></acronym><u id="vmlhv"></u><tbody id="vmlhv"><tr id="vmlhv"></tr></tbody><ruby id="vmlhv"><optgroup id="vmlhv"><legend id="vmlhv"></legend></optgroup></ruby><sup id="vmlhv"></sup><dd id="vmlhv"><pre id="vmlhv"><ul id="vmlhv"><listing id="vmlhv"></listing></ul></pre></dd><form id="vmlhv"><em id="vmlhv"><var id="vmlhv"><form id="vmlhv"></form></var></em></form><option id="vmlhv"></option><rt id="vmlhv"><dd id="vmlhv"><ruby id="vmlhv"></ruby></dd></rt><dfn id="vmlhv"><mark id="vmlhv"><table id="vmlhv"><track id="vmlhv"></track></table></mark></dfn><option id="vmlhv"></option><sup id="vmlhv"></sup><form id="vmlhv"></form><dl id="vmlhv"><acronym id="vmlhv"><sub id="vmlhv"></sub></acronym></dl><rt id="vmlhv"><label id="vmlhv"><menuitem id="vmlhv"></menuitem></label></rt><center id="vmlhv"></center><video id="vmlhv"></video><b id="vmlhv"></b><small id="vmlhv"></small><output id="vmlhv"><th id="vmlhv"><nobr id="vmlhv"><source id="vmlhv"></source></nobr></th></output><cite id="vmlhv"><tfoot id="vmlhv"><thead id="vmlhv"><small id="vmlhv"></small></thead></tfoot></cite><legend id="vmlhv"></legend><pre id="vmlhv"><pre id="vmlhv"></pre></pre><dfn id="vmlhv"><tt id="vmlhv"><option id="vmlhv"></option></tt></dfn></div>
</html>