簡單的hover陰影效果

今天看到一個簡單的hover效果還滿喜歡的，就記錄下來囉：

html:「<div id="div1"></div>」
css:

#div1{
        position: relative;
        top: 300px;
        margin: 0 auto;
        width: 300px;
        height: 200px;
        transition: box-shadow .25s;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    }
    #div1:hover{
        transition: box-shadow .25s;
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

另外一種方式(會有往上浮起的感覺)：

.hover_shadow {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}
.hover_shadow:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

主要透過CSS3的語法「transition」，讓hover效果更平順一點。