vue+vanilla-tilt+tabs实现三维立体倾斜交互标签tab效果代码
代码语言:html
所属分类:选项卡
代码描述:vue+vanilla-tilt+tabs实现三维立体倾斜交互标签tab效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet"> <link rel='stylesheet' href='https://unpkg.com/vue-nav-tabs/themes/vue-tabs.css'> <style> body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; background: -webkit-gradient(linear, left top, left bottom, from(#2193b0), to(#6dd5ed)); background: linear-gradient(tobottom,#2193b0, #6dd5ed); color: #fff; font: 300 16px "Montserrat", sans-serif; line-height: 20px; } #app-container { width: 500px; height: 400px; background: #fff; border-radius: 5px; background: transparent; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .vue-tabs { box-shadow: 0 12px 32px -10px #071011; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } /***** Nav Bar *****/ #tabs { height: 100%; -webkit-transition: 0.3s; transition: 0.3s; } .vue-tabs .nav-tabs { background: #071011; border-bottom: #071011; text-align: center; border-top-right-radius: 5px; border-top-left-radius: 5px; } .vue-tabs .nav-tabs > li { float: none; display: inline-block; margin-bottom: 0; cursor: pointer; font-weight: 400; } .vue-tabs .nav-tabs > li > a { border-radius: 0; -webkit-transition: 0.2s; transition: 0.2s; padding: 12px 15px; margin-right: 0; } .vue-tabs .nav-tabs > li > a:hover { background: inherit; } .vue-tabs .nav > li > a:hover, .vue-tabs .nav > li > a:focus { color: #fff; border-color: #071011; } /***** Tab Content *****/ .tab .tab-content { position: relative; top: 0; left: 0; height: 350px; } .tab .tab-content .tab-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .tab .tab-content .tab-image:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.6); border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } .tab .tab-content .first-image { background: url("//repo.bfw.wiki/bfwrepo/image/5fb390d10ad81.png") no-repeat; background-size: cover; background-position: 0; } .tab .tab-content .second-image { background: url("//repo.bfw.wiki/bfwrepo/image/5fb390efbc19c.png") no-repeat; background-size: cover; background-position: 0; } .tab .tab-content .third-image { background: url("//repo.bfw.wiki/bfwrepo/im.........完整代码请登录后点击上方下载按钮下载查看
网友评论0