使用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代码:

.contain{overflow: hidden;}
效果如下:


可以看到,多出来的部分全部被隐藏起来了,这样,我们就可以通过修改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;}
这样,就可以实现页面的平滑切换了。
本文作者:qq_41061352
本文发布时间:2018年02月02日
本文来自云栖社区合作伙伴CSDN,了解相关信息可以关注csdn.net网站。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
优秀教程:使用 CSS3 动画实现的超炫的过渡特效
  Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为。
808 0
【CSS】使用CSS控制文字过多自动省略号
使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
1004 0
Module切换,如何实现loading效果
Flex里面没有那么麻烦的 复制代码 即可 如何使用代码,Flex里有ModuleManager  import mx.
566 0
Virgin Hyperloop One如何使用Koalas将处理时间从几小时降到几分钟--无缝的将pandas切换成Apache Spark指南
Koalas项目基于Apache Spark实现了pandas DataFrame API,从而使数据科学家能够更有效率的处理大数据。一份代码可以同时在pandas(用于测试,小数据集)和Spark(用于分布式datasets)两个平台上运行。
1138 0
js设置随机切换背景图片
var imgs =["http://images.cnblogs.com/cnblogs_com/xiaobo-Linux/1112236/o_2.jpg", "http://images.
771 0
.NET数据库编程求索之路--7.使用ADO.NET实现(工厂模式-实现多数据库切换)(2)
7.使用ADO.NET实现(工厂模式-实现多数据库切换)(2)     7.3 数据访问层工厂HomeShop.DALFactory      1 using System; 2 using System.
886 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20710
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载