.print{
width:250px;
white-space:nowrap;
overflow:hidden;
-webkit-animation: dy 3s steps(60, end) infinite;
animation: dy 3s steps(60, end) infinite;
}

@-webkit-keyframes dy{
     from { width: 0;}
  }

@keyframes dy{
      from { width: 0;}
  }

HTML

<p class="print">
欢迎来到我的地盘
</p>

CSS实现打字效果的更多相关文章

  1. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  2. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  3. js+css模仿打字效果

    1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  4. html + css 实现无需 js 的打字效果

    以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...

  5. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

  6. Javascript实现打字效果

    伤感的 学期末 今天是这学期的最后一天,考完了最后一门数学,明天我们就要各自为自己的暑假打算打算了,所以趁着大家还没走一起出去打了打篮球,玩了玩轮滑,很累但是很开心,最大的感触莫过于忧伤额,明年我或许 ...

  7. canvas打字效果

    运用fillText,写的打字效果. 唯一麻烦的地方是,换行问题, 我是把字符串转化为数组,数组一个单位完成,就换行,继续下一个单位. <!doctype html> <html&g ...

  8. JS让网页上文字出现键盘打字的打字效果

    一个挺简单的网页特效:JS让网页上文字出现键盘打字的打字效果实现 演示地址:http://codepen.io/guihailiuli/pen/jPOYMZ 以代码形式实现过程分析: <html ...

  9. javascript实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...

随机推荐

  1. Appium+Robotframework实现Android应用的自动化测试-5:RIDE中AppiumLibrary的配置

    可能很多朋友已经迫不及待的想要用RobotFramework+AppiumLibrary来写Android App的测试脚本了,那我们也废话少说,直接开始. 首先打开RIDE,这是编写RobotFra ...

  2. ios 修正waring:Method override for the designated initializer of the superclass '-init' not found

    swift引入后,为了使oc和swift更相近,对oc的初始化方法也进行了修正,具体说明,见下面的链接,这个waring的最简单的修正方法是,到相应类的头文件中,去掉在自定义初始化方法后面的 NS_D ...

  3. VS2010工程文件减肥

    由于VS2010中新增加了sdf和ipch文件等浏览数据库来支持智能浏览感知编辑.显示类视图等,使得随便一个小工程就上百兆,很占用空间也不方便工程项目的打包备份.为了不使用数据库以减小VS2010中的 ...

  4. ACM/ICPC 之 拓扑排序+DFS(POJ1128(ZOJ1083)-POJ1270)

    两道经典的同类型拓扑排序+DFS问题,第二题较第一题简单,其中的难点在于字典序输出+建立单向无环图,另外理解题意是最难的难点,没有之一... POJ1128(ZOJ1083)-Frame Stacki ...

  5. progressBar走马灯设置

    初始值Visible = false; 让progressBar1出现时: progressBar1.Visible = true; progressBar1.Style = ProgressBarS ...

  6. HDU 4940 Destroy Transportation system(无源汇有上下界最大流)

    看不懂题解以及别人说的集合最多只有一个点..... 然后试了下题解的方法http://blog.sina.com.cn/s/blog_6bddecdc0102uzka.html 首先是无源汇有上下界最 ...

  7. linux 解压缩

    tar f 使用档案名字,这个参数是最后一个参数,后面只能接档案名 c 建立压缩档案 x 解压 t 查看内容 r 向压缩归档文件末尾追加文件 u 更新原压缩包中的文件 z 有gzip属性的 j 有bz ...

  8. 【leetcode】Best Time to Buy and Sell 2(too easy)

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  9. 51nod 1117 聪明的木匠 (哈夫曼树)

    题目:传送门. 题意:中文题. 题解:就是构造一颗哈夫曼树,数据结构里的知识. #include <iostream> #include <cstdio> #include & ...

  10. [Android Pro] Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    方法一.在Activity的onCreate中添加如下代码 getWindow().setFormat(PixelFormat.TRANSLUCENT); reference to :  http:/ ...