CSS定位圖像

Question

我需要將魚的右下方的箭頭放在我的比例尺面部內。我製作了這兩個獨立的圖像，因爲我想讓箭頭從0度移動到270度。

我已經得到了動畫工作，但現在我有點卡在如何將其放置在我的規模內。這是移動的第一個版本（網站必須是響應式的），所以我很擔心，如果我改變比例（將會有5個比例），站在彼此之下並且彼此相鄰，那麼這些職位就會變得混亂起來。

另外，有沒有一種方法可以告訴動畫，只有當你將鼠標懸停在CSS上才能播放？或者我必須使用JavaScript/jQuery來做到這一點？

CSS3：

#bluearrow{ 
    animation: animationFrames ease 4s; 
    animation-iteration-count: 1; 
    transform-origin: 50% 100%; 
    animation-fill-mode:forwards; /*when the spec is finished*/ 
    -webkit-animation: animationFrames ease 4s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-transform-origin: 50% 100%; 
    -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
    -moz-animation: animationFrames ease 4s; 
    -moz-animation-iteration-count: 1; 
    -moz-transform-origin: 50% 100%; 
    -moz-animation-fill-mode:forwards; /*FF 5+*/ 
    -o-animation: animationFrames ease 4s; 
    -o-animation-iteration-count: 1; 
    -o-transform-origin: 50% 100%; 
    -o-animation-fill-mode:forwards; /*Not implemented yet*/ 
    -ms-animation: animationFrames ease 4s; 
    -ms-animation-iteration-count: 1; 
    -ms-transform-origin: 50% 100%; 
    -ms-animation-fill-mode:forwards; /*IE 10+*/ 
} 

@keyframes animationFrames{ 
    0% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    transform: rotate(0deg) scaleX(1) scaleY(1) ; 
    } 
    100% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    transform: rotate(270deg) scaleX(1) scaleY(1) ; 
    } 
} 

@-moz-keyframes animationFrames{ 
    0% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -moz-transform: rotate(0deg) scaleX(1) scaleY(1) ; 
    } 
    100% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -moz-transform: rotate(270deg) scaleX(1) scaleY(1) ; 
    } 
} 

@-webkit-keyframes animationFrames { 
    0% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -webkit-transform: rotate(0deg) scaleX(1) scaleY(1) ; 
    } 
    100% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -webkit-transform: rotate(270deg) scaleX(1) scaleY(1) ; 
    } 
} 

@-o-keyframes animationFrames { 
    0% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -o-transform: rotate(0deg) scaleX(1) scaleY(1) ; 
    } 
    100% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -o-transform: rotate(270deg) scaleX(1) scaleY(1) ; 
    } 
} 

@-ms-keyframes animationFrames { 
    0% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -ms-transform: rotate(0deg) scaleX(1) scaleY(1) ; 
    } 
    100% { 
    left:0px; 
    top:0px; 
    opacity:1; 
    -ms-transform: rotate(270deg) scaleX(1) scaleY(1) ; 
    } 
} 

#bluescale{ 
    position: absolute; 
} 

HTML：

<section id="Skills"> 

    <h3>Html/css</h3> 
    <img alt="blue scale" id="scale_blue" src="images/bluescale.svg"> 
    <img alt="blue scale" id="bluearrow" src="images/bluearrow.svg"> 
    <h3>Jquery</h3> 
    <img alt="pink scale" id="scale_pink" src=""> 
    <h3>Javascript</h3> 
    <img alt="purple scale" id="scale_purple" src=""> 
    <h3>Photoshop</h3> 
    <img alt="green scale" id="scale_green" src=""> 
    <h3>Illustrator</h3> 
    <img alt="orange scale" id="scale_orange" src=""> 


</section><!--/skills--> 

這裏是我的代碼的其餘部分：

http://jsfiddle.net/29yuj/

我有兩個css文件。不知道如何上傳兩個小提琴。第二個css文件發佈在我的問題中。基本上只是我的動畫

Answer 1

添加以下CSS：

#skills{ position: relative; } 

而且

#scale_blue{ position: absolute; top: 10px; left: 10px; } 
#bluearrow{ position: absolute; top: 10px; left: 10px; } 

然後，調整前&留給兩個元素，以滿足您的需求。