有兽档案馆
搜索
切换搜索
切换菜单
切换个人菜单
查看“User:顶呱呱的阿杰/swiper.css”的源代码
来自有兽档案馆
阅读
查看源代码
查看历史
用户页
讨论
更多操作
←
User:顶呱呱的阿杰/swiper.css
因为以下原因,您没有权限编辑该页面:
您所请求的操作,仅限具有
注册用户
、
自动确认用户
、
管理员
、
界面管理员
、
优质编辑者
、
确认用户
、
巡查员
、
档案理事员
等
权限
的
用户
执行。
若您尚未登录有兽档案馆账号,请您
登录
有兽档案馆账号后操作。
您没有权限编辑此CSS页面,因为此页面包含另一位用户的个人设置。
您尚未完成电子邮件确认,因此操作受限,请尽快
完成电子邮件确认
。
若您无法完成前述手续,请通过适当渠道请求管理员或档案理事员协助。
您可以查看和复制此页面的源代码。
若您无权编辑本页面,您可以
提出编辑请求
,提请有权限者代为编辑。
/* 手动轮播样式 */ .banner-container{ width:1200px; height:400px; margin:1rem auto; overflow: hidden; position: relative; } .banner-container .banner-img-container { width:6000px; height:400px; overflow: hidden; position: absolute; display: flex; transition: transform 0.6s ease; } .banner-container .banner-img-container img{ width:100%; height:100%; } /* 轮播图圆点样式 */ .banner-container a { width:24px; height:24px; background:#87c8eb; position: absolute; bottom:1rem; border-radius: 100%; margin:0; z-index: 1; } .banner-container input{ width:24px; height:24px; position: absolute; bottom:1rem; margin:0; cursor: pointer; z-index: 2; opacity: 0; } /* 设置导航圆点偏移量(居中布局)*/ #banner-control-1,#banner-control-1 + .banner-nav-a{ left: 30%; } #banner-control-2,#banner-control-2 + .banner-nav-a{ left: 40%; } #banner-control-3,#banner-control-3 + .banner-nav-a{ left: 50%; } #banner-control-4,#banner-control-4 + .banner-nav-a{ left: 60%; } #banner-control-5,#banner-control-5 + .banner-nav-a{ left: 70%; } /* 设置高亮 */ /*当 input 被选中时 他的兄弟级a标签高亮展示*/ input:checked + .banner-nav-a { background-color: #ad244f; } /* 设置轮播图动画 */ #banner-control-1:checked ~ .banner-img-container{ transform: translateX(0px); } #banner-control-2:checked ~ .banner-img-container{ transform: translateX(-1200px); } #banner-control-3:checked ~ .banner-img-container{ transform: translateX(-2400px); } #banner-control-4:checked ~ .banner-img-container{ transform: translateX(-3600px); } #banner-control-5:checked ~ .banner-img-container{ transform: translateX(-4800px); }
返回
User:顶呱呱的阿杰/swiper.css
。