简易平滑轮播(纯CSS) |
您所在的位置：网站首页 › 电视剧轮播怎么弄 › 简易平滑轮播(纯CSS) |
简易平滑轮播(纯CSS)
|
简易平滑轮播
效果图1.外层容器设置2.轮播容器设置3.设置轮播图，并进行遮盖4.使用animation制作平移动画完整代码
效果图
Hello！这里依旧是万物之恋。这次为大家带来的，是前端网页元素中的必备要点之一的“轮播”。 轮播的种类有很多，这次带来的是简易的平滑式轮播，希望能对大家有所帮助吧(轮播真的很难，但也是真的重要)。
接下来就是步骤详解喽！ 1.外层容器设置在css中设置各项参数，容器的大小决定轮播的最终效果，所以最好将容器设定为固定的大小（至少要在可控范围内） .container { width: 500px; height: 350px; margin: 80px auto; background-color: #7FFFD4; border: 2px solid orangered; }效果如图 由于平移轮播的特殊性，这里需要再设置一个存放轮播图的容器 设定各项属性 .swip { width: 500%; height: 350px; background-color: #0000FF; }效果如图 设置轮播盒子大小，需和最外层一致，设置 所有盒子向左浮动，排成一条直线 .swip div { width: 500px; height: 350px; float: left; }给这里轮播不使用图片，用div设置不同的颜色同样可以实现效果 .item1 { background-color: #800080; } .item2 { background-color: #55ff00; } .item3 { background-color: #55ffff; } .item4 { background-color: #55557f; } .item5 { background-color: #ff557f; }效果如图 获得如图效果
将动画添加到父级容器div.swip上 .swip { width: 500%; height: 350px; animation: mySwip 10s linear infinite; }这里设定动画的总时长为10s，即1s过渡时间，1s停滞时间，动画设置为匀速循环播放，一个简单的平移效果轮播就这样制作完成了。 完整代码 DOCTYPE html> 平移轮播 .container { width: 500px; height: 350px; margin: 80px auto; overflow: hidden; border: 2px solid orangered; } .swip { width: 500%; height: 350px; animation: mySwip 15s linear infinite; } .swip div { width: 500px; height: 350px; float: left; } .item1 { background-color: #800080; } .item2 { background-color: #55ff00; } .item3 { background-color: #55ffff; } .item4 { background-color: #55557f; } .item5 { background-color: #ff557f; } @keyframes mySwip { 0% { margin-left: 0; } 10% { margin-left: 0; } 20% { margin-left: -500px; } 30% { margin-left: -500px; } 40% { margin-left: -1000px; } 50% { margin-left: -1000px; } 60% { margin-left: -1500px; } 70% { margin-left: -1500px; } 80% { margin-left: -2000px; } 90% { margin-left: -2000px; } 100% { margin-left: 0; } }想要降低轮播速度的话，加长动画持续时间就可以了。 这里是万物之恋，我们下次再见了！ |
这里可以发现，第二层容器已经远大于最外层容器的限制了。由此可以得知，轮播的关键其实就在这第二层容器。
接下来又是一个关键，遮盖。 给最外层容器添加属性：overflow: hidden;隐藏超出容器范围的元素
【本文地址】
今日新闻 |
推荐新闻 |