CSS3animation动画----轮播图
程序员文章站
2024-03-24 12:55:16
...
轮播图图片尺寸520*280
第一种方式：
主要是运用css3新增animation属性实现从右往左滑轮播效果
body中的图片换行放置会存在间隙，添加浮动使其在同一行显示；图片放在同一行则不需要浮动。
animation: change 10s ease infinite;
四个值分别表示：动画名称 动画持续的时间 动画的速度(ease是先加速后减速) 动画播放的次数(infinite表示无限)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style type="text/css">
.box {
width: 520px;
height: 280px;
overflow: hidden;
}
.box>div {
width: 2600px;
animation: change 10s ease infinite;
}
.box img {
float: left;
}
@keyframes change {
0%{
margin-left: 0;
}
25%{
margin-left: -520px;
}
50%{
margin-left: -1040px;
}
75%{
margin-left: -1560px;
}
100%{
margin-left: -2080px;
}
}
</style>
</head>
<body>
<div class="box">
<div>
<img src="img/butian001.jpg"/>
<img src="img/butian002.jpg"/>
<img src="img/butian003.jpg"/>
<img src="img/butian004.jpg"/>
<img src="img/butian005.jpg"/>
</div>
</div>
</body>
</html>
第二种方式（此方法较为简单易懂）
主要是运用css3新增animation属性实现从交叉溶解轮播效果
为避免图片轮播时出现跳动或闪烁的情况，将轮播图添加至背景图片，逗号隔开。
background-image:url(img/butian001.jpg),url(img/butian002.jpg),url(img/butian003.jpg),url(img/butian004.jpg),url(img/butian005.jpg);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.box{
width: 520px;
height: 280px;
margin: 0 auto;
background-image: url(img/butian001.jpg),url(img/butian002.jpg),url(img/butian003.jpg),url(img/butian004.jpg),url(img/butian005.jpg);
animation: change 10s ease infinite;
}
@keyframes change {
0%{
background-image: url(img/butian001.jpg);
}
25%{
background-image: url(img/butian002.jpg);
}
50%{
background-image: url(img/butian003.jpg);
}
75%{
background-image: url(img/butian004.jpg);
}
100%{
background-image: url(img/butian005.jpg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
下一篇： Spring：基于xml和注解的aop