Browse Source

style(common.css): 更新头部下拉面板弹出动画

master
peijunlei 2 weeks ago
parent
commit
886990241c
  1. 12
      public/themes/dist_static/static/css/common.css

12
public/themes/dist_static/static/css/common.css

@ -32,6 +32,10 @@
--duration-normal: 0.3s; /* 变换/位移/透明度/展开收起 */
--duration-slow: 0.4s; /* 轮播/大幅位移 */
--easing: ease; /* 缓动函数 */
--nav--dropdown-duration: 300ms;
--ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
--nav--dropdown-open-duration: 600ms;
}/* max-width 从大到小写 *//* 1680–1919:比 1920 稿略窄,边距收到 100 */@media (max-width: 1919px) {
:root {
--p-x: 100Px;
@ -1307,14 +1311,16 @@ body {
right: 0;
top: 100%;
z-index: 2;
/* 展开收起动画 */
display: grid;
grid-template-rows: 0fr;
max-height: calc(100dvh - var(--header-h));
visibility: hidden;
opacity: 0;
transition: grid-template-rows var(--nav--dropdown-duration) var(--ease-expo-out), visibility 0s var(--nav--dropdown-duration), opacity var(--nav--dropdown-duration) var(--ease-expo-out);
max-height: calc(100dvh - var(--header-h));
background: var(--color-white);
border-top: 1px solid rgb(223, 224, 226);
box-shadow: 0 1.5rem 3rem rgba(46, 53, 58, 0.08);
transition: grid-template-rows 0.5s var(--easing);
}.nav-mega__inner {
overflow: auto;
min-height: 0;
@ -1617,6 +1623,8 @@ body {
}.site-header__nav-item:hover .nav-mega {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
transition: grid-template-rows var(--nav--dropdown-open-duration) var(--ease-expo-out), visibility 0s 0s, opacity var(--nav--dropdown-duration) var(--ease-expo-out);
}.site-header__nav-item:hover .site-header__nav-link {
color: var(--color-primary);
}.site-header__nav-item:hover .site-header__chevron {

Loading…
Cancel
Save