1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html网页简单实现图片轮播效果 CSS3简单实现图片切换轮播

html网页简单实现图片轮播效果 CSS3简单实现图片切换轮播

时间:2020-12-05 12:22:47

相关推荐

html网页简单实现图片轮播效果 CSS3简单实现图片切换轮播

HTML代码:

ABC

CSS代码:.pic-switch{

width: 500px;

height: 300px;

margin: 0px auto;

border: 5px solid #CCCCCC;

border-radius: 5px;

overflow: hidden;

}

.pic-switch .pic{

background-color: #009688;

height: 100%;

width: 100%;

text-align: center;

display: table;

}

.pic-switch .pic span{

color: #FFFFFF;

font-size: 60px;

display: table-cell;

vertical-align: middle;

}

.pic-switch .pic:nth-child(2){

background-color: #5FB878;

}

.pic-switch .pic:nth-child(3){

background-color: #FF5722;

}

.pic{

animation: one 12s linear 0s infinite normal;

position: relative;

}

@keyframes one{

0%,30% {

top: 0px;

}

35%,65% {

top: -300px;

}

70%,100% {

top: -600px;

}

}

效果截图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。