Я следовал учебному пособию, но они ничего не объясняли. Я также новичок в этом сайте, поэтому, если я что-то неверно отформатировал, пожалуйста, сообщите мне, чтобы я мог выучить и переформатировать, чтобы исправить это.
Код изначально использовался со словом "Милосердие" в учебнике . То же количество букв, что и в милосердии, работает только сейчас, если это поможет.
Что у меня есть для HTML в целом: https://pastebin.com/8MHzd3SD
CSS используется для управления им: https://pastebin.com/ab5Ff4ev
@font-face {font-family: Lato; src: url(http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext);}
body{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: center;
background-color: #696969;
align-items: center;
height:100vh;
}
.box{
position:relative;
overflow:hidden;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
padding:100px;
margin: auto;
}
.box li{
list-style-type: none;
transition: all 2s;
letter-spacing:12px;
font-size:120px;
font-family: Lato;
font-weight: bold;
}
.box:hover li{
transform: rotate(55deg) translateY(-300px);
opacity:0;
filter: blur(30px);
}
.box:hover::after {
transform: scale(0.8);
transition-delay: 2.4s;
opacity: 0.8;
}
li:nth-child(1){
transition-delay: 0;
}
li:nth-child(2){
transition-delay: 0.1s;
}
li:nth-child(3){
transition-delay: 0.2s;
}
li:nth-child(4){
transition-delay: 0.3s;
}
li:nth-child(5){
transition-delay: 0.4s;
}
li:nth-child(6){
transition-delay: 0.5;
}
li:nth-child(7){
transition-delay: 0.6;
}
li:nth-child(8){
transition-delay: 0.7;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<ul class="box">
<li>P</li>
<li>R</li>
<li>O</li>
<li>J</li>
<li>E</li>
<li>C</li>
<li>T</li>
<li>S</li>
</ul>
</body>
</html>