tailwind实现简洁大气的书籍导航菜单效果代码
代码语言：html
所属分类：菜单导航
代码描述：tailwind实现简洁大气的书籍导航菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" class="bg-black">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.0.0.js"></script>
<style>
@font-face {
font-family: "Roboto Flex";
src: url("//repo.bfw.wiki/bfwrepo/font/RobotoFlex.woff2") format("woff2");
}
body {
font-family: "Roboto Flex", sans-serif;
}
.group-hover\:transition-transform {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
animation-direction: alternate;
}
.num {
font-size: 10rem;
line-height: 0.9;
font-weight: 550;
font-variation-settings: "wdth" 35, "YTFI" 788;
}
.stretch {
font-weight: 500;
font-variation-settings: "wdth" 35;
writing-mode: vertical-rl;
}
</style>
</head>
<body >
<div class="relative py-4 sm:py-8 xl:py-3 min-w-screen min-h-screen flex items-center justify-center text-white">
<div class="grid border-x lg:grid-cols-6 sm:grid-cols-3 grid-cols-2 lg:divide-x divide-solid divide-white">
<article class="group h-full grid grid-cols-1 auto-rows-min divide-y text-sm text-center divide-gray-400 px-2">
<div class="sm:pb-8 pb-3 num">1</div>
<div class="sm:py-3 py-1.5 uppercase font-light">Herman Hesse</div>
<div class="sm:h-28 h-20 flex items-center text-xs">
<p class="break-words font-light whitespace-pre-line mx-auto w-28">Professionalism is dedication multiplied on time</p>
</div>
<div class="sm:py-3 py-1.5 uppercase">Page 56</div>
<div class="py-8 text-9xl relative">
<q class="text-xs absolute left-0 sm:top-28 top-24">
But if I do not go along with your sadness, do not let myself be infected by it, that does not mean I don't recognize it or take it seriously.
</q>
<div class="sm:pt-36 pt-32 sm:pb-0 pb-1 uppercase -scale-100 stretch bg-black sm:group-hover:-translate-y-56 group-hover:-translate-y-44 group-hover:transition-transform">Pro</div>
</div>
</article>
<article class="group border-l lg:border-l-0 h-full grid grid-cols-1 auto-rows-min divide-y text-sm text-center divide-gray-400 px-2">
<div class="sm:pb-8 pb-3 num">2</div>
<div class="sm:py-3 py-1.5 uppercase font-light">Bob Dylan</div>
<div class="sm:h-28 h-20 flex items-center text-xs">
<p class="break-words font-light whitespace-pre-line mx-auto w-28">Society is mainly designed by it's cultural elites</p>
</div>
<div class="sm:py-3 py-1.5 uppercase">Page 85</div>
<div class="py-8 text-9xl relative">
<q class="text-xs absolute left-0 top-28">
what a drag it gets to be. writing for this chosen few. writing for anyone cpt you.
</q>
<div class="sm:pt-8 pt-4 sm:pb-0 pb-1 uppercase -scale-100 stretch bg-black sm:group-hover:-translate-y-56 group-hover:-translate-y-44 group-hover:transition-transform">Design</div>
</div>
</article>
<article class="group lg:border-l-0 sm:border-l border-l-0 h-full grid grid-cols-1 auto-rows-min divide-y text-sm text-center divide-gray-400 px-2">
<div class="sm:pb-8 pb-3 num">3</div>
<div class="sm:py-3 py-1.5 uppercase font-light">Isaac Asimov</div>
<div class="sm:h-28 h-20 flex items-center text-xs">
<p class="break-words font-light whitespace-pre-line mx-auto w-28">Exploration of unknown is all about warm heart</p>
</div&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0