css : 簡單做出「 輸入文字」動態效果 - 昕力官網

我們只需要用到css animation 屬性就可以達到這個效果，讓我們跟著步驟繼續看下去吧！ Step 1. 先把html 的架構寫出來

  Step2. 將 .typing-txt-block 背景圖的圖片以及高度設定好 .typing-txt-block{ height:70vh; display:block; background-image:url("../images/bg-banner-01.jpg"); background-size:cover; background-repeat:no-repeat; } 接下來設定控制背景圖片 .bg-animation 的動態效果 .typing-txt-block.bg-animation{ -webkit-animation:bg-animation20sease-in-outinfinite; animation:bg-animation20sease-in-outinfinite; }  bg-animation的動畫設定：   --背景圖片上下位移 @keyframesbg-animation{ 0%{ background-position:top; } 50%{ background-position:bottom; } 100%{ background-position:top; } }   Step3. 利用position的觀念，將文字區塊垂直置中在圖片正中央 .typing-txt-block.containerh1{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); transform:translate(-50%,-50%); text-transform:uppercase; margin:0; padding:0; letter-spacing:5px; color:transparent; } 再利用偽元素 ::before ，將要呈現的文字顯示以及輸入文字動態效果的css樣式寫入 .typing-txt-block.containerh1::before{ content:attr(data-text); position:absolute; top:0px; left:0px; width:100%; height:100%; color:#fff; overflow:hidden; border-right:1pxsolid#ffffff; animation:type3ssteps(18),blink0.5sinfinitealternate; -webkit-animation:type3ssteps(18),blink0.5sinfinitealternate; white-space:nowrap; } type的動畫設定： --在3秒內將文字寬度以18格從0%~100%顯示，只播放一次。

@keyframestype{ 0%{ width:0%; } 100%{ width:100%; } } blink的動畫設定： --每0.5s顯示輸入的閃爍線，並無限播放閃爍線顏色(從透明變為白色) @keyframesblink{ from{ border-color:transparent; } to{ border-color:#ffffff; } }   這樣就完成了有質感的動態效果啦！！     參考來源 https://codepen.io/uiswarup/pen/JBMGbb https://codepen.io/oleg-kucherenko/pen/BXYLKL 1 點數申請 文章標題 : css:簡單做出「輸入文字」動態效果 申請項目 : 檔案上傳 請選擇審查人員 暫存 確認 王曉涵 相關文章 我把CSS變成Photoshop了！我跟mix-blend-mode剛認識 CSS霓虹燈閃爍文字 CSS：文字漸層與鏤空遮罩效果 CSS&SVG::BlobAnimation CSS切版-不規則邊框 用csstransform做出簡單的翻牌效果 最新文章 [讀懂]深入淺出Beanutils的不足與自定義 AngularCustomModal-共用元件實作-彈窗(3) AngularCustomModal-共用元件實作-彈窗(2) AngularCustomModal-共用元件實作-彈窗(1) AOS-Animate套件運用 Activiti事件監聽入門 最熱門文章 同作者文章 確定 取消 × 登入