当前位置：首页 > 网页特效 > 动画效果

jQuery和CSS3扁平化风格滑动面板

分类：动画效果日期：2024-05-14 点击(2) 评论(0)

简介

##### HTML结构
该滑动面板使用无序列表制作，HTML结构非常简单。每个列表项中使用一个div .info-box-green作为整个滑动面板的wrapper。里面的h4标签是面板的标题，div.info-content是面板的内容。最后空的<span>是面板右边显示的"+"号。

```html
<ul class="wrapper">
  <li>
    <div class="info-box-green">
      <h4 class="entypo-tools"> Featured Services </h4>
   
      <div class="info-content">
        <div class="text">
          <p>...</p>
        </div>
        <span class="entypo-plus" id="expand-green"></span>
      </div>
    </div>
  </li>
 
  ...
 
</ul>
```
##### CSS样式
该滑动面板使用CSS3来制作扁平化风格的样式。在面板打开时，面板右边的“+”号还有一个旋转动画，由CSS3 transform完成的。

```html
.info-box-green, .info-box-red, .info-box-sky {
  margin: 50px auto;
  padding: 0;
  width: 480px;
  -webkit-box-shadow: 0 8px 6px -6px black;
     -moz-box-shadow: 0 8px 6px -6px black;
          box-shadow: 0 8px 6px -6px black;
}
 
.info-box-red h4 {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: -10px;
}
 
.info-box-red > .info-content > .text {
 -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px; 
}
 
.info-box-green h4, .info-box-green > .info-content > .text {
 background-color: #00AB83;
}
 
.info-box-red h4, .info-box-red > .info-content > .text {
  background-color: #FF434C;
}
 
.info-box-sky h4, .info-box-sky > .info-content > .text {
  background-color: #00A5C3;
}
 
.info-box-green h4, .info-box-red h4, .info-box-sky h4 {
  padding: 25px;
  font-size: 1.125em;
  font-weight: 400;
  color: #FFF;
}
 
.info-box-green > .info-content > .text, .info-box-red > .info-content > .text, .info-box-sky > .info-content > .text {
  padding: 0px;
  font-size: 1em;
  line-height: 1.5em;
  height: 0;
  color: #FFF;
  overflow: hidden;
  -webkit-transition:  height 200ms ease;  
     -moz-transition:  height 200ms ease;  
       -o-transition:  height 200ms ease;  
          transition:  height 200ms ease;
}
 
.info-box-green > .info-content > .text > p, .info-box-red > .info-content > .text > p, .info-box-sky > .info-content > .text > p {
  padding: 20px 20px 60px;
}
 
.info-box-sky > .info-content > .text {
  background-color: #FFF;
  color: #444;
  border-radius: 0;
}
  
.info-box-green > .info-content > .text.open-green, .info-box-red > .info-content > .text.open-red, .info-box-sky > .info-content > .text.open-sky {
  display: block;
  height: auto;
}
 
.info-box-green > .info-content > span.close-green, .info-box-red > .info-content > span.close-red, .info-box-sky > .info-content > span.close-sky {
  -webkit-transform:rotate(135deg);
     -moz-transform:rotate(135deg);
       -o-transform:rotate(135deg);
      -ms-transform:rotate(135deg);
}
 
.info-box-green span, .info-box-red span, .info-box-sky span {
  display: inline-block;
  float: right;
  position: relative;
  bottom: 60px;
  right: 10px;
  margin: 0;
  padding: 10px;
  color: #FFF;
  font-size: 2em;
  cursor: pointer;
  /*  Rotate '+' to 'X' */
  -webkit-transition: all 600ms ease-in-out; 
     -moz-transition: all 600ms ease-in-out; 
       -o-transition: all 600ms ease-in-out; 
      -ms-transition: all 600ms ease-in-out; 
          transition: all 600ms ease-in-out;
}
 
.info-box-sky > .info-content > span.close-sky {
  color: #444;
}
 
.info-box-red span {
  position: relative;
  bottom: 50px;
  right: 10px;
}
JAVASCRIPT
该滑动面板插件使用 jQuery 来切换样式完成面板的展开和收缩。

web299.com

jQuery和CSS3扁平化风格滑动面板

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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