.mouse{ width:11px; height:86px; background-image:url(/img/mouse.png); background-repeat:no-repeat; background-position:left top; position: relative; transition:all 0.3s; } .mouse:after{ content: ''; position: absolute; left: 4px; top: 37px; border-radius: 50%; height: 3px; width: 3px; background: #fff; animation: Ytopdown2 1.5s linear 0s infinite normal; -moz-animation: Ytopdown2 1.5s linear 0s infinite normal; -o-animation: Ytopdown2 1.5s linear 0s infinite normal; -webkit-animation: Ytopdown2 1.5s linear 0s infinite normal; opacity:0; } @-moz-keyframes Ytopdown2{ 0%{ transform:translateY(0); opacity:1;} 50%{ transform:translateY(9px);opacity:1;} 100%{ transform:translateY(9px);opacity:0;} } @-o-keyframes Ytopdown2{ 0%{ transform:translateY(0);opacity:1; } 50%{ transform:translateY(9px);opacity:1;} 100%{transform:translateY(9px);opacity:0; } } @-webkit-keyframes Ytopdown2{ 0%{ transform:translateY(0); opacity:1;} 50%{ transform:translateY(9px);opacity:1;} 100%{transform:translateY(9px);opacity:0;} } @keyframes Ytopdown2{ 0%{ transform:translateY(0);opacity:1; } 50%{ transform:translateY(9px);opacity:1;} 100%{transform:translateY(9px);opacity:0;} } .kfbtn{ width:155px; height:25px; } .kfbtn a{ width:25px; height:25px; background-position:center center; background-repeat:no-repeat; background-color:#fff; float:left; display:block; margin:0px 3px; border-radius:50%; } .kfbtn a.k1{ background-image:url(/img/shouji2.png); } .kfbtn a.k2{ background-image:url(/img/weixin2.png); } .kfbtn a.k3{ background-image:url(/img/dianhua2.png); } .kfbtn a.k4{ background-image:url(/img/dingwei2.png); } .kfbtn a.k5{ background-image:url(/img/liuyan2.png); } a.k1 img,a.k2 img { transform: translate(-47px,-135px); display:none; } a.k1:hover img,a.k2:hover img { display:block; transform: translate(-47px,-135px); } a.k3 img { transform: translate(-85px,-69px); display:none; } a.k3:hover img{ display:block; transform: translate(-85px,-69px); }