表单/表格

弹性效果的创意下拉框特效

创客主机

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

HTML 结构

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

也想出现在这里?联系我们
WordPress 主题
  1. <div class="drop">
  2.   <div class="option active placeholder" data-value="placeholder">
  3.     Choose wisely
  4.   </div>
  5.   <div class="option" data-value="wow">
  6.     Wow!
  7.   </div>
  8.   ......
  9. </div>

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

CSS 样式

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

  1. .drop {
  2.   width: 20em;
  3.   margin: 5em auto;
  4.   font-family: pfs-bold;
  5.   color: #86919a;
  6.   text-transform: uppercase;
  7.   position: relative;
  8.   -webkit-transition: width 0.5s;
  9.           transition: width 0.5s;
  10.   will-change: width;
  11. }

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

  1. .drop.opacity .option:nth-child(0) {
  2.   -webkit-transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s;
  3.           transition: opacity 0.5s 0s, transform 0.5s 0s;
  4. }
  5. .drop.opacity .option:nth-child(1) {
  6.   -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
  7.           transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
  8. }
  9. .drop.opacity .option:nth-child(2) {
  10.   -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
  11.           transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
  12. }
  13. .drop.opacity .option:nth-child(3) {
  14.   -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
  15.           transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
  16. }
  17. .drop.opacity .option:nth-child(4) {
  18.   -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
  19.           transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
  20. }
  21. .drop.opacity .option:nth-child(5) {
  22.   -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
  23.           transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
  24. }
  25. .drop.opacity .option:nth-child(6) {
  26.   -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
  27.           transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
  28. }
  29. .drop.opacity .option:nth-child(7) {
  30.   -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
  31.           transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
  32. }
  33. .drop.opacity .option:nth-child(8) {
  34.   -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  35.           transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
  36. }
  37. .drop.opacity .option:nth-child(9) {
  38.   -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
  39.           transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
  40. }

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

  1. .drop:after, .drop:before {
  2.   content: "";
  3.   position: absolute;
  4.   top: 1.5em;
  5.   right: 1em;
  6.   width: 0.75em;
  7.   height: 0.75em;
  8.   border: 0.2em solid #86919a;
  9.   -webkit-transform: rotate(45deg);
  10.       -ms-transform: rotate(45deg);
  11.           transform: rotate(45deg);
  12.   -webkit-transform-origin: 50% 50%;
  13.       -ms-transform-origin: 50% 50%;
  14.           transform-origin: 50% 50%;
  15.   -webkit-transition: opacity 0.2s;
  16.           transition: opacity 0.2s;
  17. }
  18. .drop:before {
  19.   border-left: none;
  20.   border-top: none;
  21.   top: 1.2em;
  22. }
  23. .drop:after {
  24.   border-right: none;
  25.   border-bottom: none;
  26.   opacity: 0;
  27. }

JAVASCRIPT

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

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

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

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!