废话不多说, 直接上代码
- charset="utf-8" />
- type="text/CSS">
- .container{ width: 1000px; height: 500px; margin: 50px auto; overflow:
- hidden; background: skyblue; } .flex{ display: flex; } .item-box{ animation:
- my-CSS 5s infinite; -webkit-animation: my-CSS 5s infinite; -o-animation:
- my-CSS 5s infinite; -moz-animation: my-CSS 5s infinite; animation-direction:
- alternate; -webkit-animation-direction: alternate; -o-animation-direction:
- alternate; -moz-animation-direction: alternate; } .item-box:hover{ animation-play-state:
- paused; -webkit-animation-play-state: paused; -o-animation-play-state:
- paused; -moz-animation-play-state: paused; } .item-box div{ width: 1000px;
- height: 450px; flex-shrink: 0; } .item1{ background: pink; } .item2{ background:
- brown; } .item3{ background: red; } .item4{ background: yellow; } .item5{
- background: green; } @keyframes my-CSS{ 0% { transform: translate(0%);
- } 25% { transform: translate(-100%); } 50% { transform: translate(-200%);
- } 75% { transform: translate(-300%); } 100% { transform: translate(-400%);
- } } @-webkit-keyframes my-CSS{ 0% { transform: translate(0%); } 25% { transform:
- translate(-100%); } 50% { transform: translate(-200%); } 75% { transform:
- translate(-300%); } 100% { transform: translate(-400%); } } @-o-keyframes
- my-CSS{ 0% { transform: translate(0%); } 25% { transform: translate(-100%);
- } 50% { transform: translate(-200%); } 75% { transform: translate(-300%);
- } 100% { transform: translate(-400%); } } @-moz-keyframes my-CSS{ 0% {
- transform: translate(0%); } 25% { transform: translate(-100%); } 50% {
- transform: translate(-200%); } 75% { transform: translate(-300%); } 100%
- { transform: translate(-400%); } } .ico-box{ width: 30%; height: 30px;
- justify-content: space-around; align-items: center; margin: 10px auto;
- } .ico-box div{ height: 10px; width: 20px; border-radius: 10px; background:
- #fff; transition: width 0.5s; } .ico-box div:hover{ width: 40px; background:
- pink; }
- class="container">
- class="item-box flex">
- class="item1">
- class="item2">
- class="item3">
- class="item4">
- class="item5">
- class="ico-box flex">
- class="ico">
- class="ico">
- class="ico">
- class="ico">
- class="ico">
来源: http://www.bubuko.com/infodetail-3348798.html