自动旋转滑块
作者：互联网
自动旋转滑块
自动旋转滑块免费下载 在 HTML、CSS 和 JavaScript 中
HTML：
<div class="container">
<div class="slider">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
<div class="box5">
</div>
<div class="box6">
</div>
<div class="box7">
</div>
</div>
</div>
<div id="test"></div>
您还可以下载： HTML 和 CSS 中的文本动画效果
CSS：
。容器{
宽度：100vw；
高度：80vh；
显示：弹性；
证明内容：中心；
对齐项目：中心；
}
.滑块{
高度：750px；
宽度：100vw；
显示：弯曲；
视角：1000px；
位置：相对；
对齐项目：中心；
}
.box1{ background:url('https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box2{
背景：url('https://images.pexels.com/photos/2559941/pexels-photo-2559941.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box3{
背景：url('https://images.pexels.com/photos/2356059/pexels-photo-2356059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box4{
背景：url('https://images.pexels.com/photos/3274903/pexels-photo-3274903.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box5{
背景：url('https://images.pexels.com/photos/3618162/pexels-photo-3618162.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box6{
背景：url('https://images.pexels.com/photos/4256852/pexels-photo-4256852.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；}
.box7{
背景：url('https://images.pexels.com/photos/1891234/pexels-photo-1891234.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
背景尺寸：封面；
背景位置：中心中心；} .slider [class*="box"] {
/* 向左飘浮; */
溢出：隐藏；
边框半径：20px；
过渡：所有 1s 三次贝塞尔曲线（0.68，-0.6，0.32，1.6）；
位置：绝对；
}
.slider [class*="box"]:nth-child(7),
.slider [class*="box"]:nth-child(1) {
宽度：100vh；
高度：60vh；
变换：缩放（0.2）平移（-50%，-50%）；
前10名％;
z-索引：1；
}
.slider [class*="box"]:nth-child(2),
.slider [class*="box"]:nth-child(6) {
宽度：100vh；
高度：60vh；
变换：缩放（0.4）平移（-50%，-50%）；
最高：20%；
z-索引：2；
}
.slider [class*="box"]:nth-child(3),
.slider [class*="box"]:nth-child(5) {
宽度：100vh；
高度：60vh；
变换：缩放（0.6）平移（-50%，-50%）；
最高：30%；
z-索引：3；
}
.slider [class*="box"]:nth-child(4) {
宽度：60vw；
高度：60vh；
边框颜色：#c92026；
颜色：#fff;
变换：缩放（1）平移（-50%，-50%）；
最高：50%；
z-索引：4；
}
.slider [class*="box"]:nth-child(1){
左：-13%；}
.slider [class*="box"]:nth-child(2){
左：-5%；}
.slider [class*="box"]:nth-child(3){
左：10%；}
.slider [class*="box"]:nth-child(4){
左：50%；}
.slider [class*="box"]:nth-child(5){
左：71%；}
.slider [class*="box"]:nth-child(6){
左：85%；}
.slider [class*="box"]:nth-child(7){
左：100%；}
.slider .firstSlide {
-webkit-animation：firstChild 1s；
动画：firstChild 1s；
}
/*买家登陆页面滑块动画*/
@-webkit-keyframes firstChild {
0% {左：100%;变换：比例（0.2）翻译（-50%，-50%）；}
100% {左：-13%；变换：比例（0.2）翻译（-50%，-50%）；}
}
@keyframes firstChild {
0% {左：100%;变换：比例（0.2）翻译（-50%，-50%）；}
100% {左：-13%；变换：比例（0.2）翻译（-50%，-50%）；}
}
JavaScript：
函数旋转（）{
var lastChild = $('.slider div:last-child').clone();
/*$('#test').html(lastChild)*/
$('.slider div').removeClass('firstSlide')
$('.slider div:last-child').remove();
$('.slider').prepend(lastChild)
$(lastChild).addClass('firstSlide')
} window.setInterval(function(){
旋转（）
}, 4000);
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 自动旋转滑块片段
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
本文链接：https://www.qanswer.top/14324/12530500
标签：box,pexels,滑块,50%,旋转,slider,自动,child,class 来源： https://www.cnblogs.com/amboke/p/16656628.html