gsap实现手机卡片式交互UI效果代码
代码语言：html
所属分类：布局界面
代码描述：gsap实现手机卡片式交互UI效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
body {
font-family: "Roboto", sans-serif;
color: white;
background: linear-gradient(180deg, #ae5c49 0%, #593733 100%);
}
.mock-window {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 72px 1fr 100px;
background-color: #131517;
}
@media (min-width: 640px) {
.mock-window {
width: 414px;
height: 896px;
}
}
.device-details {
grid-row: 1/2;
grid-column: 1/2;
}
.page {
grid-row: 1/4;
grid-column: 1/2;
}
.backdrop {
grid-row: 1/4;
grid-column: 1/2;
background: #171010;
display: none;
}
.bottom-nav {
grid-row: 3/4;
grid-column: 1/2;
}
.device-top {
height: 72px;
}
.nav {
height: 120px;
}
.titles {
height: 72px;
}
.tabs {
height: 48px;
}
.card {
border-radius: 24px;
}
.card-1 {
background: url("//repo.bfw.wiki/bfwrepo/image/5e965addb956a.png");
background-size: 366px 366px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.card-2 {
background: url("//repo.bfw.wiki/bfwrepo/image/5f24e1feda734.png");
background-size: 366px 366px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.card-3 {
background: url("//repo.bfw.wiki/bfwrepo/image/5f97a6be6a396.png");
background-size: 366px 366px;
background-repeat: no-repeat;
background-position: 0px 0px;
}
.tab-selected {
background-color: #444346;
}
.text-secondary {
color: #9fa1a3;
}
.absolute-center {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.test {
transform: translate(-100px, -100px);
}
.test1 {
transform: translate(0px, -100px);
}
.test2 {
transform: translate(100px, -100px);
}
.btn-options {
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}
</style>
</head>
<body >
<div class="w-full h-screen overflow-hidden flex items-center justify-center">
<div class="mock-window">
<div class="page overflow-hidden">
<div class="device-top hidden sm:block"></div>
<div class="nav overflow-hidden mt-6 sm:mt-0">
<div class="title-sets">
<div class="title-set-1">
<div class="titles">
<div class="uppercase px-6 text-secondary">
Sunday, September 7
</div>
<div class="px-6 font-bold" style="font-size: 30px">
For You
</div>
</div>
<div class="tabs flex px-6 justify-between">
<button class="tab-selected px-5 rounded-full">Nature</button>
<button class="px-5 rounded-full text-secondary">City</button>
<button class="px-5 rounded-full text-secondary">
People
</button>
<button class="px-5 rounded-full text-secondary">
Animals
</button>
</div>
</div>
<div class="title-set-2">
<div class="titles flex items-center justify-between">
<div class="">
<div class="uppercase px-6 text-secondary">Collections</div>
<div class="px-6 font-bold" style="font-size: 30px">
Plants
</div>
</div>
<div class="pr-6 h-full flex items-center">
<div class="rounded-full p-2 flex items-center justify-center" style="
height: 50px;
width: 50px;
background-color: #424446;
">
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-list.svg" alt="" class="w-full h-full" />
</div>
<div class="
rounded-full
ml-4
p-2
flex
items-center
justify-center
" style="
height: 50px;
width: 50px;
background-color: #1e1e20;
">
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-grid.svg" alt="" class="w-full h-full" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="p-6 section-1 overflow-hidden" style="height: 414px" id="section-1">
<div class="card-set relative" style="border-radius: 24px; height: 366px; width: 366px">
<div class="card card-3 absolute inset-0 flex items-end">
<div class="p-6">
<div class="flex items-center user-details">
<div class="avatar-border rounded-full" style="width: 64px; height: 64px">
<img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="" class="w-full rounded-full" />
</div>
<div class="ml-3">
<div class="font-bold" style="font-size: 21px">
Emma Wallace
</div>
<div class="">13 Photos</div>
</div>
</div>
</div>
</div>
<div class="card card-2 absolute inset-0 flex items-end">
<div class="p-6">
<div class="flex items-center user-details">
<div class="avatar-border rounded-full" style="width: 64px; height: 64px">
<img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="" class="w-full rounded-full" />
</div>
<div class="ml-3">
<div class="font-bold" style="font-size: 21px">
Harry Sans
</div>
<div class="">16 Photos</div>
</div>
</div>
</div>
</div>
<div class="card card-1 absolute inset-0 flex items-end">
<div class="p-6">
<div class="flex items-center user-details">
<div class="avatar-border rounded-full" style="width: 64px; height: 64px">
<img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" alt="" class="w-full rounded-full" />
</div>
<div class="ml-3">
<div class="font-bold" style="font-size: 21px">
Emma Wallace
</div>
<div class="">13 Photos</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 gallery">
<div class="flex items-center mt-6">
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-pin.svg" alt="" style="height: 16px" />
<div class="ml-1 font-semibold">New Zeland</div>
</div>
<div class="py-4 text-secondary" style="font-size: 18px">
A New Zeland based product designer who specializes in
interaction design
</div>
<div class="flex mt-2">
<div class="w-1/2 pr-3">
<div class="py-3 w-full" style="height: 190px">
<img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
</div>
<div class="py-3 w-full" style="height: 270px">
<img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
</div>
</div>
<div class="w-1/2 pl-3">
<div class="py-3 w-full" style="height: 130px">
<img src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
</div>
<div class="py-3 w-full" style="height: 200px">
<img src="//repo.bfw.wiki/bfwrepo/image/607d718558628.png" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
</div>
<div class="py-3 w-full" style="height: 130px">
<img src="//repo.bfw.wiki/bfwrepo/image/5e62ef82c83ea.png" class="w-full h-full object-cover object-center" alt="" style="border-radius: 24px" />
</div>
</div>
</div>
</div>
</div>
<div class="p-6 section-2" style="height: 414px">
<div class="h-full overflow-hidden" style="border-radius: 24px">
<img src="//repo.bfw.wiki/bfwrepo/image/60ece322d6263.png" alt="" class="w-full h-full" />
</div>
</div>
</div>
<div class="backdrop" style="transform: translate(0px)"></div>
<div class="device-details text-white px-6 pt-3 hidden sm:block" style="transform: translate(0px)">
<div class="flex items-center justify-between">
<div class="">9:41</div>
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-device.svg" alt="" style="height: 26px" />
</div>
</div>
<div class="bottom-nav px-6 pt-3" style="transform: translate(0px)">
<div class="relative w-full" style="height: 64px">
<div class="
absolute
inset-0
rounded-full
flex
items-center
justify-between
px-3
nav-bottom-back
" style="background: #c0c0c0cc">
<div class="rounded-full relative btn-home" style="height: 48px; width: 48px; background-color: #f8f8f8">
<div class="
absolute
inset-0
flex
items-center
justify-center
icon-home
">
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-home.svg" alt="" />
</div>
<div class="
absolute
inset-0
flex
items-center
justify-center
icon-arrow-down
">
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-arrow-down.svg" alt="" />
</div>
</div>
<div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
<img src="//repo.bfw.wiki//bfwrepo/svg/card-interactions-gsap-search.svg" alt="" />
</div>
<div class="
bg-pink-500
rounded-full
flex
items-center
justify-center
" style="height: 48px; width: 48px"></div>
<div class="rounded-full flex items-center justify-center" style="height: 48px; width: 48px">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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