我想創建一個SVG懸停動畫效果使用CSS。SVG旋轉虛線圓形邊框上懸停
我想要做的是,當我將鼠標懸停在我的圖標上時,實心圓形容器將以虛線容器旋轉。見下圖。
檢查什麼我迄今所做的:http://jsfiddle.net/uhkwLuph/3/
到目前爲止,這裏是我的代碼。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon">
<style type="text/css">
.st0
{
fill:none;
stroke:#F2F2F2;
stroke-width:4;
stroke-miterlimit:10;
}
#icon .st0{
-webkit-transition: .5s;
}
#icon:hover .st0{
fill: #ffffff;
stroke: #1f8a4c;
cursor: pointer;
}
</style>
<g id="container">
<circle class="st0" cx="101" cy="99" r="89.333"/>
</g>
<g id="icon-details">
<path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
<circle class="st0" cx="77.843" cy="72.434" r="33.331"/>
<circle class="st0" cx="77.844" cy="72.434" r="22.343"/>
</g>
</svg>
據我所知,它可以與獲得中風dasharray和中風偏移+ @keyframes(CSS),但任何人都可以點我怎麼才能實現呢?
這裏的JSFIDDLE:
我不是在這裏爲你做的,但我想推動你在正確的方向**如果**你告訴我你的嘗試。 – Nick 2014-12-19 08:22:56
嗨尼克謝謝你的答覆。這是我到目前爲止所嘗試的。然而,我沒有得到我想要的:http://jsfiddle.net/uhkwLuph/3/試圖調整發現沒有運氣。 – 2014-12-19 08:30:40
@Kimberly Wright看看我的答案是虛線邊框和單個元素。 – 2014-12-19 09:23:48