SVG旋转与成长

时间：2016-09-20 00:51:10

标签： css svg

这是我的css 

/* --------------------------
  Base
--------------------------- */

body {
  padding-top: 60px;
    background: #0f4e7a;
}

svg {
    margin: auto;
  display: block;
    width: 28%;
}

.star{
  fill: #FFF;
}

/* --------------------------
  Keyframes
--------------------------- */

@keyframes grow2 {
    0% {
        transform: scale(0.5);
    opacity:0;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;

    }
    100% {
        transform: scale(1);
    opacity:1;
    fill: #fdf097;
    }
}


@keyframes rotate2 {
    0% {
        transform: rotate(0deg);

    }
    50% {
        transform: rotate(180deg);


    }
    100% {
        transform: rotate(360deg);
    }
}

/* --------------------------
  SVG Styles
--------------------------- */
.star * {
    transform-origin: 50% 50%;
}




.star {
    animation: grow2 1s forwards, rotate2 1s forwards;
  transform-origin: center;
}

.star:hover {
    animation:  rotate2 1s ease-in forwards;
  transform-origin: center;
}

这是我的HTML 

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="218.8 226.8 258.4 258.3">
        <clippath id="bg">
            <circle cx="348" cy="356" r="129.2"/>
        </clippath>
        <g class="stars" clip-path="url(#bg)">
            <circle class="stars-bg" fill="#3079AB" stroke="#95C7E8" stroke-width="6" stroke-linecap="round" cx="348" cy="356" r="129.2"/>
            <path  class="star"  d="M409.7,337.4c-1.2-1-2.2-1.2-8.4-1c-3,0-6.9,0.2-11.9,0.5c-5.7,0.2-11.4,0.7-14.6,1
                c-1.2-2.5-3.7-6.9-6.4-11.6c-6.9-11.6-9.9-15.3-11.6-17.1c-1.5-2-3.2-1.7-3.7-1.7h-0.2h-0.2c-0.5,0-2.5,0.5-3.2,2.7
                c-1.2,2-3,6.4-6.2,19.5c-1.2,5.2-2.2,10.1-3,12.9c-3,0.7-8.7,2-14.1,3.2c-4.7,1.2-8.7,2.2-11.6,3c-5.7,1.5-6.9,2.2-7.7,3.5
                c-0.7,1-1,2.2-0.5,3.5c0.5,2,2,4.9,15.6,13.4c4.5,2.7,8.7,5.4,11.4,6.9c-0.5,3.2-1.5,9.4-2.5,15.6c-0.7,5.4-1.5,9.6-1.7,12.9
                c-0.7,5.9-0.7,7.9,1.2,9.4c0.7,0.5,1.7,1,3.7,0.7c1.2-0.2,4.5-0.7,18.6-10.9c5.4-4,10.4-7.9,13.1-10.1c3.2,1.2,9.2,3.7,15.3,5.9
                c16.3,5.9,19.5,5.4,20.8,5.2c1.7-0.2,2.7-1.2,3.2-1.7c1.5-2,0.7-4-1.5-9.4c-1.2-3-3-6.9-5.2-11.6c-2.7-5.7-5.4-11.4-6.9-14.3
                c2-2.2,5.4-5.9,8.9-9.9c10.6-12.1,11.4-15.3,11.1-17.3C411.5,339.4,410.7,338.4,409.7,337.4z"/>
            <path class="star" opacity="0.6" fill="#FFFFFF" d="M310.3,334.7c-0.5-0.7-1-1.2-4-2.5c-1.5-0.7-3.5-1.5-6.2-2.5
                c-3-1.2-5.9-2.2-7.7-3c0-1.5-0.2-4.5-0.7-7.4c-0.7-7.4-1.5-10.1-2-11.1c-0.2-1.2-1.2-1.7-1.5-1.7c0,0,0,0-0.2,0c0,0,0,0-0.2,0
                c-0.2,0-1.2-0.2-2.2,0.7c-1,0.7-3,2.5-7.7,8.4c-1.5,2.5-3,4.7-4,5.9c-1.7-0.2-4.7-1-7.9-1.5c-2.7-0.5-4.9-1-6.4-1.2
                c-3.5-0.5-4-0.5-4.7,0c-0.7,0.2-1,1-1.2,1.5c-0.2,1.2,0,3,4.9,10.4c1.5,2.5,3.2,4.7,4.2,6.2c-1,1.5-3,4.5-4.7,7.4
                c-1.7,2.5-3,4.5-3.7,6.2c-1.7,3-2.2,4-1.5,5.2c0.2,0.5,0.7,1,1.7,1.2c0.7,0.2,2.5,0.7,11.9-1.2c3.7-0.7,7.2-1.7,8.9-2.2
                c1.2,1.5,3.7,4,6.4,6.4c6.9,6.7,8.7,7.2,9.4,7.4c1,0.2,1.7,0,2-0.2c1.2-0.7,1.2-1.7,1.5-5.2c0-1.7,0-4.2,0-7.2
                c0-3.5-0.2-6.9-0.2-8.9c1.5-0.7,4.2-1.7,6.7-3c8.2-3.7,9.2-5.2,9.6-6.2C310.5,336.2,310.5,335.5,310.3,334.7z"/>
            <path class="star" opacity="0.4" fill="#FFFFFF" d="M446.1,360.4c-0.5-0.2-0.7-0.2-3-0.2c-1,0-2.5,0.2-4.2,0.5
                c-2,0.2-4,0.5-4.9,0.7c-0.5-0.7-1.5-2.2-2.5-3.7c-2.7-4-3.7-4.9-4.5-5.4c-0.5-0.7-1.2-0.5-1.5-0.5l0,0l0,0c-0.2,0-0.7,0.2-1,1
                c-0.2,0.7-1,2.2-1.7,6.9c-0.2,1.7-0.5,3.5-0.7,4.5c-1,0.2-3,1-4.7,1.5c-1.7,0.5-3,1-4,1.2c-2,0.7-2.2,1-2.5,1.5
                c-0.2,0.2-0.2,0.7,0,1.2c0.2,0.7,0.7,1.5,5.7,4.2c1.5,0.7,3.2,1.7,4,2c0,1.2-0.2,3.2-0.5,5.4c-0.2,1.7-0.2,3.5-0.2,4.5
                c0,2,0,2.7,0.7,3.2c0.2,0.2,0.7,0.2,1.2,0.2c0.5,0,1.5-0.2,6.2-4.2c1.7-1.5,3.5-3,4.2-3.7c1.2,0.2,3.2,1,5.4,1.7
                c5.7,1.5,6.9,1.2,7.2,1.2c0.5-0.2,1-0.5,1-0.7c0.5-0.7,0.2-1.2-0.7-3.2c-0.5-1-1.2-2.2-2.2-4c-1-2-2.2-3.7-2.7-4.7
                c0.7-0.7,1.7-2.2,2.7-3.7c3.2-4.5,3.5-5.4,3.5-6.2C446.6,361.2,446.3,360.7,446.1,360.4z"/>
        </g>
    </svg>

我无法弄清楚如何使旋转和一起工作，而且悬停与它应该做的相反 我的意思是它增长而不是像它想象的那样旋转。

任何建议？

1 个答案:

答案 0 :(得分：0)

问题是您在悬停时覆盖了动画，因此原始动画会重置。

首先，您可以在单个@keyframes规则中合并增长和旋转动画，以便在正常状态下应用。

然后，在悬停时，将新动画（在此示例中为growAndRotate）更改为0次迭代，并仅应用旋转的那个。

代码段： 

/* --------------------------
  Base
--------------------------- */

body {
  padding-top: 60px;
  background: #0f4e7a;
}
svg {
  margin: auto;
  display: block;
  width: 28%;
}
.star {
  fill: #FFF;
}
/* --------------------------
  Keyframes
--------------------------- */

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes growAndRotate {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(0deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5) rotate(180deg);
  }
  100% {
    opacity: 1;
    fill: #fdf097;
    transform: scale(1) rotate(360deg);
  }
}
/* --------------------------
  SVG Styles
--------------------------- */

.star * {
  transform-origin: 50% 50%;
}
.star {
  animation: growAndRotate 1s forwards;
  transform-origin: center;
}
.star:hover {
  animation: growAndRotate 0, rotate2 1s ease-in forwards;
  transform-origin: center;
}
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="218.8 226.8 258.4 258.3">
  <clippath id="bg">
    <circle cx="348" cy="356" r="129.2" />
  </clippath>
  <g class="stars" clip-path="url(#bg)">
    <circle class="stars-bg" fill="#3079AB" stroke="#95C7E8" stroke-width="6" stroke-linecap="round" cx="348" cy="356" r="129.2" />
    <path class="star" d="M409.7,337.4c-1.2-1-2.2-1.2-8.4-1c-3,0-6.9,0.2-11.9,0.5c-5.7,0.2-11.4,0.7-14.6,1
                c-1.2-2.5-3.7-6.9-6.4-11.6c-6.9-11.6-9.9-15.3-11.6-17.1c-1.5-2-3.2-1.7-3.7-1.7h-0.2h-0.2c-0.5,0-2.5,0.5-3.2,2.7
                c-1.2,2-3,6.4-6.2,19.5c-1.2,5.2-2.2,10.1-3,12.9c-3,0.7-8.7,2-14.1,3.2c-4.7,1.2-8.7,2.2-11.6,3c-5.7,1.5-6.9,2.2-7.7,3.5
                c-0.7,1-1,2.2-0.5,3.5c0.5,2,2,4.9,15.6,13.4c4.5,2.7,8.7,5.4,11.4,6.9c-0.5,3.2-1.5,9.4-2.5,15.6c-0.7,5.4-1.5,9.6-1.7,12.9
                c-0.7,5.9-0.7,7.9,1.2,9.4c0.7,0.5,1.7,1,3.7,0.7c1.2-0.2,4.5-0.7,18.6-10.9c5.4-4,10.4-7.9,13.1-10.1c3.2,1.2,9.2,3.7,15.3,5.9
                c16.3,5.9,19.5,5.4,20.8,5.2c1.7-0.2,2.7-1.2,3.2-1.7c1.5-2,0.7-4-1.5-9.4c-1.2-3-3-6.9-5.2-11.6c-2.7-5.7-5.4-11.4-6.9-14.3
                c2-2.2,5.4-5.9,8.9-9.9c10.6-12.1,11.4-15.3,11.1-17.3C411.5,339.4,410.7,338.4,409.7,337.4z" />
    <path class="star" opacity="0.6" fill="#FFFFFF" d="M310.3,334.7c-0.5-0.7-1-1.2-4-2.5c-1.5-0.7-3.5-1.5-6.2-2.5
                c-3-1.2-5.9-2.2-7.7-3c0-1.5-0.2-4.5-0.7-7.4c-0.7-7.4-1.5-10.1-2-11.1c-0.2-1.2-1.2-1.7-1.5-1.7c0,0,0,0-0.2,0c0,0,0,0-0.2,0
                c-0.2,0-1.2-0.2-2.2,0.7c-1,0.7-3,2.5-7.7,8.4c-1.5,2.5-3,4.7-4,5.9c-1.7-0.2-4.7-1-7.9-1.5c-2.7-0.5-4.9-1-6.4-1.2
                c-3.5-0.5-4-0.5-4.7,0c-0.7,0.2-1,1-1.2,1.5c-0.2,1.2,0,3,4.9,10.4c1.5,2.5,3.2,4.7,4.2,6.2c-1,1.5-3,4.5-4.7,7.4
                c-1.7,2.5-3,4.5-3.7,6.2c-1.7,3-2.2,4-1.5,5.2c0.2,0.5,0.7,1,1.7,1.2c0.7,0.2,2.5,0.7,11.9-1.2c3.7-0.7,7.2-1.7,8.9-2.2
                c1.2,1.5,3.7,4,6.4,6.4c6.9,6.7,8.7,7.2,9.4,7.4c1,0.2,1.7,0,2-0.2c1.2-0.7,1.2-1.7,1.5-5.2c0-1.7,0-4.2,0-7.2
                c0-3.5-0.2-6.9-0.2-8.9c1.5-0.7,4.2-1.7,6.7-3c8.2-3.7,9.2-5.2,9.6-6.2C310.5,336.2,310.5,335.5,310.3,334.7z" />
    <path class="star" opacity="0.4" fill="#FFFFFF" d="M446.1,360.4c-0.5-0.2-0.7-0.2-3-0.2c-1,0-2.5,0.2-4.2,0.5
                c-2,0.2-4,0.5-4.9,0.7c-0.5-0.7-1.5-2.2-2.5-3.7c-2.7-4-3.7-4.9-4.5-5.4c-0.5-0.7-1.2-0.5-1.5-0.5l0,0l0,0c-0.2,0-0.7,0.2-1,1
                c-0.2,0.7-1,2.2-1.7,6.9c-0.2,1.7-0.5,3.5-0.7,4.5c-1,0.2-3,1-4.7,1.5c-1.7,0.5-3,1-4,1.2c-2,0.7-2.2,1-2.5,1.5
                c-0.2,0.2-0.2,0.7,0,1.2c0.2,0.7,0.7,1.5,5.7,4.2c1.5,0.7,3.2,1.7,4,2c0,1.2-0.2,3.2-0.5,5.4c-0.2,1.7-0.2,3.5-0.2,4.5
                c0,2,0,2.7,0.7,3.2c0.2,0.2,0.7,0.2,1.2,0.2c0.5,0,1.5-0.2,6.2-4.2c1.7-1.5,3.5-3,4.2-3.7c1.2,0.2,3.2,1,5.4,1.7
                c5.7,1.5,6.9,1.2,7.2,1.2c0.5-0.2,1-0.5,1-0.7c0.5-0.7,0.2-1.2-0.7-3.2c-0.5-1-1.2-2.2-2.2-4c-1-2-2.2-3.7-2.7-4.7
                c0.7-0.7,1.7-2.2,2.7-3.7c3.2-4.5,3.5-5.4,3.5-6.2C446.6,361.2,446.3,360.7,446.1,360.4z" />
  </g>
</svg>

相关问题
最新问题