SVG 简单动画
SVG simple animations
我正在尝试学习如何使用 SVG 元素,所以我在 Illustrator 中制作了简单的 icon/logo。然后我在示例中使用了这个 SVG 图标:
@import url(http://fonts.googleapis.com/css?family=Lato);
body {
background-color: #2F2724;
font-family: lato, sans-serif;
}
.main {
text-align: center;
}
.letterS {
fill: #fff;
font-size: 180px;
text-shadow: 0px 2px 2px #000;
}
#svgHex {
display: block;
margin: 40px auto;
width: 350px;
}
.slogan {
color: #D0E799;
font-size: 60px;
margin-top: 40px;
margin-bottom: 0px;
text-shadow: 0px 2px 2px #000;
}
.pSlogan {
margin-top: 0px;
font-size: 36px;
color: #fff;
text-shadow: 0px 2px 2px #000;
}
<div class="main">
<svg version="1.1" id="svgHex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="325.099px" height="289.284px" viewBox="-36.337 0 325.099 289.284" enable-background="new -36.337 0 325.099 289.284" xml:space="preserve">
<g id="Layer_2">
<polygon fill="none" stroke="#D0E39A" stroke-width="8" stroke-miterlimit="10" points="4.969,74.618 126.212,4.618
247.455,74.618 247.455,214.618 126.212,284.618 4.969,214.618 " />
</g>
<g>
<polygon display="none" fill="#FFFFFF" points="-4.712,158.921 -36.337,140.662 -36.337,68.452 -3.882,68.452 -4.712,68.931 " />
<polygon fill="#FFFFFF" points="-4.712,171.388 -4.712,201.722 -36.337,183.462 -36.337,153.129 " />
<polygon fill="#FFFFFF" points="21.379,261.787 67.138,261.787 114.762,289.283 69.002,289.283 " />
<polygon fill="#FFFFFF" points="-36.337,228.302 -36.337,195.93 -4.712,214.189 -4.712,220.305 53.858,254.12 8.381,254.12 " />
</g>
<g>
<polygon display="none" fill="#FFFFFF" points="257.137,158.921 288.762,140.662 288.762,68.452 256.307,68.452 257.137,68.931
" />
<polygon fill="#FFFFFF" points="257.137,171.388 257.137,201.722 288.762,183.462 288.762,153.129 " />
<polygon fill="#FFFFFF" points="231.046,261.787 185.286,261.787 137.663,289.283 183.423,289.283 " />
<polygon fill="#FFFFFF" points="288.762,228.302 288.762,195.93 257.137,214.189 257.137,220.305 198.568,254.12 244.044,254.12
" />
</g>
<text transform="matrix(1 0 0 1 78.5125 208.6184)" class="letterS">S</text>
</svg>
<h1 class="slogan">BEST DESIGNS</h1>
<p class="pSlogan">for your bussines</p>
</div>
里面几乎所有代码都是Illustrator生成的。我已将 id="svgHex" 添加到 SVG 并将 class="letterS" 添加到六角形内的 "S" 字母。
现在我想为六边形外的那些白色元素设置动画,但我不知道如何在 CSS 中访问它们。我试图将 class 添加到单个多边形并使用显示进行播放,但到目前为止没有任何效果。我真的不关心任何特定的动画,只是想学习如何使用它们。
我不确定我这样做是好是坏,有更好的方法来制作这种图标动画。
如有任何建议,我们将不胜感激。我是初学者所以请不要讨厌:)
除了@web-tiki 的回答之外,您还可以通过应用 ID 和 类.[=14= 将 :hover
和关键帧动画应用于选定的 'components / elements' SVG ]
例如悬停 "S"。
@import url(http://fonts.googleapis.com/css?family=Lato);
body {
background-color: #2F2724;
font-family: lato, sans-serif;
}
.main {
text-align: center;
}
.letterS {
fill: #fff;
font-size: 180px;
text-shadow: 0px 2px 2px #000;
}
#svgHex {
display: block;
margin: 40px auto;
width: 350px;
}
.slogan {
color: #D0E799;
font-size: 60px;
margin-top: 40px;
margin-bottom: 0px;
text-shadow: 0px 2px 2px #000;
}
.pSlogan {
margin-top: 0px;
font-size: 36px;
color: #fff;
text-shadow: 0px 2px 2px #000;
}
svg text {
transition: fill 0.5s ease;
}
svg text:hover {
fill: red;
}
@keyframes blinky {
0% {
fill: none;
}
100% {
fill: white;
}
}
#vert-l,
#vert-r {
animation: blinky 2s infinite;
}
<div class="main">
<svg version="1.1" id="svgHex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="325.099px" height="289.284px" viewBox="-36.337 0 325.099 289.284" enable-background="new -36.337 0 325.099 289.284" xml:space="preserve">
<g id="Layer_2">
<polygon fill="none" stroke="#D0E39A" stroke-width="8" stroke-miterlimit="10" points="4.969,74.618 126.212,4.618
247.455,74.618 247.455,214.618 126.212,284.618 4.969,214.618 " />
</g>
<g>
<polygon id="vert-l" fill="none" points="-4.712,158.921 -36.337,140.662 -36.337,68.452 -3.882,68.452 -4.712,68.931 " />
<polygon fill="#FFFFFF" points="-4.712,171.388 -4.712,201.722 -36.337,183.462 -36.337,153.129 " />
<polygon fill="#FFFFFF" points="21.379,261.787 67.138,261.787 114.762,289.283 69.002,289.283 " />
<polygon fill="#FFFFFF" points="-36.337,228.302 -36.337,195.93 -4.712,214.189 -4.712,220.305 53.858,254.12 8.381,254.12 " />
</g>
<g>
<polygon id="vert-r" fill="none" points="257.137,158.921 288.762,140.662 288.762,68.452 256.307,68.452 257.137,68.931
" />
<polygon fill="#FFFFFF" points="257.137,171.388 257.137,201.722 288.762,183.462 288.762,153.129 " />
<polygon fill="#FFFFFF" points="231.046,261.787 185.286,261.787 137.663,289.283 183.423,289.283 " />
<polygon fill="#FFFFFF" points="288.762,228.302 288.762,195.93 257.137,214.189 257.137,220.305 198.568,254.12 244.044,254.12
" />
</g>
<text transform="matrix(1 0 0 1 78.5125 208.6184)" class="letterS">S</text>
</svg>
<h1 class="slogan">BEST DESIGNS</h1>
<p class="pSlogan">for your bussines</p>
</div>
我要提一下,如果您在 Illustrator 中使用多个 named 图层,我 相信 这些图层名称会直接导出为 ID进入 SVG 代码。
我正在尝试学习如何使用 SVG 元素,所以我在 Illustrator 中制作了简单的 icon/logo。然后我在示例中使用了这个 SVG 图标:
@import url(http://fonts.googleapis.com/css?family=Lato);
body {
background-color: #2F2724;
font-family: lato, sans-serif;
}
.main {
text-align: center;
}
.letterS {
fill: #fff;
font-size: 180px;
text-shadow: 0px 2px 2px #000;
}
#svgHex {
display: block;
margin: 40px auto;
width: 350px;
}
.slogan {
color: #D0E799;
font-size: 60px;
margin-top: 40px;
margin-bottom: 0px;
text-shadow: 0px 2px 2px #000;
}
.pSlogan {
margin-top: 0px;
font-size: 36px;
color: #fff;
text-shadow: 0px 2px 2px #000;
}
<div class="main">
<svg version="1.1" id="svgHex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="325.099px" height="289.284px" viewBox="-36.337 0 325.099 289.284" enable-background="new -36.337 0 325.099 289.284" xml:space="preserve">
<g id="Layer_2">
<polygon fill="none" stroke="#D0E39A" stroke-width="8" stroke-miterlimit="10" points="4.969,74.618 126.212,4.618
247.455,74.618 247.455,214.618 126.212,284.618 4.969,214.618 " />
</g>
<g>
<polygon display="none" fill="#FFFFFF" points="-4.712,158.921 -36.337,140.662 -36.337,68.452 -3.882,68.452 -4.712,68.931 " />
<polygon fill="#FFFFFF" points="-4.712,171.388 -4.712,201.722 -36.337,183.462 -36.337,153.129 " />
<polygon fill="#FFFFFF" points="21.379,261.787 67.138,261.787 114.762,289.283 69.002,289.283 " />
<polygon fill="#FFFFFF" points="-36.337,228.302 -36.337,195.93 -4.712,214.189 -4.712,220.305 53.858,254.12 8.381,254.12 " />
</g>
<g>
<polygon display="none" fill="#FFFFFF" points="257.137,158.921 288.762,140.662 288.762,68.452 256.307,68.452 257.137,68.931
" />
<polygon fill="#FFFFFF" points="257.137,171.388 257.137,201.722 288.762,183.462 288.762,153.129 " />
<polygon fill="#FFFFFF" points="231.046,261.787 185.286,261.787 137.663,289.283 183.423,289.283 " />
<polygon fill="#FFFFFF" points="288.762,228.302 288.762,195.93 257.137,214.189 257.137,220.305 198.568,254.12 244.044,254.12
" />
</g>
<text transform="matrix(1 0 0 1 78.5125 208.6184)" class="letterS">S</text>
</svg>
<h1 class="slogan">BEST DESIGNS</h1>
<p class="pSlogan">for your bussines</p>
</div>
里面几乎所有代码都是Illustrator生成的。我已将 id="svgHex" 添加到 SVG 并将 class="letterS" 添加到六角形内的 "S" 字母。
现在我想为六边形外的那些白色元素设置动画,但我不知道如何在 CSS 中访问它们。我试图将 class 添加到单个多边形并使用显示进行播放,但到目前为止没有任何效果。我真的不关心任何特定的动画,只是想学习如何使用它们。
我不确定我这样做是好是坏,有更好的方法来制作这种图标动画。
如有任何建议,我们将不胜感激。我是初学者所以请不要讨厌:)
除了@web-tiki 的回答之外,您还可以通过应用 ID 和 类.[=14= 将 :hover
和关键帧动画应用于选定的 'components / elements' SVG ]
例如悬停 "S"。
@import url(http://fonts.googleapis.com/css?family=Lato);
body {
background-color: #2F2724;
font-family: lato, sans-serif;
}
.main {
text-align: center;
}
.letterS {
fill: #fff;
font-size: 180px;
text-shadow: 0px 2px 2px #000;
}
#svgHex {
display: block;
margin: 40px auto;
width: 350px;
}
.slogan {
color: #D0E799;
font-size: 60px;
margin-top: 40px;
margin-bottom: 0px;
text-shadow: 0px 2px 2px #000;
}
.pSlogan {
margin-top: 0px;
font-size: 36px;
color: #fff;
text-shadow: 0px 2px 2px #000;
}
svg text {
transition: fill 0.5s ease;
}
svg text:hover {
fill: red;
}
@keyframes blinky {
0% {
fill: none;
}
100% {
fill: white;
}
}
#vert-l,
#vert-r {
animation: blinky 2s infinite;
}
<div class="main">
<svg version="1.1" id="svgHex" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="325.099px" height="289.284px" viewBox="-36.337 0 325.099 289.284" enable-background="new -36.337 0 325.099 289.284" xml:space="preserve">
<g id="Layer_2">
<polygon fill="none" stroke="#D0E39A" stroke-width="8" stroke-miterlimit="10" points="4.969,74.618 126.212,4.618
247.455,74.618 247.455,214.618 126.212,284.618 4.969,214.618 " />
</g>
<g>
<polygon id="vert-l" fill="none" points="-4.712,158.921 -36.337,140.662 -36.337,68.452 -3.882,68.452 -4.712,68.931 " />
<polygon fill="#FFFFFF" points="-4.712,171.388 -4.712,201.722 -36.337,183.462 -36.337,153.129 " />
<polygon fill="#FFFFFF" points="21.379,261.787 67.138,261.787 114.762,289.283 69.002,289.283 " />
<polygon fill="#FFFFFF" points="-36.337,228.302 -36.337,195.93 -4.712,214.189 -4.712,220.305 53.858,254.12 8.381,254.12 " />
</g>
<g>
<polygon id="vert-r" fill="none" points="257.137,158.921 288.762,140.662 288.762,68.452 256.307,68.452 257.137,68.931
" />
<polygon fill="#FFFFFF" points="257.137,171.388 257.137,201.722 288.762,183.462 288.762,153.129 " />
<polygon fill="#FFFFFF" points="231.046,261.787 185.286,261.787 137.663,289.283 183.423,289.283 " />
<polygon fill="#FFFFFF" points="288.762,228.302 288.762,195.93 257.137,214.189 257.137,220.305 198.568,254.12 244.044,254.12
" />
</g>
<text transform="matrix(1 0 0 1 78.5125 208.6184)" class="letterS">S</text>
</svg>
<h1 class="slogan">BEST DESIGNS</h1>
<p class="pSlogan">for your bussines</p>
</div>
我要提一下,如果您在 Illustrator 中使用多个 named 图层,我 相信 这些图层名称会直接导出为 ID进入 SVG 代码。