打字机文本效果

Thriller Movie Typewriter Text Effect

CSS3, JavaScript

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}
@keyframes blink {
    from, to {
        color: transparent;
    }
    50% {
        color: black;
    }
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
#container {
    min-height: 90vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
#teletype {
    font-family: monospace;
    font-size: 2rem;
    display: block;
    width: 33rem;
}
#teletype span {
    -webkit-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}
form {
    background: #333;
    padding: 1rem;
    text-align: center;
    font-size: 1.2rem;
    -webkit-transition: 1s;
    transition: 1s;
}
#typer {
    padding: .4rem;
    font-size: inherit;
    width: 36rem;
}
input[type="submit"] {
    font-size: inherit;
    display: inline-block;
    padding: .3rem;
}
.hideaway {
    -webkit-transform: translateY(5vw);
    transform: translateY(5vw);
}

HTML

Thriller Movie Typewriter Text Effect

CSS3, JavaScript

编辑器支持Emmet

快捷键

Thriller Movie Typewriter Text Effect

CSS3, JavaScript

文本按打字机逐字显示的动效

CSS3 很酷的霓虹灯发光效果文字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：