css和html实现简单的图片轮播效果
Posted ZhangJiQun.
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css和html实现简单的图片轮播效果相关的知识，希望对你有一定的参考价值。
目录
滑动轮播图
效果直接保存本地 html 双击打开可看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.one {
position: absolute;
width: 300px;
height: 300px;
overflow: hidden;
}
.one_cantent img {
width: 300px;
height: 300px;
float: left;
}
.one_cantent {
width: 1500px;
height: 300px;
position: absolute;
left: 0px;
animation-name: move;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes move {
0% {
left: 0px;
}
25% {
left: -300px;
}
50% {
left: -600px;
}
75% {
left: -900px;
}
100% {
left: -1200px
}
}
</style>
</head>
<body>
<div class="one">
<div class="one_cantent">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/113.png">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/114.png">
</div>
</div>
</body>
</html>
渐变效果实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
.one img{
position: absolute;
width: 200px;
height:300px;
}
.two img{
position: absolute;
width: 200px;
height: 300px;
}
.three img{
position: absolute;
width: 200px;
height:300px;
}
.three {
animation-name: cantoons;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.two {
animation-name: cantoons2;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.one {
animation-name: cantoons1;
animation-duration: 10s;
animation-iteration-count: infinite;
}
@keyframes cantoons{
0% {
opacity: 1;
}
35% {
opacity: 0;
}
70% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes cantoons2{
0% {
opacity: 0;
}
35% {
opacity: 1;
}
70% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes cantoons1{
0% {
opacity: 0;
}
35% {
opacity: 0;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="one">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/115.png" alt="">
</div>
<div class="two">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/112.png" alt="">
</div>
<div class="three">
<img src="http://yide.sdpssfjd.com/assets/addons/wwh/images/111.png" alt="">
</div>
</body>
</html>
以上是关于css和html实现简单的图片轮播效果的主要内容，如果未能解决你的问题，请参考以下文章