Code Dạo: The Ghost Text

Lạnh quá nên rảnh rỗi nên nghịch cho vui thôi các bạn. Hihi

Như thường lệ phía dưới đây là CSS và CODE
CSS

body{
margin: 0;
padding:0;
font-family:verdana;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #262626;
}
ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: row-reverse;
}
ul li
{
list-style: none;
color: #fff;
font-size: 4em;
font-weight: bold;
letter-spacing: 10px;
filter: blur(1px);
transition: 4s;
}
ul li:hover,
ul li:hover ~ li
{
transform: rotate(180deg) translateY(-200px);
transition: 2s;
filter: blur(20px);
opacity: 0;
}

CODE

<ul>

<li>M</li>

<li>O</li>

<li>C</li>

<li>.</li>

<li>T</li>

<li>O</li>

<li>P</li>

<li>S</li>

<li>G</li>

<li>O</li>

<li>L</li>

<li>B</li>

<li>.</li>

<li>Z</li>

<li>E</li>

<li>S</li>

<li>E</li>

<li>D</li>

</ul>

Lưu ý: Thay Text nhớ đảo ngược Text
Chúc các bạn thành công!
(Mình Code bằng Sublime Text nên có lỗi gì mong các bạn thông cảm và báo cho mình biết để mình khắc phục)