轮播图在电商方面应用的非常广泛,那么该如何去写呢?接下来我们就看一下制作轮播图(bannner)的详细方法。
所谓轮播图就是将n张图面进行一个移动切换;
废话不多说上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
.banner {
width: 500px;
height: 300px;
overflow: hidden;
}
.box {
width: 400%;
height: 300px;
animation: banner 5s infinite;
}
.box img {
width: 25%;
height: 300px;
float: top;
}
@keyframes banner {
0% {
margin-left: 0px;
}
33.3% {
margin-left: -100%;
}
66.6% {
margin-left: -200%;
}
100% {
margin-left: -300%;
}
}
</style>
</head>
<body>
<div class="banner">
<div class="box">
<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
<img src="41c406dcb2f628db97bc64bf84c6e906_38bf42ad37a6eba0b927e10e8d544ac498e9c4c0.jpg" alt="">
</div>
</div>
<!-- 动画:
animation: 名称 过渡时间 方式 次数 开始时间;
名称 要和规则的名称一致
过渡时间 一次动画所用到的时间 s
方式 linear 平缓
ease 默认,慢 - 快 - 慢
次数 数字 或 infinite无限的
开始时间 几秒后开始 s
规则
@keyframes 名称{
from{ 开始时的样式 }
to{ 结束时的样式 }
}
@keyframes box{
0%{ }
25%{ }
50%{ }
75%{ }
100%{ }
}
-->
</body>
</html>
css的轮播图动画呢是自动轮播他的原理也很简单 他主要就是animation和keyframes ,transform:translate();的应用