使用CSS3构建的简单的命令行输入（打字）动画

CSS3 console typing

css3, type

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1407
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Inconsolata);
@-webkit-keyframes typing {
    from {
        width: 0;
    }
}
@-webkit-keyframes blink-caret {
    50% {
        border-color: transparent;
    }
}
body {
    font-family: 'Inconsolata', courier;
    margin: 0;
    padding: 0;
    color: #fff;
    background: #111;
}
h1 {
    margin: 10px 100px;
    overflow: hidden;
}
.static {
    float: left;
    margin: 1ch 0;
    padding: 0;
}
.yellow {
    color: #FFC107;
}
.writing-code {
    float: left;
    border-right: .1em solid #FFC107;
    width: 4ch;
    margin: 1ch;
    padding: 0 1ch;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 1s steps(4, end), blink-caret .5s step-end infinite alternate;
}
.writing-technology {
    float: left;
    border-right: .1em solid #FFC107;
    width: 10ch;
    margin: 1ch;
    padding: 0 1ch;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 2s steps(10, end) 1s, blink-caret .5s step-end infinite alternate;
}
.writing-something {
    float: left;
    border-right: .1em solid #FFC107;
    width: 10ch;
    margin: 1ch;
    padding: 0 1ch;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 1s steps(4, end) 3s, blink-caret .5s step-end infinite alternate;
}

HTML

CSS3 console typing

css3, type

编辑器支持Emmet

快捷键

CSS3 console typing

css3, type

使用CSS3构建的云端数据传输模拟三维动画

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：