<template>
  <h1>Pure CSS Typing animation.</h1>
</template>
<script>
export default {
}
</script>
<style lang="scss">
body {
    background: black;
    color: #fff;
}
h1 {
    font: bold 200% Consolas, Monaco, monospace;
    border-right: 0.1em solid;
    width: 16.5em;
    width: 26ch;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(26, end),
        cursor-blink 0.3s step-end infinite alternate;
}
@keyframes typing {
    from {
        width: 0;
    }
}
@keyframes cursor-blink {
    50% {
        border-color: transparent;
    }
}
</style>
转自: https://csscoco.com/inspiration/#/./border/border-typing.md

css 实现输入效果的更多相关文章

  1. 推荐20款基于 jQuery & CSS 的文本效果插件

    jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...

  2. css三级菜单效果

    一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  3. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  4. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  5. Css实现透明效果,兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. HTML与CSS简单页面效果实例

    本篇博客实现一个HTML与CSS简单页面效果实例 index.html <!DOCTYPE html> <html> <head> <meta charset ...

  7. css 实现评分效果

    css实现评分效果,其实是css sprites (css精灵)的延伸应用,效果的实现主要是由  background-position 属性移动图片位置.之前看到有前辈写过关于这方面的内容,在理解上 ...

  8. jQuery实现逐字输入效果

    之前做了个测试小游戏(姑且叫游戏吧)为了增加神秘性,就想给她加个逐字输入效果:刚好在网上找到一个挺好用的,于是就发扬拿来主义:按照自己的喜好做了一丢丢的修改(勉强算是吧\( ̄︶ ̄)> ). 代码 ...

  9. 纯 CSS 实现波浪效果!

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

随机推荐

  1. 『现学现忘』Docker基础 — 29、Docker容器数据卷的应用

    目录 1.验证容器和宿主机之间数据共享 2.容器停止退出后,主机修改后数据是否同步 3.带只读权限的挂载数据卷 1.验证容器和宿主机之间数据共享 通过上面的操作,接下来我们演示一下通过数据卷的挂载,实 ...

  2. python练习册 每天一个小程序 第0005题

    1 # -*-coding:utf-8-*- 2 __author__ = 'Deen' 3 ''' 4 题目说明: 你有一个目录,装了很多照片,把它们的尺寸变成都不大于 iPhone5 分辨率的大小 ...

  3. Acwing 社交距离 分类讨论+贪心

    一种新型疾病,COWVID-19,开始在全世界的奶牛之间传播. Farmer John 正在采取尽可能多的预防措施来防止他的牛群被感染. Farmer John 的牛棚是一个狭长的建筑物,有一排共 N ...

  4. 数字IC笔试题-芯源

    前言 由于最近开始找数字IC的工作,所以准备多练笔试题,下面贴上芯源笔试题,来源微信公众号<数字IC打工人> 参考资源: 1. mu_guang_ 2.  李锐博恩 3. 长弓的坚持 4. ...

  5. Nacos配置中心集群原理及源码分析

    Nacos作为配置中心,必然需要保证服务节点的高可用性,那么Nacos是如何实现集群的呢? 下面这个图,表示Nacos集群的部署图. Nacos集群工作原理 Nacos作为配置中心的集群结构中,是一种 ...

  6. Redis数据库的初步认识(二)-C/C++连接redis数据库

    1用C语言连接数据库,首先要安装c语言的数据库 在目录/redis- 4.0.1/deps下面执行sudo make/make install命令 在执行完之后可能执行ldconfig命令来更新连接符 ...

  7. 什么是 FutureTask?使用 ExecutorService 启动任务?

    在 Java 并发程序中 FutureTask 表示一个可以取消的异步运算.它有启动和取消 运算.查询运算是否完成和取回运算结果等方法.只有当运算完成的时候结果才 能取回,如果运算尚未完成 get 方 ...

  8. 转:C++初始化成员列表

    转载至:https://blog.csdn.net/zlintokyo/article/details/6524185 C++初始化成员列表和新机制初始化表达式列表有几种用法: 1.如果类存在继承关系 ...

  9. 什么是微服务架构中的 DRY?

    DRY 代表不要重复自己.它基本上促进了重用代码的概念.这导致开发和共享库, 这反过来导致紧密耦合.

  10. 学习Keepalived(三)

    1.1Keepalived高可用软件 Keepalived起初是专为LVS设计的,专门用来监控LVS集群系统中各个服务节点的状态,后来又加入了VRRP的功能,因此除了配合LVS服务外,也可以作为其他服 ...