CSS 实现打字效果
JS实现
最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞
<div class="element"></div>
<script src="typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0
});
});
</script>
具体用法可以看看项目地址,带注释的源码200多行,不算复杂
实现方法也不神奇,大多数人肯容易可以想到,用js逐个向容器内添加字符,作者做了很多字符的出来还有速度神马的,我们可以撸一个简单的
var s = 'Hello World! Hello World! Hello World!';
var con = $('.container');
var index = 0;
var length = s.length;
var tId = null;
function start(){
con.text('');
tId=setInterval(function(){
con.append(s.charAt(index));
if(index++ === length){
clearInterval(tId);
index = 0;
start()
}
},100);
}
start();
CSS实现
如果对细节和浏览器兼容性要求的不是很严格,我们可以通过CSS3实现
animation-timing-function
CSS3的动画都接触过,我们平时这么用
animation: animation-name animation-duration animation-iteration-count
animation: name 5s infinite;
其实完整版的animation参数很多,也可以写成分别的属性
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
今天我们就要关注一下animation-timing-function
,大多数动画在时间轴上时线性变化的,jQuery动画的时候我们用的liner
参数就是这意思,但CSS3提供了一些其它的变化方式由animation-timing-function
属性指定
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- steps
- cubic-bezier
每种动画效果都可以对应一种贝塞尔曲线 cubic-bezier可以帮我直观的看一下贝塞尔曲线效果,这里不多说了
steps
我们看一下steps
的效果,其实顾名思义就可以想到steps什么意思,就像俄罗斯方块的小格子往下掉也是动画,但是不是连续的,更像是逐帧的,steps就是实现这种效果的
steps的语法
steps(number_of_steps, [start|end])
number_of_steps
动画分为多少步执行direction
动画显示状态,end:默认值,第一帧开始前显示,start:第一帧结束后显示
看个科学的图片帮助理解
![image](http://lsly1989.qiniudn.com/屏幕快照 2014-11-10 17.38.25.png)
走两步
有了这些我们就能做个好玩儿的效果了
.walk {
width: 125px;
height: 150px;
background: url(http://lsly1989.qiniudn.com/xxxasddbgfbwalk.jpg) left;
-webkit-animation:anima 1s steps(16) infinite ;
}
@-webkit-keyframes anima{
from { background-position:2000px 0;}
to {background-position:0px 0;}
}
打字效果
打字效果也就可想而知了,改变容器宽度即可(只能单行使用,还得做到每步增加长度和字母宽度一致,还是js好其实)
.typing{
width:250px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end) infinite;
animation: type 3s steps(50, end) infinite;
}
@-webkit-keyframes type{
from { width: 0;}
}
@keyframes type{
from { width: 0;}
}
参考
**MDN: **timing-function
Understanding CSS Timing Functions
CSS 实现打字效果的更多相关文章
- 纯css实现打字效果
概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...
- js+css模仿打字效果
1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- CSS实现打字效果
.print{ width:250px; white-space:nowrap; overflow:hidden; -webkit-animation: dy 3s steps(60, end) in ...
- html + css 实现无需 js 的打字效果
以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- Javascript实现打字效果
伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...
- canvas打字效果
运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...
- JS让网页上文字出现键盘打字的打字效果
一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...
- javascript实现键盘自动打字效果
最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...
随机推荐
- ASP.NET Aries 入门开发教程1:框架下载与运行
背景: 鉴于框架的使用者越来越多,文档太少,不少用户反映框架的入门门槛太高. 好吧,再辛苦下,抽时间写教程吧! 步骤1:下载框架源码 开源地址:https://github.com/cyq1162/A ...
- 【Win 10 应用开发】应用预启动
所谓预启动,其实你一看那名字就知道是啥意思了,这是直接译,也找不到比这个叫法更简练的词了.在系统资源允许的情况下(比如电池电量充足,有足够的内存空间),系统会把用户常用的应用程序在后台启动,但不会显示 ...
- HTML文档声明
前面的话 HTML文档通常以类型声明开始,该声明将帮助浏览器确定其尝试解析和显示的HTML文档类型.本文将详细介绍文档声明DOCTYPE 特点 文档声明必须是HTML文档的第一行.且顶格显示, ...
- CRL快速开发框架系列教程十一(大数据分库分表解决方案)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- C# 生成验证码图片时消除锯齿
引言 基于生成图片实现了一个手机号转图片的需求. 内容也很简单,直接用手机号生成一个png图片.就是为了背景透明以便其他地方调用. 有无锯齿主要依靠一句代码:g.TextRenderingHint= ...
- Java 经典入门(一)
一.什么是 Java 技术?为何需要 Java? Java 是由 Sun Microsystems 在 1995 年首先发布的编程语言和计算平台.有许多应用程序和 Web 站点只有在安装 Java 后 ...
- SymmetricDS 快速和灵活的数据库复制
开始谈谈开源的SymmetricDS,谈谈实际使用中,遇到的一些问题和解决办法.持续更新: SymmetricDS 快速和灵活的数据库复制 实际使用 和 埋过的坑 (一)知识篇 SymmetricDS ...
- 枚举:enum
枚举 所谓枚举就是指定好取值范围,所有内容只能从指定范围取得. 例如,想定义一个color类,他只能有RED,GREEN,BLUE三种植. 使用简单类完成颜色固定取值问题. 1,就是说,一个类只能完成 ...
- 【AutoMapper官方文档】DTO与Domin Model相互转换(下)
写在前面 AutoMapper目录: [AutoMapper官方文档]DTO与Domin Model相互转换(上) [AutoMapper官方文档]DTO与Domin Model相互转换(中) [Au ...
- ReactNative入门 —— 动画篇(下)
在上篇动画入门文章中我们了解了在 React Native 中简单的动画的实现方式,本篇将作为上篇的延续,介绍如何使用 Animated 实现一些比较复杂的动画. 动画组合 在 Animated 中提 ...