我想創建一個影片文字，它是寫出來的，并使用html和css逐字消除。 我對html和css很了解，所以我還沒有嘗試過任何東西。 如果有人能幫助我，我將不勝感激。
uj5u.com熱心網友回復：
我在codepen中發現了一個很酷的參考資料，作者是pmallol，它可以實作你所要的東西。你可以玩玩它，并獲得keyframes的基本知識，以便也制作你自己的自定義影片。
。span class="hljs-selector-tag">body {
background: hsl(217.6,100%,80%) 。
font-family: monospace;
padding-top: 5em;
display: flex;
flex-flow: wrap column;
justify-content: center;
align-items: center;
}
.typewriter {
background-color: #fff;
min-width: 500px;
padding: 1em 2em 1em 1.5em。
border: solid 1px #e6e6e6;
border-radius: 2.8em;
box-shadow: 2px 2px 3px 0 rgba（0, 0, 0, 0. 25）。)
margin: 2em;
display: flex;
align-items: center;
}
.typewriter svg {
padding-right: 2em;
}
.typewriter P {
color: #000;
字體大小: 1.5em;
font-weight: 500;
width: 0;
max-width: max-content;
overflow: hidden;
border-right: .05em solid #464545; /* The typwriter cursor */
white-space: nowrap; /* 保持內容在單行上 */.
margin: 0; /* 在打字時產生滾動效果 */
}
.tying-erase {
animation:
4s typing-erase 4s steps(50, end) 無限。
blink-caret .5s step-end 無限。
}
/* 型別和擦除效果 */。
@keyframes打字-擦除 {
0% { width: 0 }
80% { width: 100% }
90%, 100% { width: 0 }
}
/* 打字機游標的效果 */ *
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: gray }
}<!
只用CSS的打字和擦除效果。
分支自https://codepen.io/geoffgraham/pen/jrWwWM
-->
<h1>鍵入和擦除 - CSS影片</h1>
<div class="typewriter">
<!--通過https://www.flaticon.com/authors/good-ware -->搜索圖示。
<svg id="search-icon"/span> xmlns="http://www.w3. org/2000/svg" height="16px" version="1。 1" viewBox="-1 0 136 136" width="16px">
<g id="surface1">
<path d="M 93.148438 80.832031 C 109.5 57。 742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 1.351562 76.691406 21.742188 93. 039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133。 269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 z m 51.308594 84. 332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33。 011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51. 308594 84. 332031" style=" stroke:none;fill-rule:nonzero;fill:#464545;fill-opacity: 1;" /></g></svg>
<p class="tying-erase"/span>> 如何對文本進行影片處理</p>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319388.html
標籤：