h5新标签和css3动画制作一个鼠标悬停的动画效果

本篇文章主要介绍了" h5新标签和css3动画制作一个鼠标悬停的动画效果"，主要涉及到方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下：

/*--------------------------------*/
/***** Portfolio Common style *****/
/*--------------------------------*/
.grid{
    position: relative;
    margin:0 auto;
    list-style: none;
    text-align: center;
}

.grid h2{
    font-size:20px;
    color: #ffffff;
}

.grid figure h2{
    font-weight:300;
    word-spacing:-0.15em;
}

.grid figure h2 span{
    font-weight:800;
}

.grid figure p{
    font-size:68.5%;
    letter-spacing:1px;
}

.grid figure h2,
.grid figure p{
    margin:0;
}

.grid img{
    position: relative;
    display: block;
    max-height:100%;
    opacity:.8;

}
.grid figure{
    position: relative;
    float: left;
    overflow: hidden;
    margin:10px 1%;
    min-width:100%;
    max-width:100%;
    height:auto;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure figcaption::before,
.grid figure figcaption::after{
    pointer-events:none;
}

.grid figure figcaption{
    padding:2em;
    color: #ffffff;
    text-transform:uppercase;
    font-size:1.25em;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/*---------------*/
/***** Bubba *****/
/*---------------*/
figure .effect-bubba{
    background: #9e5406;
}

figure.effect-bubba img{
    opacity:.8;
    -webkit-transition: opacity .35s;
    -moz-transition: opacity .35s;
    -ms-transition: opacity .35s;
    -o-transition: opacity .35s;
    transition: opacity .35s;
}

figure.effect-bubba:hover img{
    opacity:.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after{
    position: absolute;
    top:30px;
    left:30px;
    right:30px;
    bottom:30px;
    content: '';
    opacity:0;
    -webkit-transition: opacity 0.35s,-webkit-transform .35s;
    -moz-transition: opacity 0.35s,-moz-transform .35s;
    -ms-transition: opacity 0.35s,-ms-transform .35s;
    -o-transition: opacity 0.35s,-o-transform .35s;
    transition: opacity 0.35s, transform .35s;
}

figure.effect-bubba figcaption::before{
    border-top:1px solid #ffffff;
    border-bottom:1px solid #ffffff;
    -webkit-transform: scale(0,1);
    -moz-transform: scale(0,1);
    -ms-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after{
    border-left:1px solid #ffffff;
    border-right:1px solid #ffffff;
    -webkit-transform: scale(1, 0);
    -moz-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
}

figure.effect-bubba h2{
    padding-top:10%;
    transition:transform 0.35s;
    transform:translate3d(0, -20px, 0);
}

figure.effect-bubba p{
    padding:20px 2.5em;
    opacity:0;
    transition:opacity 0.35s,transform 0.35s;
    transform:translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after{
    opacity:1;
    transform:scale(1);
    -webkit-transform:scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity:1;
    transform:translate3d(0,0,0);
}

以上就介绍了 h5新标签和css3动画制作一个鼠标悬停的动画效果，包括了方面的内容，希望对CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_2806041.html