tailwindcss实现酷炫环状图表动画显示效果代码
代码语言:html
所属分类:图表
代码描述:tailwindcss实现酷炫环状图表动画显示效果代码
代码标签: tailwind css 酷炫 环状 图表 动画 显示
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" /> </head> <body class="bg-gradient-to-t from-slate-950 to-slate-800 text-gray-700 flex justify-center items-center min-h-screen p-4 before:bg-[url(//repo.bfw.wiki/bfwrepo/image/6675f60590815.png)] before:-inset-0 before:fixed before:opacity-50 before:bg-cover before:bg-center before:bg-no-repeat before:-z-10 "> <main class="bg-black/20 backdrop-blur-md border border-white/10 text-white p-12 shadow-lg rounded-3xl w-full max-w-sm sm:max-w-xl"> <h1 class="animate-in font-semibold text-xl" style="--d:300ms">Recycled</h1> <section class="flex flex-col sm:flex-row items-center gap-12 mt-6"> <div> <svg id="circular-chart" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="90" fill="none" stroke="transparent" stroke-width="20"/> <text x="100" y="85" text-anchor="middle" font-size="12" fill="#FFF">Total</text> <text x="100" y="115" text-anchor="middle" font-size="24" fill="#FFF">$47.1k</text> </svg> </div> <div id="barChartContainer" class="h-32 w-full text-xs space-y-2 [&_.bar]:flex [&_.bar]:items-center [&_.bar]:gap-2 [&_.bar_label]:whitespace-nowrap [&_.bar_label]:w-24 [&_.bar_p]:font-bold [&_.bar>div]:h-2 [&_.bar>div]:rounded-full .........完整代码请登录后点击上方下载按钮下载查看
网友评论0