tailwindcss实现一个带图片图标的手风琴效果代码
代码语言：html
所属分类：其他
代码描述：tailwindcss实现一个带图片图标的手风琴效果代码
代码标签： tailwindcss 图片 图标 手风琴
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css">
<style>
.card.active {
flex-grow: 10;
margin: 0;
max-width: 100%;
.label {
transform: translate(0.5rem, -0.5rem);
.content > * {
opacity: 1;
transform: translateX(0);
}
}
.shadow {
opacity: 0.75;
transform: translateY(0);
}
}
.transition-base {
transition-duration: 700ms;
transition-property: all;
transition-timing-function: cubic-bezier(0.2, 1, 0.25, 0);
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="antialiased bg-gray-900 flex font-sans items-center justify-center min-h-screen px-12">
<div class="flex h-72 items-stretch max-w-3xl min-w-md overflow-hidden w-full">
<div class="active bg-center bg-cover bg-red-500 bg-red-img bg-no-repeat card cursor-pointer flex-grow m-3 min-w-14 overflow-hidden relative rounded-3xl transition-base">
<div class="absolute bg-gradient-to-b bottom-0 from-transparent h-1/2 inset-x-0 opacity-0 shadow to-black transform transition-base translate-y-1/2 z-10"></div>
<div class="absolute bottom-0 flex label left-0 mb-3 ml-2 transition-base z-20">
<div class="bg-gray-900 flex h-10 icon items-center justify-center mr-3 rounded-full text-red-500 w-10">
<i class="fas fa-walking"></i>
</div>
<div class="content flex flex-col justify-center leading-tight text-white whitespace-pre">
<div class="font-bold opacity-0 relative transform transition-base translate-x-8">Lights</div>
<div class="delay-100 opacity-0 relative transform transition-base translate-x-8">Chase your dreams</div>
</div>
</div>
</div>
<div class="bg-center bg-cover bg-yellow-500 bg-yellow-img bg-no-repeat card cursor-pointer flex-grow m-3 min-w-14 overflow-hidden relative rounded-3xl transition-base">
<div class="absolute bg-gradient-to-b bottom-0 from-transparent h-1/2 inset-x-0 opacity-0 shadow to-black transform transition-base translate-y-1/2 z-10"></div>
<div class="absolute bottom-0 flex label left-0 mb-3 ml-2 transition-base z-20">
<div class="bg-gray-900 flex h-10 icon items-center justify-center rounded-full text-yellow-500 w-10">
<i class="fas fa-apple-alt"></i>
</div>
<div class="content flex flex-col justify-center leading-tight ml-3 text-white whitespace-pre">
<div class="font-bold opacity-0 relative transform transition-base translate-x-8">Construction</div>
<div class="delay-100 opacity-0 relative transform transition-base translate-x-8">Build the extraordinary</div>
</div>
</div>
</div>
<div class="bg-center bg-cover bg-green-500 bg-green-img bg-no-repeat card cursor-pointer flex-grow m-3 min-w-14 overflow-hidden relative rounded-3xl transition-base">
<div class="absolute bg-gradient-to-b bottom-0 from-transparent h-1/2 inset-x-0 opacity-0 shadow to-black transform transition-base translate-y-1/2 z-10"></div>
<div class="absolute bottom-0 flex label left-0 mb-3 ml-2 transition-base z-20">
<div class="bg-gray-900 flex h-10 icon items-center justify-center rounded-full text-green-500 w-10">
<i class="fas fa-tree"></i>
</div>
<div class="content flex flex-col justify-center leading-tight ml-3 text-white whitespace-pre">
<div class="font-bold .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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