多彩连贯的纯css手风琴效果选项卡网页源码

mazai5080

已于 2022-04-21 23:58:16 修改

阅读量265

点赞数

分类专栏：前端源码文章标签： css3 经验分享

于 2022-04-21 23:51:18 首次发布

本文链接：https://blog.csdn.net/mazai5080/article/details/124334948

版权

前端源码专栏收录该内容

101 篇文章 25 订阅

订阅专栏

大家好，今天给大家介绍一款，多彩连贯的纯css手风琴效果选项卡网页源码（图1）。送给大家哦，获取方式在本文末尾。

图1

点击时不仅产生手风琴效果，还会产生选项卡的动画效果（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本模板编码：10135，需要的朋友，关注文末公众号，搜索10135，即可获取。

部分源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>时髦纯CSS手风琴</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css'>
	<link rel="stylesheet" href="static/css/style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class='left'>
  <div class='left_inner'>
    <h1>纯CSS手风琴</h1>
    <h2>给它一些点击</h2>
    <a class='download'>
      <i class="icon ion-eye"></i> <span>View my other pens</span>
    </a>
    <a class='follow'>
      <i class="icon "></i> <span>Follow me</span>
    </a>
  </div>
</div>
<div class='right'>
  <div class='app'>
    <div class='app_inner'>
      <input checked='' id='tab-1' name='buttons' type='radio'>
      <label for='tab-1'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            8am - 10am
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-android-color-palette'></i>
            <div class='tab_left__image'>
              <i class='icon ion-android-color-palette'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Jamie talks design</h3>
            <h4>Monday - Thursday</h4>
            <p>I talk a bunch of rubbish</p>
            <button>More information</button>
          </div>
        </div>
      </label>
      <input false='' id='tab-2' name='buttons' type='radio'>
      <label for='tab-2'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            10am - 12am
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-music-note'></i>
            <div class='tab_left__image'>
              <i class='icon ion-music-note'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Arctic Monkeys Live</h3>
            <h4>Monday - Wednesday</h4>
            <p>Music for your lug holes</p>
            <button>More information</button>
          </div>
        </div>
      </label>
      <input false='' id='tab-3' name='buttons' type='radio'>
      <label for='tab-3'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            12am - 4pm
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-android-microphone'></i>
            <div class='tab_left__image'>
              <i class='icon ion-android-microphone'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Steven Fry podcast</h3>
            <h4>Staurday - Sunday</h4>
            <p>Steven Fry says words</p>
            <button>More information</button>
          </div>
        </div>
      </label>
      <input false='' id='tab-4' name='buttons' type='radio'>
      <label for='tab-4'>
        <div class='app_inner__tab'>
          <h2>
            <i class='icon ion-android-alarm-clock'></i>
            4pm - 8pm
          </h2>
          <div class='tab_left'>
            <i class='big icon ion-android-bar'></i>
            <div class='tab_left__image'>
              <i class='icon ion-android-bar'></i>
            </div>
          </div>
          <div class='tab_right'>
            <h3>Massive event</h3>
            <h4>Monday - Friday</h4>
            <p>Some kind of music festival</p>
            <button>More information</button>
          </div>
        </div>
      </label>
    </div>
  </div>
</div>

</body>
</html>

本模板编码：10135，需要的朋友，关注文末公众号，搜索10135，即可获取。

mazai5080

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多彩连贯的纯css手风琴效果选项卡网页源码

大家好，今天给大家介绍一款，多彩连贯的纯css手风琴效果选项卡网页源码（图1）。送给大家哦，获取方式在本文末尾。图1点击时不仅产生手风琴效果，还会产生选项卡的动画效果（图2）图2源码完整，需要的朋友可以下载学习（图3）图3本模板编码：10135，需要的朋友，点击下面的链接后，搜索10135，即可获取。部分源码<!DOCTYPE html><html lang="en"><head> <meta charset
复制链接

扫一扫