分享一个按钮收藏网站,纯CSS实现各种特效按钮!

地址:https://uiverse.io/

分享一个按钮收藏网站,纯CSS实现各种特效按钮!插图

找到了网站的接口,本想爬一下的,懒得搞了,写了几行代码,有需要的同学自取。等有时间了搞个镜像网站。

PHP代码,分析接口,生成html保存。

$uiverse = file_get_contents("https://api.uiverse.io/buttons?type=button&orderBy=popular", true);
$content = json_decode($uiverse);
foreach ($content->buttons as $v){
    $first = mb_strpos($v->scopedCss,".");
    $last = mb_strpos($v->scopedCss," ");
    $class = mb_substr($v->scopedCss,$first+1,$last);
    //echo("<pre>");print_r($class);exit();
    $html = '<html>
                <head>
                <meta charset="UTF-8">
                <title> Document </title>
                <style>' . $v->scopedCss . '</style>
                </head>
                <body><div class="' . $class . '">' . $v->html . '</div></body>
                </html>';
    if (!file_exists("html")){
        mkdir ("html",0777,true);
    }
    //设置静态文件路径及文件名
    $filename="html/$v->id.html";
    //写入文件
    $fp = fopen($filename, 'w');
    fwrite($fp, $html);
    exit();
}

接口列表

"https://api.uiverse.io/buttons?type=button&orderBy=popular",
"https://api.uiverse.io/buttons?type=button-of-the-day&orderBy=popular",
"https://api.uiverse.io/buttons?type=card&orderBy=popular",
"https://api.uiverse.io/buttons?type=checkbox&orderBy=popular",
"https://api.uiverse.io/buttons?type=input&orderBy=popular",
"https://api.uiverse.io/buttons?type=spinner&orderBy=popular",
"https://api.uiverse.io/buttons?type=switch&orderBy=popular",

 

发表评论

后才能评论