【案例】CSS3animation动画----轮播图

最新推荐文章于 2023-04-10 20:55:27 发布

不甜呐

最新推荐文章于 2023-04-10 20:55:27 发布

阅读量601

点赞数

分类专栏：案例文章标签：前端 css3 animation

@不甜呐

本文链接：https://blog.csdn.net/weixin_55992854/article/details/116453643

版权

案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

轮播图图片尺寸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>

不甜呐

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【案例】CSS3animation动画----轮播图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> .box { width: 520px; height: 280px; overflow: hidden; } .box>div { width: 2600px; animation: ch
复制链接

扫一扫