当前位置：首页 > 网页特效 > 导航菜单

超酷纯CSS3动感手风琴列表ui界面设计

分类：导航菜单日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该手风琴特效的每一个手风琴项使用的是input元素和label元素的组合。在label元素中放置的是每一个手风琴项的具体内容。

```html
<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>
      
      ......
    </div>
  </div>
</div>   
```
#####  CSS样式
手风琴的包裹元素div.app使用绝对定位，设置为固定的宽度和高度，以及一些阴影效果。同时使用帧动画来在页面加载时为手风琴添加一些放大和旋转的效果。

```html
.app {
  border-radius: 10px;
  width: 340px;
  margin: 0 auto;
  height: 414px;
  position: absolute;
  left: 0;
  top: 35%;
  box-shadow: 4px 5px 0px rgba(0, 0, 0, 0.11);
  -webkit-animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards;
          animation: intro 0.34s 0.4s cubic-bezier(1, 1.4, 0.41, 1.01) forwards;
  -webkit-transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
          transform: translateY(-50%) scale(0) rotateX(10deg) rotateY(10deg) rotateZ(10deg);
  margin: auto;
  overflow: hidden;
  font-family: 'Roboto Condensed', sans-serif;
}   
```
接着在每一个手风琴项中，使用checkBox hack技术来设置手风琴项选中和未选中时，手风琴项中的左右侧内容的动画效果。

```html
.app_inner {
  position: relative;
}
.app_inner input[type="radio"] {
  display: none;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab {
  height: 175px;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_right {
  top: 39px;
  -webkit-transition: all 0.3s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.3s 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab {
  height: 80px;
  border-left: 12px solid rgba(0, 0, 0, 0.12);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_right {
  top: 200px;
  -webkit-transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .tab_left__image {
  -webkit-animation: move_in 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
          animation: move_in 0.55s 0.05s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
  -webkit-transition: all 0.3s 0.36s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.3s 0.36s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .tab_left__image {
  -webkit-animation: move_out 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
          animation: move_out 0.75s 0s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;
  -webkit-transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition: all 0.3s 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.app_inner input[type="radio"]:checked + label .app_inner__tab .tab_left .big {
  left: 260px;
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab .tab_left .big {
  left: 400px;
}
.app_inner input[type="radio"]:checked + label .app_inner__tab h2 i {
  opacity: 0;
}
.app_inner input[type="radio"]:not(checked) + label .app_inner__tab h2 i {
  opacity: .3;
}    
```

web299.com

超酷纯CSS3动感手风琴列表ui界面设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果