如何創建卡片懸停樣式效果，如google現在的卡片

如何創建卡片懸停樣式以及現在可能的卡片加載樣式，例如Google（在桌面瀏覽器中打開）卡片。喜歡這個網址如何創建卡片懸停樣式效果，如google現在的卡片

http://www.google.com/landing/now/#howtogetit

2014-11-14 Anirban Bera

顯示您的代碼而不是URL。 –

我無法產生像那些網址中的卡片一樣的效果。不過，我已經想出了這個。你可以請建議什麼修改，使其像谷歌現在卡一樣工作。 http://jsfiddle.net/AirbanBera/85ytzq3k/1/ –

那麼，['perspective']（https://developer.mozilla.org/en-US/docs/Web/CSS/perspective）的方式去。 –

你可以做到這一點使用perspective這樣：

body { 
 
    background: url(http://s25.postimg.org/b6q25p4p7/black_thread.png); 
 
} 
 
.container { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    top: 10px; 
 
    width: 100%; 
 
    height: 350px; 
 
    -webkit-perspective: 600px; 
 
    perspective: 600px; 
 
    text-align: center; 
 
} 
 
.item { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 15px; 
 
    width: 225px; 
 
    height: 300px; 
 
    line-height: 300px; 
 
    background-color: #51634b; 
 
    border-radius: 2px; 
 
    -webkit-animation: animOpp 0.4s 1; 
 
    animation: animOpp 0.4s 1; 
 
    box-shadow: 1px 1px 5px #304129; 
 
} 
 
.item:hover { 
 
    -webkit-animation: anim ease-out 0.5s 1; 
 
    animation: anim 0.5s 1; 
 
    transform: translateZ(30px); 
 
    cursor: pointer; 
 
} 
 
.item:active { 
 
    -webkit-transform: translateZ(26px); 
 
    transform: translateZ(26px); 
 
} 
 
@-webkit-keyframes anim { 
 
    0% { 
 
    transform: rotateX(0deg) translateZ(0px); 
 
    } 
 
    25% { 
 
    transform: rotateX(-4deg) translateZ(15px); 
 
    } 
 
    37% { 
 
    transform: rotateX(-8deg) translateZ(30px); 
 
    transform-origin: 50% 0%; 
 
    } 
 
    72% { 
 
    transform-origin: 50% 0%; 
 
    transform: rotateX(-4deg) translateZ(30px); 
 
    } 
 
    100% { 
 
    transform-origin: 50% 0%; 
 
    transform: rotateX(0deg) translateZ(30px); 
 
    } 
 
} 
 
@keyframes anim { 
 
    0% { 
 
    transform: rotateX(0deg) translateZ(0px); 
 
    } 
 
    25% { 
 
    transform: rotateX(-4deg) translateZ(15px); 
 
    } 
 
    37% { 
 
    transform: rotateX(-8deg) translateZ(30px); 
 
    transform-origin: 50% 0%; 
 
    } 
 
    72% { 
 
    transform-origin: 50% 0%; 
 
    transform: rotateX(-4deg) translateZ(30px); 
 
    } 
 
    100% { 
 
    transform-origin: 50% 0%; 
 
    transform: rotateX(0deg) translateZ(30px); 
 
    } 
 
} 
 
@-webkit-keyframes animOpp { 
 
    0% { 
 
    transform: translateZ(30px); 
 
    } 
 
    35% { 
 
    transform: translateZ(20px); 
 
    } 
 
    100% { 
 
    transform: translateZ(0px); 
 
    } 
 
} 
 
@keyframes animOpp { 
 
    0% { 
 
    transform: translateZ(30px); 
 
    } 
 
    35% { 
 
    transform: translateZ(20px); 
 
    } 
 
    100% { 
 
    transform: translateZ(0px); 
 
    } 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    <div class="item">Content Goes Here</div> 
 
    </div> 
 
</body>

來源

2014-11-14 06:44:34

哇！哇！！那就是我正在尋找的。非常感謝。我不能投票，因爲我沒有所需的聲望（15代表）。但將其標記爲答案。 –

試試這個

.panel 
 
{ 
 
    min-height:50px; 
 
\t border:1px solid; 
 
\t width:200px; 
 
\t display:inline-block; 
 
\t margin-left:10px; 
 
\t -webkit-transition: 1s ease-in-out; 
 
\t -moz-transition: 1s ease-in-out; 
 
\t -o-transition: 1s ease-in-out; 
 
\t transition: 1s ease-in-out; 
 
} 
 

 
.hover-effect:hover 
 
{ 
 
    -webkit-transform: scale(1.3); 
 
\t -moz-transform: scale(1.3); 
 
\t -o-transform: scale(1.3); 
 
\t -ms-transform: scale(1.3); 
 
\t transform: scale(1.3); 
 
    background-color:grey; 
 
} 
 
.col-xs-4{ 
 
\t display:inline; 
 
}

<div class="row"> 
 
    <div class="col-xs-4"> 
 
     <div class="panel panel-default hover-effect"> 
 
     card 1 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-xs-4"> 
 
     <div class="panel panel-default hover-effect"> 
 
     card 2 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-xs-4"> 
 
     <div class="panel panel-default hover-effect"> 
 
     card 3 
 
     </div> 
 
    </div> 
 
</div 
 

 

 

 
</body>

來源

2014-11-14 06:17:38 vrajesh

嗨Vrajesh，謝謝你的建議。但正如你所看到的卡片懸停行爲（在google now卡片鏈接中）與你發佈的卡片懸停行爲明顯不同。我只是在搜索。再次感謝您的建議。 –

如何創建卡片懸停樣式效果，如google現在的卡片

回答

相關問題