首页
赞助致谢
每日早报
友情链接
更多页面
缘缘留言
网站统计
关于本站
Search
1
HYBBS大牛窝模板带插件,亲测可用
2,716 阅读
2
源支付V7,破解版分享
1,958 阅读
3
花粥修改版彩虹授权系统全解修复源码
1,455 阅读
4
2022最新版独角兽发卡网2.0.5版
1,380 阅读
5
DiscuzX3.4西瓜社区模板手机版
1,162 阅读
网站源码
VPS评测
网站模板
Typecho
emlog
Zblog
WordPress
DiscuzX
技术展示
Typechos
emlogs
HTML
实用软件
手机软件
电脑软件
下载器
官方公告
壹号DNS
综合资源
游戏教程
笔记灵感
登录
/
注册
Search
标签搜索
Typecho
typecho主题
wordpress
wordpress模板
授权系统
防诈骗小知识
防网络诈骗
服务器
API
QQ
html
句子
支付
支付源码
智简魔方
商城
商城源码
DiscuzX3.4
DZ论坛
QQ教程
奉天
累计撰写
236
篇文章
累计收到
639
条评论
今日撰写
0
篇文章
首页
文章分类
网站源码
VPS评测
网站模板
Typecho
emlog
Zblog
WordPress
DiscuzX
技术展示
Typechos
emlogs
HTML
实用软件
手机软件
电脑软件
下载器
官方公告
壹号DNS
综合资源
游戏教程
笔记灵感
特色页面
赞助致谢
每日早报
友情链接
缘缘留言
网站统计
关于本站
用户登录
登录
注册
搜索到
1
篇与
HTML,技术展示
的结果
html + css 实现无需 js 的打字效果
以前要达到类似在电脑上打字的效果,需要 js+html 。今天我将介绍一种新方法。本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下。提供所有代码,可以直接使用。样品原理分析可以将动画看做三个不同的层次:最底层的文字中间挡住文字的背景最上层的光标字是静止的,而中间的背景和最上层的光标是动态的。初始时,背景挡住所有的文字,光标在最左边。动画进行时,背景和光标以相同的步伐从左往右移动。动画结束时,背景不再遮挡文字,光标则在最右边闪烁。这种实现唯一的好处是不需要 js,但缺点是只能用于一行文本,多行文本理论上可以实现,但是比较麻烦。通过CSS代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing effect without js</title> <style> :root { /* number of characters */ --steps: 345; /* animation time */ --duration: 2.5s; --fontSize: 50px; --cursorSize: 20px; } .text { color: #333;; position: relative; display: inline-block; font-family: 'Courier New', Courier, monospace; font-size: var(--fontSize); line-height: 1; } .text::after { content: ''; width: var(--cursorSize); height: var(--fontSize); background-color: black; z-index: 2; position: absolute; animation: blink 1s var(--duration) step-end infinite, moveCursor var(--duration) steps(var(--steps)) forwards; } .text::before { content: ''; width: 100%; height: var(--fontSize); z-index: 1; position: absolute; background: linear-gradient(#fff, #fff) no-repeat top right; animation: showText var(--duration) steps(var(--steps)) forwards; } /* Cursor blink animation */ @keyframes blink { 0% { background-color: black; } 50% { background-color: transparent; } 100% { background-color: black; } } /* Cursor movement animation */ @keyframes moveCursor { 0% { left: 0%; } 100% { left: 100%; } } /* background moving animation */ @keyframes showText { 0% { background-size: 100% 100%; } 100% { background-size: 0% 100%; } } </style> </head> <body> <div class="text">hello,world!</div> </body> </htm>javascript 实现打字效果 1<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typing effect with js</title> </head> <body> <div style="font-size: 36px;" id="text">hello,world!</div> <script> var str = 'In the past, to achieve an effect similar to typing on a computer,js+html was required. Today I will introduce a new method.'; var i = 0; function typing(){ var divTyping = document.getElementById('text'); if (i <= str.length) { divTyping.innerHTML = str.slice(0, i++) + '_'; setTimeout('typing()', 200); } else{ divTyping.innerHTML = str; } } typing(); </script> </body> </html>javascript 实现打字效果 2<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Typing effect with js</title> <style> .divcss5{word-wrap:break-word;font-size: 36px;} </style> </head> <body> <div class="divcss5" id="aa"> In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly </div> <div style="display:none" id="w"> In the past, to achieve an effect similar to typing on a computer, js+html was required. Today I will introduce a new method.This article mainly introduces pure html+css to achieve typing effect, which has certain reference value, you can learn about it. Provide all the code, you can use it directly. </div> <script language="javascript"> var index=0; var word=document.getElementById("w").innerHTML; function type(){ document.getElementById("aa").innerText = word.substring(0,index++); } setInterval(type, 200); </script> </body> </html>
2022年10月02日
105 阅读
0 评论
2 点赞