纯CSS完成tab5种不同切换对应内容效果

纯CSS完成tab5种不同切换对应内容效果

添加时间:2021-03-12 09:34:31
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:表单
  • 模板颜色模板颜色:高级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

通过css3的anitme属性演示了5种不同的tab切换对应内容效果。这个放在手机浏览器或移动端设备特别好,js文件都不用引入了。
纯CSS完成tab5种不同切换对应内容效果
分类:css3 > 表单 难易:高级

首先引入css动画效果样式animate.min.css

<link href='css/animate.min.css' rel='stylesheet' type='text/css'>

tab菜单和对应内容

演示一:fadeIn淡入淡出

<ul class="tabs">
    <li>
        <input type="radio" checked name="tabs" id="tab1">
        <label for="tab1">tab 1</label>
        <div id="tab-content1" class="tab-content animated fadeIn">
            <a href='https://jy.tp.yuanmeng.life/js/42.html' target='_blank'>jQuery+jRange数值范围选择控件_鼠标拖动数值范围</a>
            <p>本文用两个例子向大家介绍一款范围选择器插件jRange。</p>
        </div>
    </li>
    <li>
        <input type="radio" checked name="tabs" id="tab2">
        <label for="tab2">tab 2</label>
        <div id="tab-content2" class="tab-content animated fadeIn">
            <a href='https://jy.tp.yuanmeng.life/js/43.html' target='_blank'>jquery下利用jsonp跨域访问实现方法</a>
            <p>本文将给您介绍如何使用getJSON来实现异步跨域提交表单。</p>
        </div>
    </li>
    <li>
        <input type="radio" checked name="tabs" id="tab3">
        <label for="tab3">tab 3</label>
        <div id="tab-content3" class="tab-content animated fadeIn">
            <a href='https://jy.tp.yuanmeng.life/js/44.html' target='_blank'>Flowplayer简单酷炫的视频播放器</a>
            <p>Flowplayer是一款免费的WEB视频播放器。它支持播放flv、swf等流媒体和图片文件,能够非常流畅的播放视频文件,支持自定义配置和扩展。</p>
        </div>
    </li>
</ul>

演示二:bounceInDown向下弹出

<div id="tab-content1" class="tab-content">
    <div class="animated  bounceInDown">
        <a href='https://jy.tp.yuanmeng.life/js/418.html' target='_blank'>
            jQuery+SVGMap制作中国地图
        </a>
        <p>
            分享一款很酷炫的中国地图插件:SVGMap,SVG画图可以兼容ie6+和其他浏览器,使用raphael作为引擎。可以自定义宽高、自定义数据-json、自定义数据-xml、提示自定义、hover回调、click回调、外部事件改变地图内容、不显示提示、外部控制、世界地图。
        </p>
    </div>
</div>

演示三:bounceIn放大震动

<div id="tab-content3" class="tab-content">
    <div class="animated  bounceIn ">
        <a href='https://jy.tp.yuanmeng.life/js/355.html' target='_blank'>
            jQuery仿京东左侧分类导航
        </a>
        <p>
            分享简单的仿京东首页左侧分类导航效果。
        </p>
    </div>
</div>

演示四:flipInY左右滑动

<div id="tab-content3" class="tab-content">
    <div class="animated  flipInY ">
        <a href='https://jy.tp.yuanmeng.life/js/420.html' target='_blank'>
            jQuery个人介绍幻灯片
        </a>
        <p>
            分享一个左右按钮控制的焦点轮播,你可以放置商品介绍、个人信息介绍、或者你的产品信息介绍。jQuery效果不错,赶紧收藏吧,说不定以后用到呢。
        </p>
    </div>
</div>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:纯CSS完成tab5种不同切换对应内容效果

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.088017s