ورود

01-06-1394، 05:56 ب.ظ

سلام، توی فوتر سایت آپارات چند تا آیکون اجتماعی هست که وقتی می رید روشون، بک گراند رو عوض می کنه ولی از پایین شروع می شه و می ره بالا، می خواستم بدونم اسم Transtion اش چیه، یا از چه کد JS ای استفاده می کنه .. ؟

MRPM · 01-06-1394، 11:54 ب.ظ

<!DOCTYPE html>
<html>
   <head>
       <title>Title</title>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <style type="text/css">
           *,
           *:before,
           *:after{
               padding: 0;
               margin: 0;
               box-sizing: border-box;
           }
           a{
               background-color: gray;
               display: inline-block;
               height: 50px;
               width: 50px;
               position: relative;
               text-align: center;
               line-height: 50px;
               color: #FFF;
               text-decoration: none;
           }
           a:before{
               background-color: green;
               display: block;
               position: absolute;
               height: 100%;
               width: 100%;
               content: "";
               top: 0;
               left: 0;
               transform: scaleY(0);
               transform-origin: 50% 100%;
               transition: transform 0.3s ease-in-out;
           }
           a:hover:before{
               transform: scaleY(1);
           }
           a span{
               position: relative;
               display: block;
               z-index: 9;
           }
       </style>
   </head>
   <body>
       <a href="#">
           <span>test</span>
       </a>
   </body>
</html>

ورود
نام‌کاربری
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.