JQuery的懸停表格設計動畫

Question

我正想通過這個網站，我發現了這個非常漂亮的動畫在Compatibility部分。

http://html5css3templates.com/themes/taketheplunge/templates/index.html#about

我想實現它。懸停部分，改變設計是我知道的。但我仍然無法設計類似的東西。有人可以幫助我嗎？

Answer 1

使用CSS3過渡所示的效果。 transition屬性bar class決定了效果的速度。懸停的CSS沒有休息

.bar{ 
    transition: all 0.6s ease-in-out 0s; 
} 
.compatibility:hover .percent80 { 
    width: 80%; 
} 

結賬fiddle

Answer 2

轉到樣式表：http://html5css3templates.com/themes/taketheplunge/templates/css/layout.css 再看看有關疊加的部分：

.brideOverlay { 
    border: 5px solid rgba(242, 168, 181, 0.9); 
    border-radius: 50%; 
    box-shadow: 0 0 0 10px rgba(242, 168, 181, 0.3) inset; 
    width: 420px; 
    height: 420px; 
    transition: all 0.5s ease-in-out 0s; 
    margin-bottom: 30px; 
    position: absolute; 
} 
.brideOverlay h2{ 
    text-align: center; 
    padding-top: 190px; 
    opacity: 0; 
    transform: scale(0); 
    transition: all 0.8s ease-in-out 0s; 
} 
etc... 

這是一些CSS3代碼，因此具有看看CSS3 intro。