Question

我正在使用伪类和关键帧来进行图像的滑动动画，但我无法在浏览器上渲染动画。请帮我调试这段代码。提前致谢：）。

<html>
    <style>
          #fullimage > li:target {    
            animation: slideImage 50s linear; 
            -webkit-animation: slideImage 50s linear;
            -moz-animation: slideImage 50s linear;
          }

         @keyframes slideImage {
            from { left: -700px; }
            to { left: 0px; }
         }

         @-webkit-keyframes slideImage {
            from {left: -700px; }
            to {  left: 0px; }
        }

        @-moz-keyframes slideImage { 
           from {left: -700px; }
           to {  left: 0px; }
       }
    </style>

    <body>
            <div id="wrapper">

                <ul id="fullimage">
                    <li id="a">
                        <img src ="a.jpg" />
                    </li>
                    <li id="b">
                        <img src ="images/b.jpg" />
                    </li>
                    <li id="c">
                        <img src ="c.jpg" />
                    </li>
                </ul>

                <ul id="thumbimage">
                    <li>
                        <a href="#a">
                            First one
                        </a>
                    </li>

                    <li>
                        <a href="#b">
                            Second one
                        </a>
                    </li>

                    <li>
                        <a href="#c">
                            Third one
                        </a>
                    </li>
                </ul>

            </div>
    </body>
</html>

Answer 1

您的动画和关键帧代码看起来很好，但您需要设置position属性才能使left正常工作。

#fullimage > li:target {
    position: relative;
}

jsfiddle

使用伪类类的关键帧不起作用

1 个答案: