-1
我想製作一個滑塊與div,但所有的div粘在一起的動畫。我的意思是,它應該一個接一個地出現。CSS滑塊:與div
我有這樣的:
<div class="mh-footer-menu" id="menu-second_nav">
<div class="slider">
<img src="http://localhost/wordpress/wp-content/uploads/2015/07/4da7ae8be51cdc062177ceaa1b8eba71-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="quienes-somos" width="150" height="150">
<a href="http://localhost/wordpress/?page_id=371">Quienes somos</a>
</div>
<div class="slider">
<img src="http://localhost/wordpress/wp-content/uploads/2016/03/MapaInternet-2015-150x150.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="MapaInternet-2015" width="150" height="150">
<a href="http://localhost/wordpress/?page_id=369">Integrantes</a>
</div>
這:
@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%; }
}
div#menu-second_nav {
background-color: #e64946;
height: 80%;
width: auto;
padding: 2%;
}
div#menu-second_nav { overflow: hidden; }
div#menu-second_nav div.slider { width: 20%; float: left; }
div#menu-second_nav div.slider {
position: relative;
width: 100%;
/*margin: 0;
left: 0;
text-align: left;
font-size: 0;*/
animation: 30s slidy infinite;
}
div#menu-second_nav div.slider a {
color: #000000;
margin-left: 2%;
}
div#menu-second_nav div.slider a:hover {
color: #ffffff;
}
div#menu-second_nav div.slider img {
vertical-align: text-top;
}
我能做些什麼,所以2 div的一一呈現。現在它是這樣的展示: print Screen