0

如题,css的代码如下:
.pic1 a{

display:block;
width:100%;
height:100%;
text-indent:-999em;
background-image:url(2.png);
}

.pic1 a:hover{

animation:flip 1s 0s ease both;
transition:all 0s .2s;
}

@-webkit-keyframes flip

{
  0%{   transform:perspective(300px)
        rotate3d(0,1,0,360deg);
        transition-timing-function:ease-in;
        opacity:1}

   20%{
       transform:perspective(300px)
       rotate3d(0,1,0,270deg);
       transition-timing-function:ease-in;
       opacity:1}

   21%{
       transform:perspective(300px)
       rotate3d(0,1,0,90deg);
       transition-timing-function:ease-in;
       opacity:1}

   40%{
       transform:perspective(300px)
       rotate3d(0,1,0,-40deg);
       transition-timing-function:ease-in
       opacity:1}

   60%{
       transform:perspective(300px) 
       rotate3d(0,1,0,20deg);
       opacity:1}

   80%{
       transform:perspective(300px) 
       rotate3d(0,1,0,-5deg)
       opacity:1}

   100%{-webkit-transform:perspective(300px);
        transform:perspective(300px)
        opacity:1}
        }

先谢过各位大佬了0.0

查看全部 2 个回答

0

让外层的元素触发伪类,里面的元素进行动画即可。
一般简单的动画效果都可以这样操作,父元素触发,子元素进行动画。

推荐答案

0

已采纳

.pic1原地不动,移入.pic1变化,只让a变化就行了

.pic1:hover a{

animation:flip 1s 0s ease both;
transition:all 0s .2s;
}