Question

我正在尝试使用CSS中的多行来实现打字效果。

这是我遵循的一个很好的参考点：

https://css-tricks.com/snippets/css/typewriter-effect/

现在我想要的效果是，一旦第一个闪烁光标的动画结束，就会隐藏第一个边界右边的可见性。动画结束后，边框右侧仍在屏幕上，我希望它不可见。（好像按下键盘上的按钮一样。）我该怎么做？

<div class="typewriter">
  <h1>Hi. I'm Andy.</h1>
  <h2>I love learning.</h2>
</div>

    public class First : ModelBase
{
    public String FirstValue
    {
        get { return GetValue<String>(FirstValueProperty); }
        set { SetValue(FirstValueProperty, value); }
    }

    public static readonly PropertyData FirstValueProperty = RegisterProperty("FirstValue", typeof(String), "First Text");

    public String SecondValue
    {
        get { return GetValue<String>(SecondValueProperty); }
        set { SetValue(SecondValueProperty, value); }
    }

    public static readonly PropertyData SecondValueProperty = RegisterProperty("SecondValue", typeof(String), "Second text");
}

Answer 1

只需取出infinite

.typewriter h1 {
  text-align: center;
  overflow: hidden;
  font-size: 100%;
  border-right: .15em solid #fff;
  white-space: nowrap;
  /* keeps content in one line */
  letter-spacing: .15em;
  animation: typing 2.5s steps(22, end), blink-caret .75s step-end;
}
.typewriter h2 {
  font-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid black;
  -webkit-animation: typing 2s steps(26, end), blink-caret 1s step-end;
  -webkit-animation-delay: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation: typing 2s steps(26, end), blink-caret 1s step-end;
  -moz-animation-delay: 3s;
}
/* The typing effect */

@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 9em;
  }
}
@keyframes blink-caret {
  from, to {
    border-color: transparent
  }
  50% {
    border-color: #000;
  }
}

<div class="typewriter">
  <h1>Hi. I'm Andy.</h1>
  <h2>I love learning.</h2>
</div>

Answer 2

body{
	margin: 0;
	font-family: 'Pacifico', cursive;
}
.blackboard-wrapper {
	width: 100vw;
	height: 100vh;
	background-image: repeating-linear-gradient(to bottom,#26180B 70%,#362418 77%,#77736A 78%,#655444 78%);
}
.black-board {
	height: 360px;
	width: 800px;
	transform: translateY(70px);
	margin: 0 auto;
	background-image: repeating-linear-gradient(to bottom,#000000 77%,#111111 78%,#222222 77%,#000000 78%);
	border-width: 15px;
	border-style: groove;
	border-color: #2E1E11;
	position: relative;
	color: #ffffff;
}
.date {
	position: absolute;
	left: 15px;
	top: 10px;
}
.date > span {
	display: block;
	margin-bottom: 5px;
}
.black-board::before {
	position: absolute;
	left: 0;
	content: "";
	right: 0;
	background-color: #afafaf;
	height: 2px;
	top: 94px;
}
.topic {
	position: absolute;
	top: 28px;
	left: 50%;
	transform: translateX(-50%);
	text-decoration: underline;
	word-spacing: 8px;
}
.writing {
	position: absolute;
	top: 120px;
	left: 15px;
	right: 15px;
	bottom: 15px;
}
.writing::after,
.writing::before {
	position: absolute;
	letter-spacing: 2px;
	font-size: 30px;
	animation-name: write;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(.7,.45,.97,.36);
}
.writing::before{
	font-size: 25px;
	content:"This is cool NAAA???";
	top: 70px;
	color: #1FBEA6;
	animation-name: write2;
	animation-duration: 2s;
	animation-iteration-count: 1;
	animation-timing-function: cubic-bezier(.7,.45,.97,.36);
}
@keyframes write{
	0%{content:"";}
	3%{content:"V_";}
	6%{content:"VI_";}
	9%{content:"VIK_";}
	12%{content:"VIKA_";}
	15%,25%{content:"VIKAS";}
	28%{content:"VIKA_";}
	31%{content:"VIK_";}
	34%{content:"VI_";}
	37%{content:"V_";}
	40%,50%{content:"";}
	53%{content:"P_";}
	56%{content:"PA_";}
	59%{content:"PAT_";}
	62%{content:"PATE_";}
	65%,75%{content:"PATEL";}
	78%{content:"PATE_";}
	81%{content:"PAT_";}
	84%{content:"PA_";}
	88%{content:"P_";}
	91%,100%{content:"";}
}

@keyframes write2{
	0%{content:"";}
	5%{content:"T_";}
	10%{content:"Th_";}
	15%{content:"Thi_";}
	20%{content:"This_ ";}
	25%{content:"This i_";}
	30%{content:"This is_";}
	35%{content:"This is_ ";}
	40%{content:"This is c_";}
	45%{content:"This is co_";}
	50%{content:"This is coo_";}
	55%{content:"This is cool_";}
	65%{content:"This is cool N_";}
	70%{content:"This is cool NA_";}
	75%{content:"This is cool NAA_";}
	80%{content:"This is cool NAAA";}
	85%{content:"This is cool NAAA?";}
	90%{content:"This is cool NAAA??";}
	95%{content:"This is cool NAAA???";}
	100%{content:"This is cool NAAA???";}
}

<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 
<div class="blackboard-wrapper">
		<div class="black-board">
			<div class="date">
				<span>DATE</span>
				<span>25|oct|2018</span>
			</div>
			<div class="topic">TYPING EFFECT USING CSS</div>
			<div class="writing"></div>
		</div>
	</div>

https://codepen.io/Vikaspatel/pen/mzarrO

CSS打字效果

2 个答案: