如何旋轉UI中的按鈕以使用CSS懸停從0度旋轉至360度？

I have five buttons in the UI with their respective inner box shadows. I want them to rotate individually when hovered upon. Now when I hover over one even the adjacent button is also rotating accordingly . And also the inner shadow should make a smooth transition inside the buttons ? Why is not that happening? Where am I mistaken?

http://jsfiddle.net/EP3Ps/如何旋轉UI中的按鈕以使用CSS懸停從0度旋轉至360度？

<!DOCTYPE html> 
<html> 
<head> 

    <title>jQuery UI Dialog: Hide the Close Button/Title Bar</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 

    <style type="text/css"> 

     .mySlider 
     { 
      // 
     } 

     .shadow_div 
     { 
      // 
     } 

     .mySlider img 
     { 
      width:800px; 
      height:480px; 
      display:none; 

     } 

     .Parent_Slider > a 
     { 
      // 
     } 

     .Next_Class 
     { 
      // 
     } 

     .Prev_Class 
     { 
      // 
     } 

     ul.Round_Buttons 
     { 
      position:relative; 
      left:40%; 
      top:5px; 
      text-decoration:none; 
      list-style-type:none; 
      text-indent:-9999px 
     } 

     ul.Round_Buttons li 
     { 
      float:left; 
      background-color:#d1bfbf; 
      margin:1px 5px; 
      padding:0px 7px; 
      border-radius:50%; 
      border-width:1px; 
      border-style:solid; 
      cursor:pointer; 
      box-shadow:inset 1px 1px 1px 1px #f00; 
      transition:all 1s ease-in-out; 
      -moz-transition:all 1s ease-in-out; 
      -webkit-transition:all 1s ease-in-out; 

     } 

     ul.Round_Buttons li:hover 
     { 
      transform:rotate(-360deg); 
      -webkit-transform:rotate(-360deg); 
      -moz-transform:rotate(-360deg); 
     } 

     @-webkit-keyframes rotate 
     { 
      from 
      { 
       transform : rotate(0deg); 
      } 
      to 
      { 
       transform :rotate(-360deg); 

      } 

     } 

     @keyframes rotate 
     { 
      from 
      { 
       transform: rotate(0deg); 
      } 
      to 
      { 
       transform: rotate(-360deg); 
      } 
     } 

    </style> 

<script type="text/javascript"> 
// 




</script> 
</head> 

<body> 
<div class="Parent_Slider"> 
    <div id="my_image_slider" class="mySlider"> 
     <img id="1" src="Images/bmw.jpg" alt="" title="Audi India"/> 
     <img id="2" src="Images/audi.jpg" alt="" title="BMW India" /> 
     <img id="3" src="Images/aston-martin.jpg" alt="" title="Aston-Martin APAC" /> 
     <img id="4" src="Images/bugatti.jpg" alt="" title="Buggatti APAC" /> 
     <img id="5" src="Images/koenigsegg.jpg" alt="" title="Koenigsegg APAC" /> 
    </div> 
    <a href="#" class="Next_Class">Next</a> 
    <a href="#" class="Prev_Class">Prev</a> 
</div> 
    <div class="shadow_div" > 
     <ul class="Round_Buttons"> 
      <li id="1st_Round"><a href="#">1</a></li> 
      <li id="2nd_Round"><a href="#">2</a></li> 
      <li id="3rd_Round"><a href="#">3</a></li> 
      <li id="4th_Round"><a href="#">4</a></li> 
      <li id="5th_Round"><a href="#">5</a></li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2014-05-08 recmach

我想你的小提琴，而每個按鈕inddependently rotaing對我來說，對陰影 - 你是不是改變它'：懸停'，所以你沒有平滑過渡它 – paulitto

但其上一個按鈕也旋轉...我不想那..我只想要那個按鈕來旋轉？ – recmach

你沒有正確使用關鍵幀。此外，爲了使陰影更改，您應該在:hover上添加新陰影的規則。

應該是這樣的：

ul.Round_Buttons li:hover 
{ 
    animation:rotate 1s; 
    -webkit-animation:rotate 1s; 
    -moz-animation:rotate 1s; 
    box-shadow:inset 1px 1px 1px 10px #f00; 
}

看到更新fiddle

來源

2014-05-08 08:40:08 paulitto

如何旋轉UI中的按鈕以使用CSS懸停從0度旋轉至360度？

回答

相關問題