css打字机

古城微笑少年丶 2022-03-14 16:36 246阅读 0赞

开发工具与关键技术：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">——      X</b></p></div>
                         <div id="box" class="jdt">
                            <p>正在从<b style="color: #0066cc;"> 系统文件
                            </b> 中修复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就可以了；

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

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI1MQ_size_16_color_FFFFFF_t_70]: /images/20220312/24eed867802b40c9b2cace4039ffcdf4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，246人围观）

还没有评论，来说两句吧...

相关阅读

相关纯 CSS 实现打字机效果

纯 CSS 实现打字机效果先看效果预备知识在学习这个需要了解两个新的 CSS 知识ch 单位ch 是一个相对长度单位, 表示数字 0 的宽度.steps 函数这时 CSS...

ゞ浴缸里的玫瑰/ 2024年05月24日 04:08/ 0 赞/ 100 阅读

相关模拟打字机，文字逐个出现

效果图： ![20200520212259931.png][] 上代码： <!DOCTYPE html> <html> <hea

迈不过友情╰/ 2023年10月06日 09:11/ 0 赞/ 19 阅读

相关 js模拟打字机，文字逐个出现效果

效果展示： ![7324fd4f27034bafa1ac02d399985e2f.gif][] js方法： / @param {Object} div

阳光穿透心脏的1/2处/ 2023年09月26日 21:44/ 0 赞/ 125 阅读

相关 java 打字机效果,如何调试电子伪造反应打字机的渲染过程？

我使用电子伪造来生成一个基于react-typescript模板的应用程序 . 我为该应用程序编写了一些vscode调试配置 . 但我只能调试Main进程，Renderer丢失

向右看齐/ 2022年11月18日 04:33/ 0 赞/ 212 阅读

相关 4行python代码做出打字机效果

4行python代码做出打字机效果 -------------------- 文章目录 4行python代码做出打字机效果前言一、导入库

曾经终败给现在/ 2022年11月05日 05:28/ 0 赞/ 610 阅读

相关 u3d打字机效果

using UnityEngine; using System.Collections; using UnityEngine.UI; publi

清疚/ 2022年06月13日 11:42/ 0 赞/ 280 阅读

相关 css打字机

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年3月2日今天做一个好玩的打字机，代码是比较简单的，但我设置的样式比较多；先构建好框架，一层div穿套着一

古城微笑少年丶/ 2022年03月14日 16:36/ 0 赞/ 247 阅读

相关 Css3放大+打字机

开发工具与关键技术：DW 作者：不孝子撰写时间：2019年3月12日技术有限，作业没完成，只能重发了，方法没没变只是样式上改了一下，不妨来看下，或许用的上，看一下

曾经终败给现在/ 2022年03月09日 11:36/ 0 赞/ 343 阅读

相关洛谷P2414 阿狸的打字机

题意：以trie的形式给出n个字符串，每次询问第x个字符串在第y个字符串中出现了几次。解：总串长是n2级别的，所以不能用什么后缀自动机... \[update\]可以建t

清疚/ 2022年01月09日 04:03/ 0 赞/ 221 阅读

相关 P1383 高级打字机

原题链接 [ https://www.luogu.org/problemnew/show/P1383][https_www.luogu.org_problemnew_show_

我不是女神ヾ/ 2021年12月05日 04:55/ 0 赞/ 258 阅读