html - 打字效果 - css 写完整的文本
问题描述
我正在尝试将文本写成打字,但打字效果并没有完全写出长文本,并且文本没有移动到第二行以完成书写文本。
欢迎使用任何 css 方法(避免使用 js 或 jquery)。
/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
padding: 4em;
color: rgba(255,255,255,.75);
font-family: 'Lato', sans-serif;
background-color: rgb(25,25,25);
}
.line-1{
position: relative;
top: 50%;
width: 100%;
border-right: 2px solid rgba(255,255,255,.75);
font-size: 180%;
text-align: left;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}
/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriter{
from{width: 0;}
to{width: 100%;}
}
@keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}
<p class="line-1 anim-typewriter">Animation typewriter style using css steps() Animation typewriter style using css steps() Animation typewriter style using css steps() Animation typewriter style using css steps()</p>
解决方案
您可以使用此 css 子语句来分解您的段落并将其继续到下一行..
.css-typing p {
margin-left: -20px;
color: black;
text-align: center;
border-right: .15em solid orange;
font-family: "monospace";
font-size: 2em;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
.css-typing p:nth-child(1) {
width: 400px;
-webkit-animation: type 2s steps(40, end);
animation: type 2s steps(40, end);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(2) {
width: 400px;
opacity: 0;
-webkit-animation: type2 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(3) {
width: 400;
opacity: 0;
-webkit-animation: type3 2s steps(40, end), blink .2s step-end infinite alternate;
animation: type3 2s steps(40, end), blink .2s step-end infinite alternate;
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(4) {
width: 400px;
opacity: 0;
-webkit-animation: type4 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 6s;
animation-delay: 6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(5) {
width: 400px;
opacity: 0;
-webkit-animation: type5 2s steps(40, end);
animation: type2 2s steps(40, end);
-webkit-animation-delay: 8s;
animation-delay: 8s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.css-typing p:nth-child(6) {
width: 400px;
opacity: 0;
-webkit-animation: type6 2s steps(40, end);
animation: type4 2s steps(40, end);
-webkit-animation-delay: 10s;
animation-delay: 10s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
@-webkit-keyframes type {
0% {
width: 0;
}
99.9% {
border-right: .15em solid orange;
}
100% {
border: none;
}
}
@keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type4 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type4 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type5 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@-webkit-keyframes type5 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: .15em solid orange;
}
100% {
opacity: 1;
border: none;
}
}
@keyframes type6 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes type6 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes blink {
50% {
border-color: transparent;
}
}
@-webkit-keyframes blink {
50% {
border-color: tranparent;
}
}
<div class="css-typing">
<p>
typewriter style
</p>
<p>
Animation typewriter
</p>
<p>
style using css
</p>
<p>
steps() Animationy
</p>
<p>
typewriter style using
</p>
<p>
css steps().
</p>
</div>
推荐阅读
- node.js - cipher.js TypeError: IV must be a buffer
- javascript - 对输入动态应用 JavaScript
- command-line-interface - ZAP-CLI 报告生成
- visual-studio - 如何停止 Visual Studio 2017 v15.7.2 在新浏览器窗口中打开调试会话?
- android - RadioButton 上带有文本的自定义按钮
- apache-kafka - Kafka 内置的重试机制究竟是如何工作的?
- android - 从钩子方法获取设备传感器状态
- apache-spark - 使用 Spark (1.6.0) SQL 的 Kerberos 启用远程 Hive Meta Store (hive-1.1.0) 访问问题
- sql-server - 提高前 1 个查询的性能
- sql - 如何删除压缩表中的列?