CÁCH TẠO WIDGET HIỆU ỨNG CHỮ ĐÁNH MÁY

Kính chào anh chị em cùng với các bà con cô bác đã đến với Duy Phương Blog. Thì hôm nay rảnh và cũng tình cờ thấy bên codepen cái widget rất hay liền đem về nghịch và tiện thể share lên đây cho anh em xài luôn. Widget này cũng có hiệu ứng chữ đánh máy bao ngầu.

<div class=fakeMenu>  <div class="fakeButtons fakeClose"></div>  <div class="fakeButtons fakeMinimize"></div>  <div class="fakeButtons fakeZoom"></div></div><div class="fakeScreen">  <p class="line1">&#91;&nbsp;&ldquo;I'm a web developer.&rdquo;,<span class="cursor1">_</span></p>  <p class="line2">&nbsp;&nbsp;&ldquo;I'm a web designer.&rdquo;,<span class="cursor2">_</span></p>  <p class="line3">&nbsp;&nbsp;&ldquo;Let's work together!&rdquo;&nbsp;&#93;<span class="cursor3">_</span></p>  <p class="line4">><span class="cursor4">_</span></p></div>

body {  background-color: #272727;  padding: 10px;}
.fakeButtons {  height: 10px;  width: 10px;  border-radius: 50%;  border: 1px solid #000;  position: relative;  top: 6px;  left: 6px;  background-color: #ff3b47;  border-color: #9d252b;  display: inline-block;}
.fakeMinimize {  left: 11px;  background-color: #ffc100;  border-color: #9d802c;}
.fakeZoom {  left: 16px;  background-color: #00d742;  border-color: #049931;}
.fakeMenu {  width: 350px;  box-sizing: border-box;  height: 25px;  background-color: #bbb;  margin: 0 auto;  border-top-right-radius: 5px;  border-top-left-radius: 5px;}
.fakeScreen {  background-color: #151515;  box-sizing: border-box;  width: 350px;  margin: 0 auto;  padding: 20px;  border-bottom-left-radius: 5px;  border-bottom-right-radius: 5px;}
p {  position: relative;  left: 50%;  margin-left: -8.5em;  text-align: left;  font-size: 1.25em;  font-family: monospace;  white-space: nowrap;  overflow: hidden;  width: 0;}
span {  color: #fff;  font-weight: bold;}
.line1 {  color: #9CD9F0;  -webkit-animation: type .5s 1s steps(20, end) forwards;  -moz-animation: type .5s 1s steps(20, end) forwards;  -o-animation: type .5s 1s steps(20, end) forwards;  animation: type .5s 1s steps(20, end) forwards;}
.cursor1 {  -webkit-animation: blink 1s 2s 2 forwards;  -moz-animation: blink 1s 2s 2 forwards;  -o-animation: blink 1s 2s 2 forwards;  animation: blink 1s 2s 2 forwards;}
.line2 {  color: #CDEE69;  -webkit-animation: type .5s 4.25s steps(20, end) forwards;  -moz-animation: type .5s 4.25s steps(20, end) forwards;  -o-animation: type .5s 4.25s steps(20, end) forwards;  animation: type .5s 4.25s steps(20, end) forwards;}
.cursor2 {  -webkit-animation: blink 1s 5.25s 2 forwards;  -moz-animation: blink 1s 5.25s 2 forwards;  -o-animation: blink 1s 5.25s 2 forwards;  animation: blink 1s 5.25s 2 forwards;}
.line3 {  color: #E09690;  -webkit-animation: type .5s 7.5s steps(20, end) forwards;  -moz-animation: type .5s 7.5s steps(20, end) forwards;  -o-animation: type .5s 7.5s steps(20, end) forwards;  animation: type .5s 7.5s steps(20, end) forwards;}
.cursor3 {  -webkit-animation: blink 1s 8.5s 2 forwards;  -moz-animation: blink 1s 8.5s 2 forwards;  -o-animation: blink 1s 8.5s 2 forwards;  animation: blink 1s 8.5s 2 forwards;}
.line4 {  color: #fff;  -webkit-animation: type .5s 10.75s steps(20, end) forwards;  -moz-animation: type .5s 10.75s steps(20, end) forwards;  -o-animation: type .5s 10.75s steps(20, end) forwards;  animation: type .5s 10.75s steps(20, end) forwards;}
.cursor4 {  -webkit-animation: blink 1s 11.5s infinite;  -moz-animation: blink 1s 8.5s infinite;  -o-animation: blink 1s 8.5s infinite;  animation: blink 1s 8.5s infinite;}
@-webkit-keyframes blink {  0% {    opacity: 0;  }  40% {    opacity: 0;  }  50% {    opacity: 1;  }  90% {    opacity: 1;  }  100% {    opacity: 0;  }}
@-moz-keyframes blink {  0% {    opacity: 0;  }  40% {    opacity: 0;  }  50% {    opacity: 1;  }  90% {    opacity: 1;  }  100% {    opacity: 0;  }}
@-o-keyframes blink {  0% {    opacity: 0;  }  40% {    opacity: 0;  }  50% {    opacity: 1;  }  90% {    opacity: 1;  }  100% {    opacity: 0;  }}
@keyframes blink {  0% {    opacity: 0;  }  40% {    opacity: 0;  }  50% {    opacity: 1;  }  90% {    opacity: 1;  }  100% {    opacity: 0;  }}
@-webkit-keyframes type {  to {    width: 17em;  }}
@-moz-keyframes type {  to {    width: 17em;  }}
@-o-keyframes type {  to {    width: 17em;  }}
@keyframes type {  to {    width: 17em;  }}

• Đối với CSS thì các bạn hãy chèn lên trước thẻ ]]></b:skin>.
• Còn với HTML thì các bạn chèn vào nơi các bạn muốn nó hiển thị.