我正在基于以下代码在 wordpress 中实现一个仅 css slider (无 jquery):http://codepen.io/dudleystorey/pen/kFoGw
slider 在 safari 中没有进行转换的问题,在其他浏览器(如 chrome、FF)中工作正常。
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="http://localhost/wp/wp-content/uploads/2015/09/utah-peak.jpg" alt>
<figcaption>Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.</figcaption> </figure>
<figure>
<img src="http://localhost/wp/wp-content/uploads/2015/09/hobbiton-lake.jpg" alt>
<figcaption>Utah Mountains Valley in United States</figcaption> </figure>
...
</figure>
</div>
和CSS规则
/* Frontpage Slider */
@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 {
margin: 0;
font-family: sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 500%;
font-size: 0; animation: 20s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute; top:30%; left:10%; width:75%; text-align:center;
line-height: 160%;
background: rgba(0,0,0,0.3);
color: #fff;
font-size: 3vw; padding: .6rem;
}
codepen 中的 slider 示例在 safari 中运行良好,但我的代码中存在问题。
我正在像这样连接 wordpress 中的所有样式表和脚本(注意顺序)
wp_enqueue_style('pure-min', get_template_directory_uri().'/pure/pure-min.css');
wp_enqueue_style('pure-responsive-min', get_template_directory_uri().'/pure/grids-responsive-min.css');
wp_enqueue_style( 'default', get_stylesheet_uri() ); // default stylesheet
wp_register_style('ezy-font-light','http://fonts.googleapis.com/css?family=Raleway:300|Oswald:300');
wp_register_style('ezy-font-dark','http://fonts.googleapis.com/css?family=Raleway|Oswald');
wp_enqueue_style('css-font-awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
最佳答案
需要添加-webkit-
前缀。
@-webkit-keyframes slidy {
和
-webkit-animation: slidy 5s;
学习所有前缀:
https://css-tricks.com/snippets/css/keyframe-animation-syntax/
关于html - CSS slider 动画不能只在 safari 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32569654/