html怎么打开gif,CSS3 浮动播放gif

body{

margin: 0;

padding: 0;

}

.features-list{

margin: 0 auto;

padding: 0;

list-style: none;

width: 1140px;

height: 360px;

-webkit-box-shadow: 0px -20px 60px 0px rgba(0,0,0,0.04);

-moz-box-shadow: 0px -20px 60px 0px rgba(0,0,0,0.04);

box-shadow: 0px -18px 20px 0px rgba(0,0,0,0.04);

}

.features-list li{

height: 180px;

}

.features-list .features,.features-list .features .img,.features-list .features img,.features-list .features span{

-webkit-transition: all 0.3s ease 0s;

-moz-transition: all 0.3s ease 0s;

-ms-transition: all 0.3s ease 0s;

transition: all 0.3s ease 0s;

}

.features-list .features{

width: 190px;

height: 100%;

float: left;

background-color: #fff;

padding: 7px 14px 14px 14px;

overflow: hidden;

box-sizing:border-box;

-moz-box-sizing:border-box;

-webkit-box-sizing:border-box;

}

.features-list .first-row .features{

-webkit-box-shadow: inset -1px -1px 0px 0px #ededed;

-moz-box-shadow: inset -1px -1px 0px 0px #ededed;

box-shadow: inset -1px -1px 0px 0px #ededed;

}

.features-list .second-column .features{

-webkit-box-shadow: inset -1px 0px 0px 0px #ededed;

-moz-box-shadow: inset -1px 0px 0px 0px #ededed;

box-shadow: inset -1px 0px 0px 0px #ededed;

}

.features-list .first-row .features.row-last{

-webkit-box-shadow: inset 0px -1px 0px 0px #ededed;

-moz-box-shadow: inset 0px -1px 0px 0px #ededed;

box-shadow: inset 0px -1px 0px 0px #ededed;

}

.features-list .second-column .features.row-last{

-webkit-box-shadow: none;

-moz-box-shadow: none;

box-shadow: none;

}

.features-list .features:hover{

-webkit-box-shadow: 0px 0px 77px -1px rgba(0,0,0,0.37) !important;

-moz-box-shadow: 0px 0px 77px -1px rgba(0,0,0,0.37) !important;

box-shadow: 0px 0px 77px -1px rgba(0,0,0,0.37) !important;

-webkit-transform: scale(1.15);

-ms-transform: scale(1.15);

transform: scale(1.15);

z-index: 999;

}

.features-list .features:hover .img,.features-list .features:hover img{

-webkit-transform: scale(1.2);

-ms-transform: scale(1.2);

transform: scale(1.2);

}

.features-list .features:hover h4,.features-list .features:hover p{

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

}

.features-list .features .img{

display: block;

text-align: center;

}

.features-list .features .img img{

width: 75px;

height: 75px;

}

.features-list .features h4,.features-list .features p{

margin: 0;

text-align: center;

}

.features-list .features h4{

font-size: 14px;

padding: .7em;

-moz-transition: .2s ease-in-out;

-o-transition: .2s ease-in-out;

-webkit-transition: .2s ease-in-out;

transition: .2s ease-in-out;

}

.features-list .features p{

padding: 0 1em;

color: #565656;

font-size: 12px;

}