開發工具與關鍵技術：DW
作者：文澤欽
撰寫時間：2019年3月2日

今天做一個好玩的打字機，代碼是比較簡單的，但我設置的樣式比較多；先構建好框架，一層div穿套著一層div，防止布局出現混亂：

<div class="back"><divclass="box"><img src="images/5.PNG" alt=""> <div class="small"><div class="tsk"><p>已完成10%<b class="ri" style="margin-right: 20px">——&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;X</b></p></div><div id="box" class="jdt"><p>正在從<b style="color: #0066cc;">&nbsp;系統文件</b>&nbsp;中修復1,145個項目</p><h6>已完成10%</h6><div class="jds"></div> </div><br><br><p style="margin-left: 10px;font-size: 12px;">名稱：System recovery</p><p style="margin-left: 10px;font-size: 12px;">剩余時間：正在計算...</p><p style="margin-left: 10px;font-size: 12px;">剩余項目：正在計算...</p><hr style="margin-top: 10px; background: #e3e3e3"><h5 style="margin:10px 0px 0px 10px;">請耐心等待...</h5><button class="ri" style="margin:-20px 15px 0px 0px;" onClick="btnClick()">提示</button> </div> </div><div class="hp"><p style="line-height: 23px;font-style: italic;">hp</p></div></div><script type="text/javascript">/*js引入*/function btnClick(){alert("系統受損：由于您在2018年2月14日，非法操作本系統，導致主系統嚴重文件受損，系統崩潰已達381天無法正常工作！系統正在嘗試修復中...");}</script>

本不應寫完布局，再寫樣式的，應該寫一個布局寫一個樣式的，寫法我就不一一寫了，看以下樣式：

<style type="text/css">/*樣式引入*/*{margin: 0 auto;padding:0;}.ri{float: right;/*右浮動*/}.back{padding-top:15px;/*上外邊框*/width: 940px;height:623px;background:#000000;border-radius:10px;}.box{width:920px;height:613px;background:url(images/1.jpg)no-repeat;/*背景圖片*/background-size:920px;}.small{ display:block;width:380px;height:205px;background:#ffffff;position:relative;/*相對定位*/top:120px;left:0px;}.tsk{width:380px;height:25px;background:#0d0303 url(images/8.png) no-repeat;}.tsk p{color:#ffffff;font-size:12px;line-height:25px;padding-left:25px;}.box img{width:920px;height:23px;position:relative;top:565px;left:0px;}.hp{position:relative;/*相對定位*/top:-18px;left:0px;width: 24px;height:24px;color:#000000;background:#f7f8fa;border-radius:12px;/*圓角*/}.jds{width:2px;height:20px;margin-top:10px;background:#06b025;transition:width 1s ease;float:left; }#box:hover.jds{width:35px;}.jdt{padding-top:10px;width:350px;height:auto;margin-left:10px;}.jdt p{font-size:10px;}/*Css打字機的主要代碼*/@keyframes typing {/*打字typing*/from{ width:0; } }@keyframes blink-caret {50%{ border-color:transparent; /*透明的transparent*/} }h5{transition-delay: 0.1s;font: bold 100% Consolas, Monaco, monospace;/*字體粗體 字體大小*/border-right:.1em solid;width:7.5em; /* fallback */margin:2em 1em;white-space:nowrap;overflow:hidden;animation:typing 5s steps(36, end), blink-caret .5s step-end infinite alternate;/*無限的*/}</style>

選擇需要顯示打字的標簽，再標簽上寫上text就可以了；

注意：要選擇與其他標簽不一樣的，制作打字機。

效果圖：

總結

以上是生活随笔為你收集整理的css打字机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。