css打字机

开发工具与关键技术：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就可以了；

注意：要选择与其他标签不一样的，制作打字机。

效果图：