微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

怎么实现文字自动过渡效果_html/css_WEB-ITnose

php中文网
发布： 2016-06-24 12:26:51
原创
2771人浏览过

本帖最后由 u013546284 于 2014-01-25 15:06:38 编辑

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上面那个W3C网站的过渡效果得鼠标移动到上面上去才会改变 我想实现跟下面网站开头那个文字过渡效果 得怎么搞?
http://www.cheapmortgages.com/

回复讨论(解决方案)

<pre class="brush:php;toolbar:false;" id="test">
登录后复制

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 
<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
已测 

<pre class="brush:php;toolbar:false;" id="test">
登录后复制

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 
<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
已测
我晚上看看 我有事 走开下 

<pre class="brush:php;toolbar:false;" id="test">
登录后复制

There were 51,193 Mortgage Approvals in September totalling £7.25 Billion 
<script> var index = 0; var word = document.getElementById("show").innerHTML; function type() { document.getElementById("test").innerText = word.substring(0, index++); } setInterval(type,200);</script>
已测
我要的过渡是一点点像素的显示 你这不是一个个的在打印字符么...

给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同

给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点


给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点

至于自动播放可以将JS代码放在div代码下面，里边直接写window.requestAnimationFrame(改变宽度的function)就可以了

另外如果不想使用JS则可以使用CSS3的animation来实现，不过对低版本的浏览器兼容性不好 

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style>#wrap {	height:35px;	width:700px;	padding:0px;	position:relative;	overflow:hidden;}#mask {	height:35px;	width:700px;	position:absolute;	background-color:#fff;	top:0px;	left:0px;}.move {	-webkit-animation: mm 15s;}@-webkit-keyframes mm /* Safari 和 Chrome */{from {left: 0px;}to {left: 700px;}}</style></head><body>	<div id='wrap'>		<div id='mask' class='move'></div>		<div id='text'><p>我要的过渡是一点点像素的显示 你这不是一个个的在打印字符么</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/970">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680015863684.png" alt="火龙果写作">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/970">火龙果写作</a>
                            <p>用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="火龙果写作">
                                <span>106</span>
                            </div>
                        </div>
                        <a href="/ai/970" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="火龙果写作">
                        </a>
                    </div>
                </div>	</div><script></script></body></html>
登录后复制



给个提示，这是一个div，css样式overflow为hidden
通过JS改变其宽度来达到效果，为了流畅可使用window.requestAnimationFrame(改变宽度的function)来使刷新率和屏幕相同
刚刚看了下网站源码，这个网站用的方法是在上面覆盖一个背景为白色的div然后使其移动来达到效果，实现起来稍微更复杂一点点

至于自动播放可以将JS代码放在div代码下面，里边直接写window.requestAnimationFrame(改变宽度的function)就可以了

另外如果不想使用JS则可以使用CSS3的animation来实现，不过对低版本的浏览器兼容性不好
非常感谢!!!!

大家都在看：

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：ul嵌套，li加背景图片后出现重叠，请教如何解决_html/css_WEB-ITnose 下一篇：div+css 常用两栏/三种自动适应宽度分栏 兼容ie6789 火狐 谷歌等浏览器_html/css_WEB-ITnose
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
Mac RemNote用CSS高亮HTML结构层次笔记 通过启用RemNote的CustomCSS功能，可为嵌套笔记添加层级高亮样式：进入设置→Appearance→开启EnableCustomCSS→编辑并粘贴CSS代码，利用不同背景色与边框颜色区分HTML结构层级（如蓝色表顶层、黄色表主干、红色表容器、灰色表深层嵌套），结合标签命名与emoji图标提升可读性，实现可视化HTML结构笔记。
2025-11-16 23:57:05
134
如何解决HTML背景图片定位的处理方法 使用background-position、background-size和简写属性可精准控制HTML背景图位置与缩放，推荐center/cover/no-repeat组合以实现居中、自适应且不重复的响应式效果。
2025-11-16 23:56:02
616
免费HTML在线编辑器入口 HTML编辑器在线网页版平台 免费HTML在线编辑器入口在JSFiddle（https://www.jsfiddle.net），该平台支持实时预览、语法高亮、多语言协同开发，无需注册即可使用，适合代码调试与分享。
2025-11-16 23:52:02
198
Windows记事本保存HTML时编码该选UTF-8还是ANSI？ 应选择UTF-8编码保存HTML文件。UTF-8支持多语言字符，确保跨平台一致性；在记事本中点击“文件”→“另存为”→选择“UTF-8”编码→命名并保存为“.html”格式；仅当文件全为ASCII字符且环境限制时才考虑ANSI。
2025-11-16 23:50:02
828
html收藏链接怎么打_html收藏链接如何打实用技巧 答案：通过JavaScript结合浏览器特有API实现收藏功能，兼容主流浏览器并引导用户手动操作。示例代码使用onclick调用addBookmark函数，判断window.sidebar、window.external等接口实现Firefox和IE的自动收藏，其他浏览器提示Ctrl+D；适配现代浏览器时建议优化提示方式，移动端可引导添加到主屏幕，纯前端方案则仅通过文字引导用户手动收藏，提升兼容性与体验。
2025-11-16 23:48:02
818
html audio如何播放_HTML audio标签音频播放与控制方法 HTML中audio标签可嵌入音频并控制播放，通过src指定文件路径，controls显示控件，autoplay实现自动播放（受限于浏览器策略），muted允许静音自动播放，loop实现循环播放；为确保兼容性，可用多个source标签提供MP3、OGG、WAV等格式；通过JavaScript调用play()、pause()等方法控制播放状态，并监听ended、timeupdate等事件提升交互体验，注意避免滥用自动播放以优化用户体验。
2025-11-16 23:47:02
816
html如何切换div_HTML div元素显示隐藏（display/toggle）切换方法 实现div显示隐藏的核心是通过JavaScript操作CSS样式，推荐使用classList.toggle()切换CSS类（如.hidden）来分离关注点，既简洁又易维护；也可直接修改style.display属性或使用jQuery的toggle()方法。除display外，visibility:hidden和opacity:0可保留布局空间，适合不同场景；动画效果可通过transition结合opacity、max-height等可动画属性实现，配合aria-hidden等属性确保可访问性。
2025-11-16 23:41:02
769
Mac终端sed批量换CSS名，HTML瞬间焕然一新！ 使用sed命令可批量修改HTML和CSS类名，先通过find定位文件，用sed替换内容，建议先备份并用grep预览匹配，确保准确无误。
2025-11-16 23:35:20
688
如何解决在线HTML编辑时跨设备同步问题的处理方法 选择支持实时同步的在线平台如CodePen、Replit等，登录同一账号实现云端存储与版本管理，结合Git工具和云盘备份，统一编辑器配置与资源路径，确保跨设备编辑时代码一致、不丢失。
2025-11-16 23:35:02
134
html自定义滚动条代码怎么写_html自定义滚动条代码编写指南 自定义HTML滚动条可通过CSS的::-webkit-scrollbar伪元素实现，适用于Webkit内核浏览器；首先设置整体滚动条宽高，再定义轨道、滑块样式及悬停效果，可针对特定容器应用；为提升兼容性，Firefox可使用scrollbar-width和scrollbar-color属性适配，IE不支持；建议滚动条宽度8px~15px，颜色与页面协调，并注意移动端通常保留系统默认样式。
2025-11-16 23:33:11
932
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部