html+css3+jquery点击展开平滑下拉特效UI

2025-10-05 15:22:48

1、新建html文档。

2、书写hmtl代码。

</div>

<div class="demo__menu-item" data-section="source">Source of inspiration</div>

<div class="demo__menu-item" data-section="demos">Other demos</div>

<div class="demo__menu-item" data-section="about">About</div>

</div>

<p class="demo__description">Just click menu button

</div>

<h2 class="demo__section-heading">Source of inspiration</h2>

<p class="demo__description">Based on

<a class="demo__link" href="#">this dribbble shot</a>

by Gal Shir

</div>

<h2 class="demo__section-heading">Other demos</h2>

</div>

<h2 class="demo__section-heading">About</h2>

</div>

html+css3+jquery点击展开平滑下拉特效UI

3、初始化css代码。

<style>

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { font-size: 62.5%; }

body { background: #F2E274; font-family: "Open Sans", Helvetica, Arial, sans-serif; }

</style>

html+css3+jquery点击展开平滑下拉特效UI

4、书写css代码。

.demo { z-index: 1; overflow: hidden; position: absolute; left: 50%; top: 50%; width: 26rem; height: 44rem; margin-left: -13rem; margin-top: -22rem; border-radius: 0.5rem; background: #fff; box-shadow: 0.3rem 0.5rem 0.5rem rgba(0, 0, 0, 0.2); }

.demo__overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); pointer-events: none; opacity: 0; -webkit-transition: opacity 0.4s 0.35s; transition: opacity 0.4s 0.35s; }

.demo.menu-active .demo__overlay { opacity: 1; -webkit-transition: opacity 0.4s 0.4s; transition: opacity 0.4s 0.4s; }

.demo__menu-btn { z-index: 3; position: absolute; left: 2rem; top: 2rem; width: 2.4rem; height: 1.6rem; -webkit-transition: -webkit-transform 0.4s 0.75s; transition: transform 0.4s 0.75s; cursor: pointer; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.demo.menu-active .demo__menu-btn { -webkit-transition: -webkit-transform 0.4s; transition: transform 0.4s; -webkit-transform: translate3d(-2rem, 0, 0); transform: translate3d(-2rem, 0, 0); }

.demo__menu-btn-line { position: absolute; left: 0; width: 100%; height: 0.2rem; background: #879BAF; -webkit-transition: width 0.4s 0.75s, -webkit-transform 0.4s 0.35s; transition: width 0.4s 0.75s, transform 0.4s 0.35s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.demo.menu-active .demo__menu-btn-line { width: 26rem; -webkit-transition: width 0.4s, -webkit-transform 0.4s 0.32s; transition: width 0.4s, transform 0.4s 0.32s; }

.demo__menu-btn-line:nth-child(1) { top: 0; }

.demo.menu-active .demo__menu-btn-line:nth-child(1) { -webkit-transform: translate3d(0, 4rem, 0); transform: translate3d(0, 4rem, 0); }

.demo__menu-btn-line:nth-child(2) { top: 0.7rem; }

.demo.menu-active .demo__menu-btn-line:nth-child(2) { -webkit-transform: translate3d(0, 9.5rem, 0); transform: translate3d(0, 9.5rem, 0); }

.demo__menu-btn-line:nth-child(3) { top: 1.4rem; }

.demo.menu-active .demo__menu-btn-line:nth-child(3) { -webkit-transform: translate3d(0, 15rem, 0); transform: translate3d(0, 15rem, 0); }

.demo__menu-bg { z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 24.8rem; background: #fff; border-bottom: 0.2rem solid #879BAF; -webkit-transform: scaleY(0.3); -ms-transform: scaleY(0.3); transform: scaleY(0.3); -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; opacity: 0; -webkit-transition: opacity 0.2s 0.55s, -webkit-transform 0.4s 0.35s; transition: opacity 0.2s 0.55s, transform 0.4s 0.35s; pointer-events: none; }

.demo.menu-active .demo__menu-bg { pointer-events: auto; -webkit-transform: scaleY(1); -ms-transform: scaleY(1); transform: scaleY(1); opacity: 1; -webkit-transition: opacity 0.2s 0.4s, -webkit-transform 0.4s 0.4s; transition: opacity 0.2s 0.4s, transform 0.4s 0.4s; }

.demo__menu-items { z-index: 2; position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }

.demo.menu-active .demo__menu-items { pointer-events: auto; }

.demo__menu-item { height: 6rem; padding-left: 2rem; margin-bottom: 0.2rem; font-size: 1.8rem; line-height: 6rem; color: #7F91A4; background-color: rgba(127, 145, 164, 0); opacity: 0; -webkit-transform: translateX(-1rem); -ms-transform: translateX(-1rem); transform: translateX(-1rem); -webkit-transition: opacity 0.2s 0.15s, -webkit-transform 0.2s 0.15s; transition: opacity 0.2s 0.15s, transform 0.2s 0.15s; cursor: pointer; }

.demo__menu-item.clicked { -webkit-animation: menuItemClicked 0.3s; animation: menuItemClicked 0.3s; }

.demo.menu-active .demo__menu-item { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

.demo.menu-active .demo__menu-item:nth-child(1) { -webkit-transition: opacity 0.2s 0.4s, -webkit-transform 0.2s 0.4s; transition: opacity 0.2s 0.4s, transform 0.2s 0.4s; }

.demo.menu-active .demo__menu-item:nth-child(2) { -webkit-transition: opacity 0.2s 0.55s, -webkit-transform 0.2s 0.55s; transition: opacity 0.2s 0.55s, transform 0.2s 0.55s; }

.demo.menu-active .demo__menu-item:nth-child(3) { -webkit-transition: opacity 0.2s 0.7s, -webkit-transform 0.2s 0.7s; transition: opacity 0.2s 0.7s, transform 0.2s 0.7s; }

.demo.menu-active .demo__menu-item:nth-child(4) { -webkit-transition: opacity 0.2s 0.85s, -webkit-transform 0.2s 0.85s; transition: opacity 0.2s 0.85s, transform 0.2s 0.85s; }

.demo__section { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 7rem 2rem 0; opacity: 0; -webkit-transition: opacity 0.4s; transition: opacity 0.4s; pointer-events: none; }

.demo__section:after { content: ""; position: absolute; left: 1rem; bottom: 1rem; width: 24rem; height: 17rem; border-radius: 0.5rem; background: #E7F6FB; }

.demo__section.active-section { opacity: 1; pointer-events: auto; }

.demo__section-heading { margin-bottom: 1.5rem; text-align: center; font-size: 2.2rem; text-transform: uppercase; }

.demo__description { text-align: center; font-size: 1.5rem; }

@-webkit-keyframes menuItemClicked { 0% {

background-color: #7F91A4;

}

100% {

background-color: rgba(127, 145, 164, 0);

}

@keyframes menuItemClicked { 0% {

background-color: #7F91A4;

}

100% {

background-color: rgba(127, 145, 164, 0);

}

html+css3+jquery点击展开平滑下拉特效UI

5、书写并添加js代码。

$(document).ready(function () {

var $demo = $('.demo');

var menuTextAT = 500;

$(document).on('click', '.demo__menu-btn', function () {

$demo.addClass('menu-active');

});

$(document).on('click', '.demo__menu-item', function () {

var $item = $(this);

var targetSection = $item.data('section');

$item.addClass('clicked');

$demo.removeClass('menu-active');

$('.demo__section.active-section').removeClass('active-section');

$('.demo__section--' + targetSection).addClass('active-section');

setTimeout(function () {

$item.removeClass('clicked');

}, menuTextAT);

});

</script>

html+css3+jquery点击展开平滑下拉特效UI

6、代码整体结构。

html+css3+jquery点击展开平滑下拉特效UI

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。