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