如何在每个字符后添加闪烁的“_”？

https://codepen.io/-dhaval-/pen/yMJKgE 如何在每个字符后添加闪烁的“_”？

以上是我在哪里尝试此链接...

下面

是代码：

function typeAp(target, toType, stepTime){ 
 
    var n = 0; 
 
    var chars = Array.from(toType); 
 
    setInterval(function(){ 
 
    $(target).append(chars[n]); 
 
     n++; 
 
    
 
    },stepTime); 
 
}; 
 

 
typeAp('.init',"initializing",100);

body{ 
 
    background-color:#ccc; 
 
} 
 
.container{ 
 
    display:flex; 
 
    width:100%; 
 
    height:100vh; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
.cmd{ 
 
    background-color:#111; 
 
    border-radius:5px; 
 
    padding:20px; 
 
    
 
    width:600px; 
 
    height:200px; 
 
} 
 
p{ 
 
    letter-spacing:2px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    font-family:courier; 
 
    color:lime; 
 
} 
 
::selection{ 
 
    background:#111; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container"> 
 
    <div class="cmd"> 
 
     <p class="init">$Robot~ </p> 
 
     <p class="perc"> </p> 
 
    </div> 
 
    </div> 
 
</body>

我要添加闪烁的 “_”在每个字符后面，使其看起来像文本是键入，它感觉像命令行。

建议任何错误或额外的事情，我可以添加到此代码，如果你喜欢。

来源

2017-03-07 dhaval nagar

在这里你去：https://codepen.io/anon/pen/QpGyYo（文本添加到'span'内'p'，后面跟着一个包含光标的动画'span'） –

你可以使用pseudoelement和简单的动画：

.init::after { 
    content: '_'; 
    display: inline-block; 
    animation: flash 1s linear infinite; 
} 

@keyframes flash { 
    50% { 
    opacity: 0; 
    } 
}

codepen

来源

2017-03-07 13:26:08 sol

添加光标到您的HTML：

body 
    .container 
    .cmd 
     p.init 
     span.prompt $Robot~ 
     span.cursor _ 
     p.perc

风格光标：

.cursor { 
    animation: blink 1s linear infinite; 
} 

@keyframes blink { 
    50% { opacity: 0; } 
}

并更改JS为目标的新span：

typeAp('.prompt',"initializing",100);

来源

2017-03-07 13:26:17 gwcodes

这是一个纯jQuery解决方案，但它也可以通过CSS完成。

我已将callback function添加到typeAp，并插入“_”并使其闪烁。

这会在完成写入操作时触发回调。

if (n == chars.length) { 
    callback(target) 
}

function typeAp(target, toType, stepTime, callback) { 
 
    var n = 0; 
 
    var chars = Array.from(toType); 
 
    setInterval(function() { 
 
    $(target).append(chars[n]); 
 
    n++; 
 
    if (n == chars.length) { 
 
     callback(target) 
 
    } 
 
    }, stepTime); 
 

 
}; 
 

 
typeAp('.init', "initializing", 100, function(target) { 
 
    $(target).append("<span class='blink'>_</span>") 
 

 
    function blinker() { 
 
    $('.blink').fadeOut(500); 
 
    $('.blink').fadeIn(500); 
 
    } 
 

 
    setInterval(blinker, 1000); 
 
});

body { 
 
    background-color: #ccc; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    width: 100%; 
 
    height: 100vh; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.cmd { 
 
    background-color: #111; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    width: 600px; 
 
    height: 200px; 
 
} 
 

 
p { 
 
    letter-spacing: 2px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    font-family: courier; 
 
    color: lime; 
 
} 
 

 
::selection { 
 
    background: #111; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="cmd"> 
 
     <p class="init">$Robot~ </p> 
 
     <p class="perc"> </p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-03-07 13:28:53

添加到风格

.init::after { 
    content: '_'; 
    animation: blink 0.2s linear infinite; 
    } 

@keyframes blink { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opaicty: 1; 
    } 
}

来源

2017-03-07 13:30:23 andfra

与jQuery的一个可能的解决方案：

function typeAp(target, toType, stepTime){ 
 
    $('.dash').hide(); 
 
    var n = 0; 
 
    var chars = Array.from(toType); 
 
    var interval = setInterval(function(){ 
 
    $(target).append(chars[n]); 
 
    n++; 
 
    if (n >= chars.length) { 
 
     clearInterval(interval); 
 
     $('.dash').show(); 
 
    } 
 
    },stepTime); 
 
}; 
 

 
setInterval(function() { 
 
    $('.dash').toggleClass('hide'); 
 
}, 700); 
 

 
typeAp('.text',"initializing",100);

body{ 
 
    background-color:#ccc; 
 
} 
 
.container{ 
 
    display:flex; 
 
    width:100%; 
 
    height:100vh; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
.cmd{ 
 
    background-color:#111; 
 
    border-radius:5px; 
 
    padding:20px; 
 
    
 
    width:600px; 
 
    height:200px; 
 
} 
 
p{ 
 
    letter-spacing:2px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    font-family:courier; 
 
    color:lime; 
 
} 
 
.dash.hide { 
 
    opacity: 0; 
 
} 
 
::selection{ 
 
    background:#111; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container"> 
 
    <div class="cmd"> 
 
     <p> 
 
     $Robot~ <span class="text"></span><span class="dash">_</span> 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-03-07 13:42:00

使用CSS和pseudoelement :after

function typeAp(target, toType, stepTime){ 
 
    target = $(target).addClass('typing'); 
 
    var n = 0; 
 
    var chars = Array.from(toType); 
 
    var interval = setInterval(function(){ 
 
    target.append(chars[n]); 
 
    n++; 
 
    if (n >= chars.length) { 
 
     clearInterval(interval); 
 
     target.removeClass('typing'); 
 
    } 
 
    },stepTime); 
 
}; 
 

 
typeAp('.init', "initializing", 100);

body{ 
 
    background-color:#ccc; 
 
} 
 
.container{ 
 
    display:flex; 
 
    width:100%; 
 
    height:100vh; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
.cmd{ 
 
    background-color:#111; 
 
    border-radius:5px; 
 
    padding:20px; 
 
    
 
    width:600px; 
 
    height:200px; 
 
} 
 
p{ 
 
    letter-spacing:2px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    font-family:courier; 
 
    color:lime; 
 
} 
 
.init:not(.typing)::after { 
 
    content: '_'; 
 
    animation: blink 1s ease .5s infinite; 
 
    opacity: 0; 
 
} 
 
@keyframes blink { 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
} 
 
::selection{ 
 
    background:#111; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <div class="container"> 
 
    <div class="cmd"> 
 
     <p class="init">$Robot~ </p> 
 
     <p class="perc"> </p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-03-07 14:03:47

如何在每个字符后添加闪烁的“_”？

回答

相关问题