您的位置：首页 > Web前端 > CSS

用CSS代码编写简易轮播图

2019-12-25 00:02 1446 查看

废话不多说，直接上代码

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style 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;
}
</style>
</head>
<body>
<div class="container">
<div class="item-box flex">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
</div>
<div class="ico-box flex">
<div class="ico"></div>
<div class="ico"></div>
<div class="ico"></div>
<div class="ico"></div>
<div class="ico"></div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航