使用css实现点击切换效果 | 您所在的位置:网站首页 › css点击之后改变样式没反应怎么办 › 使用css实现点击切换效果 |
使用css制作简单的点击切换效果,参考了以下教程:css实现的轮播和点击切换(无js版) 首先先制作一个容器,用来容纳所显示的内容: HTML代码: /li> CSS代码: .contain{ position: relative; margin:auto; width: 600px; height: 200px; text-align: center; font-family: Arial; color: #FFF; }接下来,根据需要设置ul的长度,这里先制作三个切换窗口,因此将ul的宽度设置为容器宽度的300%,li即为每次切换时显示的子元素,宽度设置为显示容器的100%;HTML代码: one-点击切换 two-点击切换 three-点击切换 CSS代码: .contain ul{ margin:10px 0; padding:0; width: 1800px; } .contain li{ float: left; width: 600px; height: 200px; list-style: none; line-height: 200px; font-size: 36px; } .sildeInput-1{ background: #9fa8ef; } .sildeInput-2{ background: #ef9fb1; } .sildeInput-3{ background: #9fefc3; }效果如下:
可以看到,多出来的部分也被显示出来了,此时就要给显示窗口设置overflow:hidden;属性,将多出来的部分隐藏起来 CSS代码: .contain{overflow: hidden;}效果如下:
可以看到,多出来的部分全部被隐藏起来了,这样,我们就可以通过修改ul的margin-left属性值实现简单的切换效果。 接下来写三个单选框用于切换,因为需要实现点击之后才进行切换的效果,此时将lable指向相应的input标签的id并使用伪类:checked来实现选择切换的效果。 HTML代码: 1 2 3 one-点击切换 two-点击切换 three-点击切换 CSS代码 .label1{ position: absolute; bottom: 10px; left: 0px; width: 20px; height: 20px; margin: 0 10px; line-height: 20px; color: #FFF; background: #000; cursor: pointer; }/*用于调整单选框的属性以及位置*/ .label2{ position: absolute; bottom: 10px; left: 30px; width: 20px; height: 20px; margin: 0 10px; line-height: 20px; color: #FFF; background: #000; cursor: pointer; }/*用于调整单选框的属性以及位置*/ .label3{ position: absolute; bottom: 10px; left: 60px; width: 20px; height: 20px; margin: 0 10px; line-height: 20px; color: #FFF; background: #000; cursor: pointer; }/*用于调整单选框的属性以及位置*/ #Input1:checked~ul{ margin-left: 0;}/*第一张点击切换*/ #Input1:checked~.label1{ background: #535353;}/*点击后改变单选框颜色*/ #Input2:checked~ul{ margin-left: -600px;}/*第二张点击切换*/ #Input2:checked~.label2{ background: #535353;}/*点击后改变单选框颜色*/ #Input3:checked~ul{ margin-left: -1200px;}/*第三张点击切换*/ #Input3:checked~.label3{ background: #535353;}/*点击后改变单选框颜色*/效果如下:
最后,再给ul标签添加transition:all 0.5s;属性,设置0.5秒的平滑过渡 css代码: .contain ul{transition:all 0.5s;}这样,就可以实现页面的平滑切换了。demo页面:www.shijiewubaiqiang.top/old/test/test-2.html |
CopyRight 2018-2019 实验室设备网 版权所有 |