Question

我有一个Pacman在css吃动画的CSS。如何删除开始和结束动画并使嘴保持始终打开

＆＃13;

.loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.circles{position:absolute;left:-5px;top:0;height:60px;width:180px}
.circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:grey}
.circles span.one{right:80px}
.circles span.two{right:40px}
.circles span.three{right:0px}
.circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear}
@-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}
@keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}
.pacman{position:absolute;left:0;top:0;height:60px;width:60px}
.pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1C163A}
.pacman span{position:absolute;top:0;left:0;height:60px;width:60px}
.pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:yellow} 
.pacman .top::before{top:0;border-radius:60px 60px 0px 0px}
.pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px}
.pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px}
.pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite}
@-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}
@keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}}
.pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite}
@-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}
@keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}

＆＃13;

<div class="loader">
  <div class="circles">
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
  </div>
  <div class="pacman">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="left"></span>
    <div class="eye"></div>
  </div>
</div>

＆＃13;

Answer 1

更改添加动画的两个css类

$data['i_fname']=$f_fname; $data['i_lname']=$f_lname; $data['i_adline1']=$f_i_adline1; $data['i_adline2']=$f_i_adline2; $data['i_adline3']=$f_i_adline3; $data['i_phone']=$f_i_phone; $data['i_company']=$f_i_company; $data['i_state']=$f_i_state; $data['i_country']=$f_i_country; $data['i_email']=$f_i_email; $data['invoice_id']=$in_id_gen; $date['i_pname']=$f_product_domain_name;和.pacman .top更改为：

.pacman .bottom

所以它看起来像这样：

＆＃13;

.pacman .bottom{
  -webkit-transform:rotate(45deg);transform:rotate(45deg)
}
.pacman .top{
  -webkit-transform:rotate(-45deg);transform:rotate(-45deg)
}

＆＃13;

.loader{position:absolute;top:50%;left:50%;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.circles{position:absolute;left:-5px;top:0;height:60px;width:180px}
.circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:grey}
.circles span.one{right:80px}
.circles span.two{right:40px}
.circles span.three{right:0px}
.circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear}
@-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}
@keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}}
.pacman{position:absolute;left:0;top:0;height:60px;width:60px}
.pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:#1C163A}
.pacman span{position:absolute;top:0;left:0;height:60px;width:60px}
.pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:yellow} 
.pacman .top::before{top:0;border-radius:60px 60px 0px 0px}
.pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px}
.pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px}

.pacman .bottom{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.pacman .top{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}

＆＃13;

Answer 2

.loader{position:absolute; top:50%; left:50%; height:60px; width:160px; margin:0; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%) }
.circles{position:absolute; left:-5px; top:0; height:60px; width:180px }
.circles span{position:absolute; top:25px; height:12px; width:12px; border-radius:12px; background-color:grey }
.circles span.one{right:80px }
.circles span.two{right:40px }
.circles span.three{right:0px }
.circles{-webkit-animation:animcircles 0.5s infinite linear; animation:animcircles 0.5s infinite linear }
@-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px); transform:translate(0px,0px) } 100%{-webkit-transform:translate(-40px,0px); transform:translate(-40px,0px) } }
@keyframes animcircles{0% {-webkit-transform:translate(0px,0px); transform:translate(0px,0px) } 100% {-webkit-transform:translate(-40px,0px); transform:translate(-40px,0px) } }
.pacman{position:absolute; left:0; top:0; height:60px; width:60px }
.pacman .eye{position:absolute; top:10px; left:30px; height:7px; width:7px; border-radius:7px; background-color:#1C163A }
.pacman span{position:absolute; top:0; left:0; height:60px; width:60px }
.pacman span::before{content:""; position:absolute; left:0; height:30px; width:60px; background-color:yellow }
.pacman .top::before{top:0; border-radius:60px 60px 0px 0px }
.pacman .bottom::before{bottom:0; border-radius:0px 0px 60px 60px }
.pacman .left::before{bottom:0; height:60px; width:30px; border-radius:60px 0px 0px 60px}
.pacman .top{transform: rotate( -45deg );}
.pacman .bottom{transform: rotate( 45deg );}

  <div class="loader">
  <div class="circles">
    <span class="one"></span>
    <span class="two"></span>
    <span class="three"></span>
  </div>
  <div class="pacman">
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="left"></span>
    <div class="eye"></div>
  </div>
</div>

删除开始和结束动画

2 个答案: