CSS/JS卡擴展效果如何？

我需要實現類似https://pokedex.org上看到的擴展效果的過渡效果CSS/JS卡擴展效果如何？

我已經檢查了一些流行的CSS和JS框架，但是找不到這個功能。

你能告訴我如何做到這一點？

感謝

2017-02-24 Lupo

我嘗試添加動畫可能這會爲你工作

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.mainDiv{ 
height:300px; 
width:300px; 
margin:0 auto; 
background:rgba(33,150,243,1); 
-webkit-animation-name: zoomIn; /* Safari 4.0 - 8.0 */ 
    -webkit-animation-duration: .2s; /* Safari 4.0 - 8.0 */ 
    animation-name: zoomIn; 
    animation-duration: .2s; 
} 
.secDiv{ 
height:100px; 
width:100px; 
top:50px; 
position:relative; 
margin:0 auto; 
background:rgba(133,50,24,1); 
-webkit-animation-name: slideUp; /* Safari 4.0 - 8.0 */ 
    -webkit-animation-duration: .6s; /* Safari 4.0 - 8.0 */ 
    animation-name: slideUp; 
    animation-duration: .6s; 
} 

@-webkit-keyframes slideUp { 
    from { 
    -webkit-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
    visibility: visible; 
    } 

    to { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 

@keyframes slideUp { 
    from { 
    -webkit-transform: translate3d(0, 100%, 0); 
    transform: translate3d(0, 100%, 0); 
    visibility: visible; 
    } 

    to { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    } 
} 

@-webkit-keyframes zoomIn { 
    from { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

@keyframes zoomIn { 
    from { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 


</style> 

</head> 

<body> 
    <div class="mainDiv"> 
    <div class="secDiv"> 
    </div> 
    </div> 
</body> 

</html>

來源

2017-02-24 06:29:53

CSS/JS卡擴展效果如何？

回答

相關問題