티스토리 뷰

<!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>

 

레퍼런스 사이트

https://www.sait.samsung.co.kr/saithome/main/main.do

공지사항