当前位置：
首页 >
css打字机
发布时间：2024/3/26
58
豆豆
开发工具与关键技术：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就可以了；
注意：要选择与其他标签不一样的，制作打字机。
效果图：
总结
- 上一篇： 【草履虫10天学会C++网络编程】 UD
- 下一篇： 《刺客信条：起源》画面BUG？我先“退”