Question

我遇到一个简单的CSS3幻灯片放映问题。它在Chrome中不起作用，但我使用的是-webkit-prefix。

这是我的HTML代码：

<html>
<head>
    <meta name="keywords" lang="en-us" content="autonomous,rover,rccar,embedded,slam" />
    <meta name="robots" content="all" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="content-language" content="en-us" />
    <link rel="stylesheet" href="styles/desktop.css" />
    <link rel="stylesheet" href="styles/header.css" />
    <link rel="stylesheet" href="styles/navigation.css" />
</head>
<body>
    <div id="header">
        <figure class="slider">
<figure><img src="http://localhost:8000/images/chassis_empty.jpg" alt="Tamyia TT-02 Type S on-road"><figcaption>Tamyia TT-02 Type S on-road</figcaption></figure>
<figure><img src="http://localhost:8000/images/chassis_remote.jpg" alt="Tamyia TT-02 Type S on-road"><figcaption>Tamyia TT-02 Type S on-road</figcaption></figure>
<figure><img src="http://localhost:8000/images/chassis_second_level.jpg" alt="Tamyia TT-02 Type S with 2nd level for sensors and computer"><figcaption>Tamyia TT-02 Type S with 2nd level for sensors and computer</figcaption></figure>
<figure><img src="http://localhost:8000/images/chassis_second_body.jpg" alt="TT-02 Type S modifications with brushed VW Scirocco body"><figcaption>TT-02 Type S modifications with brushed VW Scirocco body</figcaption></figure>
<figure><img src="http://localhost:8000/images/chassis_empty.jpg" alt="Tamyia TT-02 Type S on-road"><figcaption>Tamyia TT-02 Type S on-road</figcaption></figure>               
</figure>
    </div>
    <div id="navigation">
        <ul id="menubar">
            <li><a href="index.php?site=Home">Home</a></li>                  
<li><a href="index.php?site=About">About</a></li>                
<li><a href="index.php?site=Hardware">Hardware</a></li>                
<li><a href="index.php?site=Framework">Framework</a></li>                
<li><a href="index.php?site=Algorithms">Algorithms</a></li>            
</ul>
    </div>    </body>

这是相应的CSS样式表：

@-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

figure.slider {
margin: 0;
background: #808080;
font-family: Arial, sans-serif;
font-weight: 100;
}

div#header {
width: 100%;
height: 400px;
overflow: hidden;
}

figure.slider {
position: relative;
width: 500%;
font-size: 0;
animation: 30s slidy infinite;
-webkit-animation: 30s slidy infinte;
}

figure.slider figure {
width: 20%;
height: 400px;
display: inline-block;
position: inherit;
}

figure.slider img {
width: 100%;
height: auto;
margin-top: -200px;
}

figure.slider figure figcaption {
position: absolute;
bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff;
width: 100%;
font-size: 2rem;
padding: .6rem;
}

我找不到错误。我想念一些-webkit-part？

CSS3幻灯片在Chrome中不起作用

0 个答案: