使用css实现点击切换效果
生活随笔
收集整理的這篇文章主要介紹了
使用css实现点击切换效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用css制作簡單的點擊切換效果，參考了以下教程：css實現的輪播和點擊切換(無js版)
首先先制作一個容器，用來容納所顯示的內容：
HTML代碼：
<html></html> <head><meta charset="utf-8"> <link href="css/test.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="contain"><ul><li></li><li></li><li>/li></ul> </div> </body> </html>
CSS代碼：
.contain{position: relative;margin:auto;width: 600px;height: 200px;text-align: center;font-family: Arial;color: #FFF;}接下來，根據需要設置ul的長度，這里先制作三個切換窗口，因此將ul的寬度設置為容器寬度的300%，li即為每次切換時顯示的子元素，寬度設置為顯示容器的100%；
HTML代碼：
<div class="contain"><ul><li class="sildeInput-1">one-點擊切換</li><li class="sildeInput-2">two-點擊切換</li><li class="sildeInput-3">three-點擊切換</li></ul> </div>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代碼：
可以看到，多出來的部分全部被隱藏起來了，這樣，我們就可以通過修改ul的margin-left屬性值實現簡單的切換效果。
接下來寫三個單選框用于切換，因為需要實現點擊之后才進行切換的效果，此時將lable指向相應的input標簽的id并使用偽類:checked來實現選擇切換的效果。
HTML代碼：
<div class="contain"><input type="radio" name="sildeInput" value="0" id="Input1" hidden><label class="label1" for="Input1">1</label><input type="radio" name="sildeInput" value="1" id="Input2" hidden><label class="label2" for="Input2">2</label><input type="radio" name="sildeInput" value="1" id="Input3" hidden><label class="label3" for="Input3">3</label><ul><li class="sildeInput-1">one-點擊切換</li><li class="sildeInput-2">two-點擊切換</li><li class="sildeInput-3">three-點擊切換</li></ul> </div>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
轉載于:https://www.cnblogs.com/halftion/p/9470357.html
總結
以上是生活随笔為你收集整理的使用css实现点击切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 全链路设计与实践
- 下一篇： 5whys分析法在美团工程师中的实践