自适应选项卡切换动画效果
代码语言:html
所属分类:选项卡
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Tabs</title> <style> @import url("https://fonts.googleapis.com/css?family=Lato:400,300"); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #222; } .tabs { --tab-links-height: 80px; --tab-links-bg: linear-gradient(135deg, #e5eaf1 0%, #b9c5d8 100%); --tab-links-overlay: linear-gradient( 135deg, #2cd8d5 0%, #6b8dd6 48%, #8e37d7 100% ); --tab-link-bg: linear-gradient( 90deg, transparent 70%, rgba(255, 255, 255, 0.2) 100% ); width: 100%; max-width: 600px; min-width: 300px; font-family: Lato, sans-serif; } .tabs .tabs__links { margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; height: var(--tab-links-height); background: var(--tab-links-bg); list-style-type: none; } @media screen and (max-width: 750px) { .tabs .tabs__links { height: calc(var(--tab-links-height) / 2); } } .tabs .tabs__links li { flex: 1; } .tabs .tabs__links li .tabs__link { all: unset; position: relative; height: var(--tab-links-height); width: 100%; background: var(--tab-link-bg); cursor: pointer; overflow: hidden; transition: 0.3s; } @media screen and (max-width: 750px) { .tabs .tabs__links li .tabs__link { height: calc(var(--tab-links-height) / 2); font-size: 12px; } } .tabs .tabs__links li .tabs__link::before { position: absolute; content: ""; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; background: var(--tab-links-overlay); -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; transform-origin: top; transition: 0.3s ease-in-out; } .tabs .tabs__links li .tabs__link .tabs__link__text { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; opacity: 0.6; transition: 0.5s; } .tabs .tabs__links li .tabs__link .tabs__link__text::before { position: absolute; content: attr(data-text); top: 160%; z-index: -1; font-size: 40px; font-weight: 600; color: white; opacity: 0.1; transition: 1.2s ease-out; } @media screen and (max-width: 750px) { .tabs .tabs__links li .tabs__link .tabs__link__text::before { display: none; } } .tabs .tabs__links li .tabs__link:hover::before { -webkit-transform: scaleY(1); transform: scaleY(1); } .tabs .tabs__links li .tabs__link:hover .tabs__link__text { color: white; opacity: 1; } .tabs .tabs__links li .tabs__link:hover .tabs__link__text::before { -webkit-transform: translateY(-300%); transform: translateY(-300%); } .tabs .tabs__links li .tabs__link.active { -webkit-transform: scaleY(1.4); transform: scaleY(1.4); background: white; } .tabs .tabs__links li .tabs__link.active::before { -webkit-transform: scaleY(0.05); transform: scaleY(0.05); } .tabs .tabs__links li .tabs__link.active .tabs__link__text { -webkit-transform: scaleY(0.714); transform: scaleY(0.714); } .tabs .tabs__links li .tabs__link.active .tabs__link__text, .tabs .tabs__links li .tabs__link.active:hover .tabs__link__text { background: var(--tab-links-overlay); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; } .tabs .tabs__contents { position: relative; margin-top: 0; padding: 40px 60px; background: white; list-style-type: none; transition: 1s; } .tabs .tabs__contents::after { position: absolute; content: ""; left: 0; bottom: 0; width: 10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0