Телеграмм чат группы js

<!DOCTYPE html>
<head>
<title>Untitled</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="" type="text/css"/>
</head>
<body>
<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">[ “Добрый вечер всем :),<span class="cursor1">_</span></p>
<p class="line2">  “Группа JS поможет вам,<span class="cursor2">_</span></p>
<p class="line3">  “изучат JS быстро и верно” ]<span class="cursor3">_</span></p>
<p class="line4">><span class="cursor4">Just follow us ;)_</span></p>
</div>

<style>
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 {

источник

22:14пожаловаться #7

Я

Яша in JS

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;
}
}
</style>

</body>

</html>

источник

22:14пожаловаться #8

Я

Яша in JS

Яша

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;
}
}
</style>

</body>

</html>

Я сам незнаю что ета не похож на чсс

источник

22:15пожаловаться #9

QM

Qila Manta in JS

эм

источник

22:18пожаловаться #10

NK

ID:714296394 in JS

мать моя женщина)))

источник