Css thẻ Tag với hiệu ứng cực đẹp không cần JavaScipt

Với hiệu ứng từ css này bạn có thể tạo cho mình 1 trang web hoặc 1 blog vô cùng đẹp. Bên dưới mình có để chi tiết từng file, bạn có thể tham khảo mẫu để sử dụng.
Đây là file Html
<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>List Item Hover Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li>Latest News</li> <li>Related Post</li> <li>Trending Videos</li> <li>Latest News</li> <li>Related Post</li> <li>Trending Videos</li> <li>Latest News</li> <li>Related Post</li> <li>Trending Videos</li> <li>Latest News</li> <li>Related Post</li> <li>Trending Videos</li> </ul> </body> </html>
Đây là file css
* @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #333; font-family: 'Open Sans', sans-serif; } ul { margin: 0; padding: 0 100px; box-sizing: border-box; } ul li { position: relative; list-style: none; font-size: 24px; font-weight: 700; color: #777; text-transform: uppercase; padding: 10px 20px; margin: 5px; display: inline-flex; transition: 0.5s; border: 1px solid rgba(0, 0, 0, .1); } ul li:hover{ color: #fff; } ul li:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 50%; background: #000; z-index: -1; transform-origin: right; transform: scaleX(0); transition: transform 0.5s; } ul li:hover:before { transform-origin: left; transform: scaleX(1); transition: transform 0.5s; } ul li:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: #000; z-index: -1; transform-origin: left; transform: scaleX(0); transition: transform 0.5s; } ul li:hover:after { transform-origin: right; transform: scaleX(1); transition: transform 0.5s; } ul li:nth-child(3n+1):before, ul li:nth-child(3n+1):after{ background: #ef5777; } ul li:nth-child(3n+2):before, ul li:nth-child(3n+2):after{ background: #a55eea; } ul li:nth-child(3n+3):before, ul li:nth-child(3n+3):after{ background: #0be881; }