浙江 杭州

jQuery和CSS3带弹性效果的创意下拉框特效

系统分类: 网页特效 - jquery插件 - jQuery文本框特效 2017-03-23

人气856

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款非常有创意的jQueryCSS3带弹性效果的下拉框特效。这个下拉框使用嵌套的div来制作,它可以像下拉框一样展开,并且采用扁平化的设计风格,在用户选择某一个列表项后还有一些很酷的弹性效果。

制作方法

HTML结构

该下拉框特效的HTML结构使用嵌套的<div>结构,每一个div.option是下拉框中的一个选项。

<div class="drop">
  <div class="option active placeholder" data-value="placeholder">
    Choose wisely
  </div>
  <div class="option" data-value="wow">
    Wow!
  </div>
  ......
</div>
              

.active代表当前用户选择的下拉列表项。.placeholder是文字占位。

CSS样式

在CSS样式中,包裹元素.dropwidth属性作为平滑过渡的属性,并使用will-change属性来通知浏览器预先准备优化width属性。

.drop {
  width: 20em;
  margin: 5em auto;
  font-family: pfs-bold;
  color: #86919a;
  text-transform: uppercase;
  position: relative;
  -webkit-transition: width 0.5s;
          transition: width 0.5s;
  will-change: width;
}   
              

所有的下拉列表项分别使用nth-child选择器来一一选择,并为它们设置平滑过渡的持续时间和延迟时间,同时也设置了transform属性的过渡动画的持续时间和延迟时间。

.drop.opacity .option:nth-child(0) {
  -webkit-transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s;
          transition: opacity 0.5s 0s, transform 0.5s 0s;
}
.drop.opacity .option:nth-child(1) {
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
}
.drop.opacity .option:nth-child(2) {
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.drop.opacity .option:nth-child(3) {
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
}
.drop.opacity .option:nth-child(4) {
  -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
          transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}
.drop.opacity .option:nth-child(5) {
  -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
          transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}
.drop.opacity .option:nth-child(6) {
  -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
          transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
}
.drop.opacity .option:nth-child(7) {
  -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
          transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
}
.drop.opacity .option:nth-child(8) {
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
          transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
}
.drop.opacity .option:nth-child(9) {
  -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
          transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
}                
              

下拉框右边的小箭头使用.drop:after.drop:before来制作,分别对应向下和相上的小箭头。

.drop:after, .drop:before {
  content: "";
  position: absolute;
  top: 1.5em;
  right: 1em;
  width: 0.75em;
  height: 0.75em;
  border: 0.2em solid #86919a;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
}
.drop:before {
  border-left: none;
  border-top: none;
  top: 1.2em;
}
.drop:after {
  border-right: none;
  border-bottom: none;
  opacity: 0;
}                
              
JAVASCRIPT

下拉框的弹性效果是使用js来完成的,使用的是triggerAnimation()函数。

function triggerAnimation() {
    var finalWidth = $('.drop').hasClass('visible') ? 22 : 20;
    $('.drop').css('width', '24em');
    setTimeout(function () {
        $('.drop').css('width', finalWidth + 'em');
    }, 400);
}               
              

其它的jQuery代码用于在下拉框被点击的时候添加和移除相应的class。

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:129.60KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1861.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3带弹性效果的创意下拉框特效

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

据说认真评论作品的以后都迅速成长为大神了(已有0 评论)