티스토리 뷰
<!DOCTYPE html>
<html lang="en">
<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>TEST</title>
<style>
*{margin: 0;padding: 0;box-sizing:border-box;}
body{background-color: #e5e5e5;}
.contents{max-width: 1300px;margin: 0 auto;padding-top: 100px;}
ul{list-style: none;}
ul:after{display: block;content: '';clear: both;}
ul li{float: left;position: relative;margin-left: 20px;margin-top: 20px;width: calc((100% - 41px)/3);background-color: #fff;opacity: 0;transition: .3s;animation: avoid .5s forwards ease-out;}
ul li:nth-child(3n+1){margin-left: 0;}
ul li:nth-child(-n+3){margin-top: 0;}
ul li a{display: block;padding: 30px;text-decoration: none;color: #000;}
ul li strong:before, ul li strong:after, ul li span:before, ul li span:after{display: block;content: '';position: absolute;background-color: #1428a0;transition: .3s;}
ul li strong:before{top: 0;right: 0;width: 0;height: 3px;}
ul li strong:after{bottom: 0;left: 0;width: 0;height: 3px;}
ul li span:before{top: 0;left: 0;width: 3px;height: 0;}
ul li span:after{bottom: 0;right: 0;width: 3px;height: 0;}
ul li:hover{-webkit-box-shadow: 10px 11px 20px #a8a8a8;box-shadow: 10px 11px 20px #a8a8a8;}
ul li:hover strong:before{width: 100%;}
ul li:hover strong:after{width: 100%;}
ul li:hover span:before{height: 100%;}
ul li:hover span:after{height: 100%;}
@keyframes avoid{
from{transform: translateY(10px);}
to{opacity: 1;transform: translateY(0);}
}
</style>
</head>
<body>
<div class="contents">
<ul>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
<li>
<a href="#n">
<strong>AL Algorithms</strong><br><br>
<span>Understanding users and environments with human-level intelligence</span>
</a>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('ul li').each(function (index, item){
var cnt = $(this).index()
cnt2 = cnt * 0.2;
$(item).css('animation-delay', cnt2 + 's');
})
})
</script>
</body>
</html>
레퍼런스 사이트
'WebPublisher' 카테고리의 다른 글
[modal] 부트스트랩 모달창(팝업창) 띄우기 (0) | 2021.11.11 |
---|---|
[jQuery] percentage animation 효과 적용 (progress bar) (0) | 2021.11.11 |
[css] html 애니메이션(animation) 속성 (0) | 2021.11.11 |
[css] 공통 selectbox 스타일 (0) | 2021.11.10 |
[tip] Git 세팅하는 방법 (0) | 2021.11.09 |
공지사항