Question

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/

<!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>

Answer 1

您使用的关键帧不正确。此外，要更改阴影，您应在: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

如何在UI中旋转按钮，使用CSS在悬停时从0度旋转到360度？

1 个答案: