tailwind布局一个手机未接电话ui交互效果代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局一个手机未接电话ui交互效果代码，无js代码，点击未接电话展开详情。
代码标签： tailwind 布局 手机 未接 电话 ui 交互
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss_3.3.3.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
</head>
<body >
<body class="bg-gradient-to-t from-violet-400 via-rose-200 to-indigo-200 flex justify-center items-center min-h-screen">
<div id="device" class=" bg-zinc-100 h-[600px] rounded-[2.5rem] w-full max-w-xs relative isolate text-black border-8 border-black outline outline-white/50 outline-1 shadow-xl ring-2 ring-black/5
before:bg-[url(//repo.bfw.wiki/bfwrepo/image/5e323253cf4d2.png)]
before:inset-0
before:absolute
before:opacity-50
before:bg-cover
before:bg-center
before:bg-no-repeat
before:-z-10
before:rounded-[2rem]
">
<!-- side buttons (to improve) -->
<div class="absolute h-12 w-1 bg-zinc-900 -left-3 top-24 rounded-l-md border-r border-white/30"></div>
<div class="absolute h-12 w-1 bg-zinc-900 -left-3 top-40 rounded-l-md border-r border-white/30"></div>
<div class="absolute h-20 w-1 bg-zinc-900 -right-3 top-28 rounded-r-md border-l border-white/30"></div>
<!-- top icons -->
<header class="grid grid-cols-3 gap-1 items-center text-xs py-2 px-3">
<div class="flex items-center gap-1">12:37 pm</div>
<div class="mx-auto relative rounded-full bg-black py-2 w-24 px-3 flex items-center">
<div class="lens bg-[#080928] shadow-inner shadow-indigo-600 ml-auto size-3 rounded-full"></div>
</div>
<div class="flex items-center gap-1">
<span class="material-symbols-outlined ml-auto text-base">bluetooth</span>
<span class="material-symbols-outlined text-base">signal_cellular_alt</span>
<span class="material-symbols-outlined text-base">wifi</span>
<span class="material-symbols-outlined rotate-180 text-base">battery_horiz_075</span>
</div>
</header>
<!-- content -->
<main class="mx-4 sm:mx-8">
<input type="checkbox" id="radio-1" class="sr-only peer">
<div class="relative isolate text-black transition-all duration-1000
peer-checked:w-full
peer-checked:[&_#panel-1]:[grid-template-rows:1fr]
peer-checked:[&_#panel-1]:delay-0
peer-checked:[&_#icon-phone]:animate-none
peer-checked:[&_#panel-1_button]:translate-x-0
peer-checked:[&_#panel-1_button]:delay-300
peer-checked:[&_#btn-close]:translate-x-0
peer-checked:[&_#btn-close]:delay-700
">
<label for="radio-1" class="flex items-center justify-center gap-4 rounded-3xl bg-black text-white py-2 px-4 mt-4 transition-all duration-300 hover:scale-105 cursor-pointer overflow-hidden">
<span id="icon-phone" class="material-symbols-outlined text-red-400 text-3xl animate-pulse">phone_c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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