2017-04-12 32 views
0

当我的下划线闪烁动画时可以键入吗?它看起来像this动画之后的类型

我希望能够访问该页面时键入。没有别的,但我不知道这是否可能。我为此使用动画或JavaScript吗?你能帮助我吗?

@import url('https://fonts.googleapis.com/css?family=Open+Sans'); 
 
* { 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 

 
span { 
 
    left: 0; 
 
    line-height: 200px; 
 
    margin-top: -100px; 
 
    top: 50%; 
 
    width: 100%; 
 
} 
 

 
.blinking-cursor { 
 
    font-weight: 100; 
 
    font-size: 100px; 
 
    color: #2E3D48; 
 
    animation: 1s blink step-end infinite; 
 
} 
 

 
@keyframes "blink" { 
 
    from, 
 
    to { 
 
    color: transparent; 
 
    } 
 
    50% { 
 
    color: black; 
 
    } 
 
} 
 

 
@-webkit-keyframes "blink" { 
 
    from, 
 
    to { 
 
    color: transparent; 
 
    } 
 
    50% { 
 
    color: black; 
 
    } 
 
}
<span>Hi there </span><span class="blinking-cursor">_</span>

+1

当然这是可能的。您可以随时键入。即使你的电脑关闭了。你的问题目前不完整。请描述当访问者输入时你想在页面中发生什么。 –

回答

0

添加contenteditable="true"到div在HTML,你准备好去。