带背景色切换的tab多标签选项卡切换效果代码
代码语言:html
所属分类:选项卡
代码描述:带背景色切换的tab多标签选项卡切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" class="bg--big"> <head> <meta charset="UTF-8"> <style> @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc9.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf) format('truetype'); } :root { transition: all 300ms; } :root.bg--big { background-color: #00BCD4; } :root.bg--medium { background-color: #E53935; } :root.bg--small { background-color: #4527A0; } body { height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: 'Roboto', sans-serif; transform: translateZ(0); font-weight: 400; } button { border: none; background: transparent; } .controller-container { margin-bottom: 5%; text-align: center; } .controller { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; margin: 0 20px; font-size: 22px; padding: 10px 0; color: #FFF; position: relative; transition: all 100ms cubic-bezier(0.165, 0.84, 0.44, 1); } .controller:after { content: ""; height: 3px; display: block; position: absolute; bottom: 0; width: 0; transition: all 300ms cubic-bezier(0.165, 0.84, 0.44, 1); background-color: #FFF; } .controller.is_current:after { width: 100%; } .controller:hover, .controller.is_current { transform: translate3d(0, -5px, 0); cursor: pointer; } .card { will-change: transform; margin: 8px; position: relative; border-radius: 2px; overflow: hidden; background-color: #fafafa; height: 35%; width: 344px; transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); } .card:hover { cursor: pointer; } .card__image { position: absolute; background-size: cover; background-position: center bottom; background-repeat: no-repat; width: 100%; height: 100%; overflow: hidden; display: block; opacity: 0; transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1); } .card__image:after { content: ""; display: block; position: absolute; background-color: rgba(0, 0, 0, 0.1); top: 0; left: 0; right: 0; transition: all 500ms; bottom: 0; } .card__title { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 24px; color: #FFF; margin: 0; position: absolute; left: 0; right: 0; padding: 0 16px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1); } .card__subtitle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #000; left: 88px; right: 0; top: 45px; position: absolute; padding: 0 16px; opacity: 0; transition: all 200ms cubic-bezier(0.075, 0.82, 0.165, 1); } .card__text { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; display: block; left: 0; right: 0; top: 100px; padding: 16px; margin: 0; line-height: 1.6; position: absolute; color: #000; overflow: hidden; transition: width 200ms cubic-bezier(0.075, 0.82, 0.165, 1); transition: delay 0.1s; } .card__action-bar { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; bottom: 0; top: auto; left: 0; right: 0; padding: 0 8px; border-top: 1px solid #E0E0E0; boz-sizing: border-box; height: 52px; transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1); } .card__button { outline: none; position: relative; display: inline-block; line-height: 52px; padding: 0 16px; color: #FF1744; } .card--big { box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15); height: 304px; min-height: 304px; } .card--big .card__image { border-radius: 1px 1px 0 0; left: 0; right: 0; top: 0; opacity: 1; max-height: 176px; } .card--big .card__title { top: 135px; } .card--big .card__text { top: 176px; } .card--big .card__action-bar { left: 0; } .card--medium { box-shadow: 0 13px 25px 0 rgba(0, 0, 0, 0.3), 0 11px 7px 0 rgba(0, 0, 0, 0.19); height: 208px; min-height: 208px; } .card--medium .card__image { border-radius: 1px 1px 0 0; left: -100%; right: 0; top: 0; max-height: 0; opacity: 0; } .card--medium .card__title { color: #FF1744; top: 16px; } .card--medium .card__text { font-size: 16px; top: 50px; } .card--medium .card__action-bar { left: 0; } .card--small { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3), 0 2px 2px 0 rgba(0, 0, 0, 0.2); height: 136px; min-height: 136px; } .card--small .card__image { border-radius: 1px 0 0 1px; left: 0; top: 0; width: 88px; opacity: 1; max-height: 136px; } .card--small .card__image:after { opacity: 0; } .card--small .card__title { color: #000; left: 88px; top: 8px; } .card--small .card__subtitle { opacity: 1; left: 88px; } .card--small .card__text { top: 30px; opacity: 0; } .card--small .card__action-bar { left: 88px; } </style> </head> <body > <!-- Controllers--> <div class="controller-container"><span class="controller is_current" id="big">BIG CARD</span><span class="controller" id="medium">MEDIUM CARD</span><span class="controller" id="small">SMALL CARD</span></div> <!-- Cards--> <div class="card card--big"> <div class="card__image" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/5e5ef0845f8bd.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90)"></div> <h2 class="card__title">Kangaroo Valley Safari</h2><span class="card__subtitle">By Mattia Astorino</span> <p class="card__text">Located two hours south of Sydney in the Southern Hig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0