在做旋转动画时正在切断背景图像

时间：2016-09-02 08:56:29

标签： html css animation svg

当我旋转关键帧我的灯泡被切断时，我的灯泡动画几乎没有问题。

以下是fiddle以及

下面的代码段

＆＃13;
＆＃13; 
@keyframes move {
  0% {
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
}
@-moz-keyframes move {
  0% {
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
}
#Lamp {
  top: -35%;
  left: 0;
  width: 40%;
  height: 100%;
  position: absolute;
  background: transparent url(../img/lamp.svg) no-repeat center;
  background-size: 20%;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-animation-name: move;
  -ms-animation-name: move;
  -moz-animation-name: move;
  -o-animation-name: move;
  animation-name: move;
  -webkit-animation-duration: 5s;
  -ms-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
＆＃13; 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="125.9px" height="647.7px" viewBox="0 0 125.9 647.7" enable-background="new 0 0 125.9 647.7" xml:space="preserve">
  <g id="Lamp">
    <path fill="#024264" d="M59.8,0h6.5v460.4h-6.5V0z" />
    <path fill="#FEC13F" d="M12.7,546.9C4.7,557.4,0,570.6,0,584.8c0,34.8,28.2,62.9,62.9,62.9c34.8,0,63-28.2,63-62.9
		c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31c1.7-18-9.1-25.5-16.2-25.5H37.7c-7.2,0-17.9,7.5-16.2,25.5
		C23.1,533.8,12.7,546.9,12.7,546.9z" />
    <path fill="#05527D" d="M88.3,490.3v-37.6l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3H54.4c-1.8,0-3.3,1.5-3.3,3.3v5l-13.4,8.4v37.6H88.3
		L88.3,490.3z" />
    <path fill="#024264" d="M51.1,444.3h23.8l13.4,8.4H37.7L51.1,444.3z" />
    <path fill="#FFFFFF" d="M23,598.9c0-5.2,4.2-9.4,9.4-9.4s9.4,4.2,9.4,9.4c0,5.2-4.2,9.4-9.4,9.4C27.3,608.3,23,604.1,23,598.9z
		 M70.5,490.3h1.6v34.5l27,40.7l-1.4,0.9l-27.2-41.1L70.5,490.3z M53.8,490.3h1.7v35l-27.3,41.1l-1.4-0.9l27-40.7V490.3z" />
    <path fill="#FFFFFF" d="M71.9,554.6c2,0,4.2,0.8,7.2,2.6c6.2,3.7,13.6,0,13.7,0l0.8,1.5c-0.3,0.2-8.3,4.2-15.3,0
		c-6.4-3.8-8.4-2.7-14.7,1.7c-6.6,4.7-23.1,4.5-30.9-2.2l1.1-1.3c7.1,6.1,22.8,6.4,28.8,2.1C66.4,556.2,69,554.6,71.9,554.6
		L71.9,554.6z" />
    <g>
      <path fill="#024264" d="M37.7,460.9h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.9-1.5,3.3-3.3,3.3H37.7c-1.8,0-3.3-1.5-3.3-3.3
			C34.4,462.4,35.9,460.9,37.7,460.9z" />
    </g>
    <g>
      <path fill="#024264" d="M37.7,475.5h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.3-3.3,3.3H37.7c-1.8,0-3.3-1.5-3.3-3.3
			C34.4,477,35.9,475.5,37.7,475.5z" />
    </g>
    <path opacity="0.1" fill="#010101" enable-background="new    " d="M125.9,584.8c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31
		c1.7-18-9.1-25.5-16.2-25.5v-8.1c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3v-7.9c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3
		V453l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3H63v211.8C97.7,647.7,125.9,619.5,125.9,584.8L125.9,584.8z" />
  </g>


</svg>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

尝试以下代码

@keyframes move {
  0% {
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -ms-transform: rotate(-4deg);
    -o-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
}
@-moz-keyframes move {
  0% {
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -moz-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg);
  }
}
#Lamp {
  top: -35%;
  left: 0;
  width: 40%;
  height: 100%;
  position: absolute;
  background: transparent url(../img/lamp.svg) no-repeat center;
  background-size: 20%;
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-animation-name: move;
  -ms-animation-name: move;
  -moz-animation-name: move;
  -o-animation-name: move;
  animation-name: move;
  -webkit-animation-duration: 5s;
  -ms-animation-duration: 5s;
  -moz-animation-duration: 5s;
  -o-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="647.7px" viewBox="0 0 125.9 647.7" enable-background="new 0 0 125.9 647.7" xml:space="preserve">
  <g id="Lamp">
    <path fill="#024264" d="M59.8,0h6.5v460.4h-6.5V0z" />
    <path fill="#FEC13F" d="M12.7,546.9C4.7,557.4,0,570.6,0,584.8c0,34.8,28.2,62.9,62.9,62.9c34.8,0,63-28.2,63-62.9
        c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31c1.7-18-9.1-25.5-16.2-25.5H37.7c-7.2,0-17.9,7.5-16.2,25.5
        C23.1,533.8,12.7,546.9,12.7,546.9z" />
    <path fill="#05527D" d="M88.3,490.3v-37.6l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3H54.4c-1.8,0-3.3,1.5-3.3,3.3v5l-13.4,8.4v37.6H88.3
        L88.3,490.3z" />
    <path fill="#024264" d="M51.1,444.3h23.8l13.4,8.4H37.7L51.1,444.3z" />
    <path fill="#FFFFFF" d="M23,598.9c0-5.2,4.2-9.4,9.4-9.4s9.4,4.2,9.4,9.4c0,5.2-4.2,9.4-9.4,9.4C27.3,608.3,23,604.1,23,598.9z
         M70.5,490.3h1.6v34.5l27,40.7l-1.4,0.9l-27.2-41.1L70.5,490.3z M53.8,490.3h1.7v35l-27.3,41.1l-1.4-0.9l27-40.7V490.3z" />
    <path fill="#FFFFFF" d="M71.9,554.6c2,0,4.2,0.8,7.2,2.6c6.2,3.7,13.6,0,13.7,0l0.8,1.5c-0.3,0.2-8.3,4.2-15.3,0
        c-6.4-3.8-8.4-2.7-14.7,1.7c-6.6,4.7-23.1,4.5-30.9-2.2l1.1-1.3c7.1,6.1,22.8,6.4,28.8,2.1C66.4,556.2,69,554.6,71.9,554.6
        L71.9,554.6z" />
    <g>
      <path fill="#024264" d="M37.7,460.9h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.9-1.5,3.3-3.3,3.3H37.7c-1.8,0-3.3-1.5-3.3-3.3
            C34.4,462.4,35.9,460.9,37.7,460.9z" />
    </g>
    <g>
      <path fill="#024264" d="M37.7,475.5h50.6c1.8,0,3.3,1.5,3.3,3.3c0,1.8-1.5,3.3-3.3,3.3H37.7c-1.8,0-3.3-1.5-3.3-3.3
            C34.4,477,35.9,475.5,37.7,475.5z" />
    </g>
    <path opacity="0.1" fill="#010101" enable-background="new    " d="M125.9,584.8c0-14.2-4.7-27.4-12.7-37.9c0,0-10.4-13.1-8.7-31
        c1.7-18-9.1-25.5-16.2-25.5v-8.1c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3v-7.9c1.8,0,3.3-1.5,3.3-3.3c0-1.8-1.5-3.3-3.3-3.3
        V453l-13.4-8.4v-5c0-1.8-1.5-3.3-3.3-3.3H63v211.8C97.7,647.7,125.9,619.5,125.9,584.8L125.9,584.8z" />
  </g>


</svg>
相关问题
最新问题