.img_div{

/* height: 40%;/

width: 30rem;

max-height: 50%;

/height:23.5rem; /

padding: 4%;

margin: 20% auto 0 auto;

cursor:pointer;

}

.img_div:hover{

/height: 40%;/

width: 30rem;

max-height: 50%;

/height:23.5rem; */

padding: 4%;

margin: 20% auto 0 auto;

cursor:pointer;

background: url(../static/img-bg.gif) no-repeat ;

background-size: 100% 100%;

animation: aniy 0.5s ease-in;

}

@keyframes aniy{

from{opacity: 0.2;}

to{opacity: 1;}

}

这里的效果，就是在img的hover状态后，以背景图的方式加上动图，并且加入了一段动画。css动画还可以用过渡，这里没有使用到过渡，使用了@keyframes元素编辑动画。