css3 animation 动画应用2 —— 打字效果 分类: css3 css动画 动画 animation 2014-11-04 16:00 411人阅读 评论(0) 收藏
2014-11-04 16:00
555 查看
来源:http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/
上面的这篇文章中介绍了很多css3的动画效果,这里节选其中的打字效果
<p class="text"></p>
中的字数必须和css中steps()中的值一致,
动画cursor是鼠标一闪一闪的效果
动画typing是字一个一个出现的效果
上面的这篇文章中介绍了很多css3的动画效果,这里节选其中的打字效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Font Step Show</title> <style type="text/css"> @-webkit-keyframes typing { from { width: 0; } } @keyframes typing { from { width: 0; } } @-webkit-keyframes cursor { 50% { border-color: transparent; } } @keyframes cursor { 50% { border-color: transparent; } } .text { width: 0; border-right: .1em solid; overflow: hidden; font: 5em monospace; margin-top: 50px; -webkit-animation: cursor 1s step-end infinite; animation: cursor 1s step-end infinite; } #go:target .text { width: 6.6em; width: 11ch; /* Number of characters */ -webkit-animation: typing 8s steps(11),cursor 1s step-end infinite; animation: typing 8s steps(11),cursor 1s step-end infinite; } a { padding: 5px 10px; background: blue; color: #fff; border-radius: 8px; text-decoration: none; font: .9em Arial; margin-top: 10px; display: inline-block; } a:hover { opacity: 0.6; } </style> </head> <body> <div id="go"> <a href="#go">Start</a> <a href="#reset">Reset</a> <p class="text">smashingmag</p> </div> </body> </html>
<p class="text"></p>
中的字数必须和css中steps()中的值一致,
动画cursor是鼠标一闪一闪的效果
动画typing是字一个一个出现的效果
相关文章推荐
- css3 animation 动画应用 分类: css css3 css动画 动画 animation 2014-08-12 13:21 209人阅读 评论(0) 收藏
- 利用 css3 的图形3d翻转效果应用demo 分类: css3 2014-01-27 16:44 462人阅读 评论(0) 收藏
- css3 animation 动画应用2 —— 打字效果
- css3 模拟 mac 的 菜单图标列表(兼容ie,但ie8及以下效果有差异) 分类: css3 button 按钮 面板 2014-02-12 14:21 741人阅读 评论(0) 收藏
- css3书签风格按钮列表(兼容ie,ff,chrome,safari和opera) 分类: css3 浏览器兼容 button 按钮 2014-02-12 10:30 338人阅读 评论(0) 收藏
- eclipse碰到的问题 分类: ubuntu学习 软件插件学习 2013-05-07 18:29 411人阅读 评论(0) 收藏
- css3 线性渐变和径向渐变样式 分类: css3 button 按钮 渐变样式 2014-02-12 15:19 340人阅读 评论(0) 收藏
- V4L2驱动的移植与应用(三) 分类: arm-linux-Ubuntu 2013-08-16 08:41 473人阅读 评论(0) 收藏
- css3可折叠式/手风琴式面板(ie8及以下不兼容) 分类: css3 button 按钮 面板 2014-02-12 11:14 312人阅读 评论(0) 收藏
- C# 中的委托和事件 分类: .NET 接口+泛型+委托+继承 2011-08-30 10:09 20人阅读 评论(0) 收藏 举报 引言 委托 和 事件在 .Net Framework中的应用非
- Android开发:标准体重计算器应用的… 分类: Android开发 2014-05-30 10:53 81人阅读 评论(0) 收藏
- FFmpeg-音频和视频应用程序的瑞士军刀 分类: ffmpeg-SDL-VLC-Live555 2013-07-22 16:30 411人阅读 评论(0) 收藏
- Python模块功能在实际应用方案中的相关功能的介绍 分类: database 2014-01-29 16:37 261人阅读 评论(0) 收藏
- css 照片模糊效果(毛玻璃效果) 分类: css css3 svg filter 图像模糊效果 照片模糊效果 毛玻璃效果 2014-04-08 10:14 1265人阅读 评论(0) 收藏
- 让web程序也能自动安装 分类: WEB项目应用 2009-12-01 17:02 488人阅读 评论(0) 收藏
- MySQL问题解决:-bash:mysql:command not found 分类: ubuntu 问题总结 python基础学习 software database 2014-01-22 16:00 3088人阅读 评论(1) 收藏
- DAVINCI DM6446 开发攻略——V4L2视频驱动和应用分析 分类: DSP 2013-07-22 16:30 423人阅读 评论(0) 收藏
- Android 应用中十大常见 UX 错误 分类: H1_ANDROID 2013-09-21 13:59 404人阅读 评论(0) 收藏
- MyEclipse修改页面模板(JSP和HTML等) 分类: WEB项目应用 2010-01-31 00:03 698人阅读 评论(1) 收藏
- VxWorks中的中断应用设计要点 分类: vxWorks 2014-04-29 17:25 494人阅读 评论(0) 收藏