WordPress子比主题美化教程合集-茉莉小栈

美化说明

主题美化和小工具可能会使网站加载缓慢、CSS全局污染等一系列问题，美化前一定要先测试
主题美化可能会修改主题文件，更新前请及时备份主题美化文件，以免丢失部分主题页面或美化效果

必要说明

CSS 代码添加：子比主题设置 – 全局功能 – 自定义代码 – 自定义CSS样式
JS 即 javascript 代码添加：子比主题设置 – 全局功能 – 自定义代码 – 自定义javascript代码
自定义 HTML 小工具：外观 – 小工具 – 自定义HTML – 选择放置位置 – 复制粘贴代码
其他添加方式会写在教程中，若只需添加 CSS+JS 的教程，请注意看上面的方法

美化教程

主题LOGO扫光

CSS代码

/* 主题logo扫光 */
.navbar-brand {
    position: relative;
    overflow: hidden;
    margin: 0px 0 0 0px;}

.navbar-brand:before {
    content: "";
    position: absolute;
    left: -665px;
    top: -460px;
    width: 200px;
    height: 15px;
    background-color: rgba(255, 255, 255, .5);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: searchLights 6s ease-in 0s infinite;
    -o-animation: searchLights 6s ease-in 0s infinite;
    animation: searchLights 6s ease-in 0s infinite;}

@-moz-keyframes searchLights {
    50% {left: -120px;top: 0;}
    65% {left: 350px;top: 0px;}}

@keyframes searchLights {
    40% {left: -120px;top: 0;}
    60% {left: 350px;top: 0px;}
    80% {left: -120px;top: 0px;}}
/* 主题logo扫光 */

文章缩略图动态图标

CSS代码

/* 文章缩略图动态图标 */
.item-thumbnail:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .35s;
    border-radius: 8px;
    z-index: 2;
    max-width: 765px;
    margin: 0 auto;
    pointer-events: none;}

.item-thumbnail:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    background: url(图标链接);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 3;
    -webkit-transform: scale(2);
    transform: scale(2);
    transition: opacity .35s, -webkit-transform .35s;
    transition: transform .35s, opacity .35s;
    transition: transform .35s, opacity .35s, -webkit-transform .35s;
    opacity: 0;
    pointer-events: none;}

.item-thumbnail:hover:before {
    background: rgba(0, 0, 0, .5)}

.item-thumbnail:hover:after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1}
/* 文章缩略图动态图标 */

文章标题渐变彩色文字

CSS代码

/* 文章标题渐变彩色文字 */
.pink {background-color: #777777 !important;}

@media screen and (min-width: 680px) {
    .joe_div {
        background: url(https://cdn.7uun.com/bq.png) right 10px bottom 10px no-repeat;
        background-size: 12%;}}

.joe_div {
    color: #989898;
    word-break: break-all;
    line-height: 25px;
    border-radius: 10px;
    border: 1px solid #777777;
    padding: 28px 14px 14px 14px;}

.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
    background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: maskedAnimation 4s infinite linear;}

@keyframes maskedAnimation {
    0% {background-position: 0 0}
    100% {background-position: -100% 0}}
/* 文章标题渐变彩色文字 */

昵称流彩字体效果

CSS代码

/* 昵称流彩字体效果 */
.display-name {
    background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 100% 600%;
    animation: wzw 10s linear infinite;}

@keyframes wzw {
    0% {background-position: 0 0;}
    100% {background-position: 0 -300%;}}
/* 昵称流彩字体效果 */

昵称抖音故障风格

CSS代码

/* 昵称抖音故障风格 */
.display-name {
    text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);
    animation: shake-it .5s reverse infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);}

@keyframes shake-it {
    0% {text-shadow: 0 0 rgba(0, 255, 255, .5), 0 0 rgba(255, 0, 0, .5);}
    25% {text-shadow: -2px 0 rgba(0, 255, 255, .5), 2px 0 rgba(255, 0, 0, .5);}
    50% {text-shadow: -5px 0 rgba(0, 255, 255, .5), 3px 0 rgba(255, 0, 0, .5);}
    100% {text-shadow: 3px 0 rgba(0, 255, 255, .5), 5px 0 rgba(255, 0, 0, .5);}}
/* 昵称抖音故障风格 */

网站底部二维码跑马灯

CSS代码

/* 网站底部二维码跑马灯 */
.footer-miniimg {
    p {position: relative;
        &:hover {filter: contrast(1.1);}
        &:active {filter: contrast(0.9);}
        &::before,
        &::after {
            content: "";
            border: 2px solid;
            border-image: linear-gradient(45deg, gold, deeppink) 1;
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            animation: clippath 3s infinite;}
        &::before {animation: clippath 3s infinite -1.5s linear;}}}

@keyframes clippath {
    0%,
    100% {clip-path: inset(0 0 96% 0);filter: hue-rotate(0deg);}
    25% {clip-path: inset(0 96% 0 0);}
    50% {clip-path: inset(96% 0 0 0);filter: hue-rotate(360deg);}
    75% {clip-path: inset(0 0 0 96%);}}
/* 网站底部二维码跑马灯 */

文章图片圆角

CSS代码

/* 文章图片圆角 */
.wp-posts-content img {border-radius: 13px};
/* 文章图片圆角 */

首页文章卡片五个布局

CSS代码

/*文章卡片排列X5*/
@media (min-width: 700px) {
.posts-item.card {
width: calc(20% - 16px);
}
}

子比主题文章左侧快捷框架

把代码放在 functions.php 下面
包含点赞、收藏、评论、分享按钮，修复了一下一直active状态

/**
 * 文章页面左侧浮动按钮 - 大海
 */
function zib_post_fixed_btns() {
    global $post;
    if (wp_is_mobile() || !is_single() || $post->post_type !== 'post') return '';
    
    $id = $post->ID;
    $logged = is_user_logged_in();
    $btns = '';
    
    $items = [];
    if (_pz('post_like_s')) $items[] = ['like', 'like', 'pf-like'];
    $items[] = ['favorite', 'favorite', 'pf-fav'];
    
    foreach ($items as $i) {
        $c = get_post_meta($id, $i[0], true) ?: '';
        $cls = (('like' === $i[0] ? zib_is_my_like($id) : zib_is_my_favorite($id)) ? ' actived' : '') . ($logged ? '' : ' signin-loader');
        $act = $logged ? ' data-action="' . $i[0] . '"' : '';
        $btns .= '<a href="javascript:;"' . $act . ' class="pf-btn ' . $i[2] . $cls . '" data-pid="' . $id . '">' . zib_get_svg($i[1]) . '<count>' . $c . '</count><b class="pf-num">' . $c . '</b></a>';
    }
    
    $btns .= '<a href="#comments" class="pf-btn" onclick="scrollTopTo(\'#comments\');return false;">' . zib_get_svg('comment') . '<b class="pf-num">' . (get_comments_number($id) ?: '') . '</b></a>';
    
    if (_pz('share_s')) $btns .= '<i class="pf-line"></i><span class="pf-btn hover-show">' . zib_get_svg('share') . '<div class="pf-share zib-widget hover-show-con">' . zib_get_share('', $post) . '</div></span>';
    
    return '<div class="post-fixed"><div class="pf-inner">' . $btns . '</div></div>';
}

add_action('zib_single_before', function() { echo zib_post_fixed_btns(); });

add_action('wp_head', function() {
    if (!is_single()) return;
    echo '<style>.post-fixed{display:none}@media(min-width:1200px){.content-layout{position:relative}.post-fixed{display:block;position:sticky;top:88px;float:left;margin-left:-88px;margin-bottom:-999px;width:70px;z-index:99}.pf-inner{background:var(--main-bg-color);border-radius:var(--main-radius);box-shadow:0 2px 10px rgba(0,0,0,.08);padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px}.pf-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--muted-border-color);color:var(--muted-2-color);transition:.3s;cursor:pointer;position:relative}.pf-btn:hover,.pf-btn.actived{color:var(--focus-color)}.pf-btn:focus{outline:none;color:var(--muted-2-color)}.pf-btn.actived:focus{color:var(--focus-color)}.pf-btn>.icon{font-size:22px}.pf-btn>count,.pf-btn>text{display:none}.pf-num{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;font-size:10px;line-height:18px;text-align:center;color:#fff;background:var(--focus-color);border-radius:10px}.pf-num:empty{display:none}.pf-line{width:30px;height:1px;background:var(--muted-border-color);margin:4px 0}.pf-share.hover-show-con{position:absolute!important;left:58px!important;top:50%!important;transform:translateY(-50%)!important;width:60px!important;padding:10px 9px!important;border-radius:var(--main-radius);box-shadow:0 2px 12px rgba(0,0,0,.1)}.pf-share.hover-show-con::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border:8px solid transparent;border-right-color:var(--main-bg-color);border-left-width:0}.pf-share .share-btn{width:42px!important;height:42px!important;display:flex!important;align-items:center;justify-content:center;margin:0 0 6px!important;padding:0!important}.pf-share .share-btn:last-child{margin-bottom:0!important}.pf-share .share-btn text{display:none!important}.pf-share .share-btn icon{margin:0!important}}@media(max-width:1399px){.post-fixed{display:none!important}}</style>';
});

add_action('wp_footer', function() {
    if (!is_single()) return;
    echo "<script>$('.pf-btn count').each(function(){var b=$(this).siblings('.pf-num');new MutationObserver(function(m){var t=m[0].target.textContent;b.text(t&&t!='0'?t:'')}).observe(this,{childList:1,subtree:1})});</script>";
});

子比底部统计小工具

把代码放在 functions.php，图片和 clock.html 放在zibll主题的 /zibll/img/zyx 里面。
这里的五个图标使用的是阿里图标，直接写 图标代码
在小工具里面支持修改这几个数据的 虚拟数量+实际数据=显示数据。

/**
 * ZYX 底部统计小工具 - 放入子比主题 func.php
 * 图片需要上传到主题目录: /img/zyx/ 下面放置 week-0.png 到 week-6.png
 */

// ========== 辅助函数 ==========
function zyx_func_comments_users($postid = 0, $which = 0) {
    $comments = get_comments('status=approve&type=comment&post_id=' . $postid);
    if ($comments) {
        $i = 0; $j = 0; $commentusers = array();
        foreach ($comments as $comment) {
            ++$i;
            if ($i == 1) { $commentusers[] = $comment->comment_author_email; ++$j; }
            if (!in_array($comment->comment_author_email, $commentusers)) {
                $commentusers[] = $comment->comment_author_email;
                ++$j;
            }
        }
        return ($which == 0) ? $j : $i;
    }
    return 0;
}

function zyx_get_all_views() {
    global $wpdb;
    $count = 0;
    $views = $wpdb->get_results("SELECT meta_value FROM $wpdb->postmeta WHERE meta_key='views'");
    foreach ($views as $value) {
        if ($value->meta_value != ' ') $count += (int)$value->meta_value;
    }
    return $count;
}

// ========== 样式输出 ==========
function zyx_output_widget_style() {
    static $styled = false;
    if ($styled) return;
    $styled = true;
    ?>
    <style>
.zyx-info-item{display:grid;grid-gap:15px;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(2,1fr);width:100%;height:280px;margin-bottom:15px}
.zyx-stat-box{width:100%;height:100%;border-radius:var(--main-radius);text-align:center;background-color:var(--main-bg-color);overflow:hidden;padding:5px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column}
.zyx-i-num{font-size:20px;font-weight:600}
.zyx-wz-item{display:grid;grid-gap:20px;grid-template-columns:repeat(2,1fr);grid-column:3/6;grid-row:1/2;overflow:unset!important;box-shadow:none!important;padding:0!important}
.zyx-wz-sty{width:100%;height:100%;border-radius:var(--main-radius);display:flex;align-items:center;justify-content:center;flex-direction:column;background-color:var(--main-bg-color)}
.zyx-date-box{grid-row:1/3;grid-column:1/3}
.zyx-date-inner{position:relative;font-size:18px;font-weight:500;text-align:center;width:100%;height:100%;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center}
.zyx-date-content{text-align:center;margin-top:10px}
.zyx-emo-item{width:282px;height:120px;margin:0 auto}
.zyx-emo-item>img{width:100%;height:100%;background-size:cover;cursor:pointer}
svg.icon.fa-2x{margin-top:15px}
.zyx-clock-box{grid-row:1/3;grid-column:6/6;width:100%;height:100%;border-radius:var(--main-radius);text-align:center;background-color:var(--main-bg-color);box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.zyx-clock-box iframe{border:none;border-radius:var(--main-radius)}
@media screen and (max-width:959px){.zyx-info-item{grid-gap:10px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);height:500px}.zyx-date-box{grid-row:3/5;grid-column:1/4}.zyx-i-num{font-size:20px}.zyx-date-inner{font-size:16px}.zyx-wz-item{grid-column:1/4}.zyx-clock-box{display:none}}
    </style>
    <?php
}

// ========== HTML输出 ==========
function zyx_output_widget_html($posts, $comments, $days, $users, $views, $icon_days, $icon_users, $icon_views, $icon_posts, $icon_comments, $img_url) {
    $uid = 'zyx-' . uniqid();
    ?>
    <div class="textwidget" id="<?php echo $uid; ?>">
      <div class="zyx-info-item">
        <div class="zyx-stat-box">
          <svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_days; ?>"></use></svg>
          <span class="zyx-i-num"><?php echo number_format($days); ?>天</span>
          <p>运行时间</p>
        </div>
        <div class="zyx-stat-box">
          <svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_users; ?>"></use></svg>
          <span class="zyx-i-num"><?php echo number_format($users); ?>位</span>
          <p>注册用户</p>
        </div>
        <div class="zyx-stat-box">
          <svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_views; ?>"></use></svg>
          <span class="zyx-i-num"><?php echo number_format($views); ?>次</span>
          <p>浏览总数</p>
        </div>
        <div class="zyx-wz-item">
          <div class="zyx-wz-sty">
            <svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_posts; ?>"></use></svg>
            <span class="zyx-i-num"><?php echo number_format($posts); ?>篇</span>
            <p>文章总数</p>
          </div>
          <div class="zyx-wz-sty">
            <svg class="icon fa-2x" aria-hidden="true"><use xlink:href="#<?php echo $icon_comments; ?>"></use></svg>
            <span class="zyx-i-num"><?php echo number_format($comments); ?>条</span>
            <p>评论条数</p>
          </div>
        </div>
        <div class="zyx-stat-box zyx-date-box">
          <div class="zyx-date-inner">
            <span class="zyx-i-num">Today is</span>
            <div class="zyx-date-text"></div>
            <div class="zyx-emo-item"><img class="zyx-emo-img" src="<?php echo $img_url; ?>week-1.png" alt="emo"></div>
            <div class="zyx-date-content"><span class="zyx-fatalism"></span></div>
          </div>
        </div>
        <!-- 时钟iframe -->
        <div class="zyx-clock-box">
          <iframe src="<?php echo get_template_directory_uri(); ?>/img/zyx/clock.html" width="290" height="290" frameborder="no"></iframe>
        </div>
      </div>
    </div>
    <script>
    jQuery(function($){
      var d=new Date(),w=d.getDay(),ws=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
      $("#<?php echo $uid; ?> .zyx-date-text").html(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+ws[w]);
      $("#<?php echo $uid; ?> .zyx-fatalism").html(w>0&&w<5?"再坚持一下还有"+(5-w)+"天就到周末啦！":w===5?"啊啊啊，明天就是周末啦！":"今天是周末，好好休息一下吧！");
      $("#<?php echo $uid; ?> .zyx-emo-img").attr("src","<?php echo $img_url; ?>week-"+w+".png");
      $("#<?php echo $uid; ?>").parents(".zib-widget").css({padding:"0",background:"none"});
    });
    </script>
    <?php
}

// ========== 小工具输出函数 ==========
function zyx_widget_stats_output($args, $instance) {
    $show_class = Zib_CFSwidget::show_class($instance);
    if (!$show_class) return;

    $widget_kzsj = $instance['widget_kzsj'] ?? '2025/01/01 00:00:00';
    $virtual = $instance['virtual_option'] ?? array();
    $icons = $instance['icon_option'] ?? array();

    $count_posts = wp_count_posts();
    $published_posts = $count_posts->publish + intval($virtual['virtual_posts'] ?? 0);
    $post_comments = zyx_func_comments_users() + intval($virtual['virtual_comments'] ?? 0);
    $run_days = floor((time() - strtotime($widget_kzsj)) / 86400) + intval($virtual['virtual_days'] ?? 0);
    global $wpdb;
    $users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users") + intval($virtual['virtual_users'] ?? 0);
    $views = zyx_get_all_views() + intval($virtual['virtual_views'] ?? 0);

    $icon_days = esc_attr($icons['icon_days'] ?? 'icon-rili1');
    $icon_users = esc_attr($icons['icon_users'] ?? 'icon-yonghu');
    $icon_views = esc_attr($icons['icon_views'] ?? 'icon-fangke');
    $icon_posts = esc_attr($icons['icon_posts'] ?? 'icon-chaxun');
    $icon_comments = esc_attr($icons['icon_comments'] ?? 'icon-xiaoxi1');

    $img_url = get_template_directory_uri() . '/img/zyx/';

    Zib_CFSwidget::echo_before($instance, 'zib-widget');
    zyx_output_widget_style();
    zyx_output_widget_html($published_posts, $post_comments, $run_days, $users, $views, $icon_days, $icon_users, $icon_views, $icon_posts, $icon_comments, $img_url);
    Zib_CFSwidget::echo_after($instance);
}

// ========== 注册小工具 ==========
function zyx_widget_stats_create() {
    if (!class_exists('Zib_CFSwidget')) return;
    
    Zib_CFSwidget::create('zyx_widget_stats_output', array(
        'title'       => 'ZYX 底部统计小工具',
        'zib_title'   => true,
        'zib_affix'   => true,
        'zib_show'    => true,
        'description' => '底部统计小工具，显示网站运行数据和时钟',
        'fields'      => array(
            array(
                'id'      => 'widget_kzsj',
                'title'   => '开站时间',
                'default' => '2025/01/01 00:00:00',
                'type'    => 'text',
                'desc'    => '格式：2025/01/01 00:00:00',
            ),
            array(
                'id'         => 'virtual_option',
                'type'       => 'accordion',
                'title'      => '虚拟数量设置',
                'default'    => array('virtual_days' => 0, 'virtual_users' => 0, 'virtual_views' => 0, 'virtual_posts' => 0, 'virtual_comments' => 0),
                'accordions' => array(array(
                    'title'  => '虚拟数量设置',
                    'icon'   => 'fa fa-fw fa-angle-right',
                    'fields' => array(
                        array('id' => 'virtual_days', 'type' => 'number', 'title' => '虚拟运行天数', 'default' => 0),
                        array('id' => 'virtual_users', 'type' => 'number', 'title' => '虚拟用户数', 'default' => 0),
                        array('id' => 'virtual_views', 'type' => 'number', 'title' => '虚拟浏览量', 'default' => 0),
                        array('id' => 'virtual_posts', 'type' => 'number', 'title' => '虚拟文章数', 'default' => 0),
                        array('id' => 'virtual_comments', 'type' => 'number', 'title' => '虚拟评论数', 'default' => 0),
                    ),
                )),
            ),
            array(
                'id'         => 'icon_option',
                'type'       => 'accordion',
                'title'      => '图标设置',
                'default'    => array('icon_days' => 'icon-rili1', 'icon_users' => 'icon-yonghu', 'icon_views' => 'icon-fangke', 'icon_posts' => 'icon-chaxun', 'icon_comments' => 'icon-xiaoxi1'),
                'accordions' => array(array(
                    'title'  => '图标设置',
                    'icon'   => 'fa fa-fw fa-angle-right',
                    'fields' => array(
                        array('id' => 'icon_days', 'type' => 'text', 'title' => '运行天数图标', 'default' => 'icon-rili1', 'desc' => '填入子比主题图标名称'),
                        array('id' => 'icon_users', 'type' => 'text', 'title' => '用户数图标', 'default' => 'icon-yonghu'),
                        array('id' => 'icon_views', 'type' => 'text', 'title' => '浏览量图标', 'default' => 'icon-fangke'),
                        array('id' => 'icon_posts', 'type' => 'text', 'title' => '文章数图标', 'default' => 'icon-chaxun'),
                        array('id' => 'icon_comments', 'type' => 'text', 'title' => '评论数图标', 'default' => 'icon-xiaoxi1'),
                    ),
                )),
            ),
        ),
    ));
}
zyx_widget_stats_create();

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>进程时钟</title>
<style>
*{border:0;box-sizing:border-box;margin:0;padding:0}
:root{--hue:223;--bg:hsl(var(--hue),10%,90%);--fg:hsl(var(--hue),10%,10%);font-size:calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320))}
body,button{color:#000;font:1em/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{background-color:var(--main-bg-color);height:97vh;display:grid;place-items:center}
.progress-clock{display:grid;justify-content:center;align-content:center;position:relative;text-align:center;width:16em;height:16em;border-radius:var(--main-radius)}
.progress-clock__time-date,.progress-clock__time-digit,.progress-clock__time-colon,.progress-clock__time-ampm{transition:color .2s linear;-webkit-user-select:none;-moz-user-select:none;user-select:none}
.progress-clock__time-date,.progress-clock__time-digit{background:transparent}
.progress-clock__time-date,.progress-clock__time-ampm{grid-column:1/6}
.progress-clock__time-date{font-size:.75em;line-height:1.33}
.progress-clock__time-digit,.progress-clock__time-colon{font-size:2em;font-weight:400;grid-row:2}
.progress-clock__time-colon{line-height:1.275}
.progress-clock__time-ampm{cursor:default;grid-row:3}
.progress-clock__rings{display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}
.progress-clock__ring{opacity:.1}
.progress-clock__ring-fill{transition:opacity 0s .3s linear,stroke-dashoffset .3s ease-in-out}
.progress-clock__ring-fill--360{opacity:0;stroke-dashoffset:0;transition-duration:.3s}
[data-group]:focus{outline:transparent}
[data-units]{transition:opacity .2s linear}
[data-group="d"]:focus,[data-group="d"]:hover{color:hsl(333,90%,55%)}
[data-group="h"]:focus,[data-group="h"]:hover{color:hsl(33,90%,55%)}
[data-group="m"]:focus,[data-group="m"]:hover{color:hsl(213,90%,55%)}
[data-group="s"]:focus,[data-group="s"]:hover{color:hsl(273,90%,55%)}
[data-group]:focus~.progress-clock__rings [data-units],[data-group]:hover~.progress-clock__rings [data-units]{opacity:.2}
[data-group="d"]:focus~.progress-clock__rings [data-units="d"],[data-group="d"]:hover~.progress-clock__rings [data-units="d"],[data-group="h"]:focus~.progress-clock__rings [data-units="h"],[data-group="h"]:hover~.progress-clock__rings [data-units="h"],[data-group="m"]:focus~.progress-clock__rings [data-units="m"],[data-group="m"]:hover~.progress-clock__rings [data-units="m"],[data-group="s"]:focus~.progress-clock__rings [data-units="s"],[data-group="s"]:hover~.progress-clock__rings [data-units="s"]{opacity:1}
@media(prefers-color-scheme:dark){:root{--bg:hsl(var(--hue),10%,10%);--fg:hsl(var(--hue),10%,90%)}.progress-clock__ring{opacity:.2}}
</style>
</head>
<body>
<div id="clock" class="progress-clock">
<button class="progress-clock__time-date" data-group="d" type="button">
<small data-unit="w">Wednesday</small><br>
<span data-unit="mo">September</span>
<span data-unit="d">13</span>
</button>
<button class="progress-clock__time-digit" data-unit="h" data-group="h" type="button">10</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="m" data-group="m" type="button">48</button><span class="progress-clock__time-colon">:</span><button class="progress-clock__time-digit" data-unit="s" data-group="s" type="button">44</button>
<svg class="progress-clock__rings" width="256" height="256" viewbox="0 0 256 256">
<defs>
<linearGradient id="pc-red" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(343,90%,55%)"/><stop offset="100%" stop-color="hsl(323,90%,55%)"/></linearGradient>
<linearGradient id="pc-yellow" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(43,90%,55%)"/><stop offset="100%" stop-color="hsl(23,90%,55%)"/></linearGradient>
<linearGradient id="pc-blue" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(223,90%,55%)"/><stop offset="100%" stop-color="hsl(203,90%,55%)"/></linearGradient>
<linearGradient id="pc-purple" x1="1" y1="0.5" x2="0" y2="0.5"><stop offset="0%" stop-color="hsl(283,90%,55%)"/><stop offset="100%" stop-color="hsl(263,90%,55%)"/></linearGradient>
</defs>
<g data-units="d"><circle class="progress-clock__ring" cx="128" cy="128" r="74" fill="none" opacity="0.1" stroke="url(#pc-red)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="mo" cx="128" cy="128" r="74" fill="none" stroke="url(#pc-red)" stroke-width="12" stroke-dasharray="465 465" stroke-dashoffset="465" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
<g data-units="h"><circle class="progress-clock__ring" cx="128" cy="128" r="90" fill="none" opacity="0.1" stroke="url(#pc-yellow)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="d" cx="128" cy="128" r="90" fill="none" stroke="url(#pc-yellow)" stroke-width="12" stroke-dasharray="565.5 565.5" stroke-dashoffset="565.5" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
<g data-units="m"><circle class="progress-clock__ring" cx="128" cy="128" r="106" fill="none" opacity="0.1" stroke="url(#pc-blue)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="h" cx="128" cy="128" r="106" fill="none" stroke="url(#pc-blue)" stroke-width="12" stroke-dasharray="666 666" stroke-dashoffset="666" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
<g data-units="s"><circle class="progress-clock__ring" cx="128" cy="128" r="122" fill="none" opacity="0.1" stroke="url(#pc-purple)" stroke-width="12"/><circle class="progress-clock__ring-fill" data-ring="m" cx="128" cy="128" r="122" fill="none" stroke="url(#pc-purple)" stroke-width="12" stroke-dasharray="766.5 766.5" stroke-dashoffset="766.5" stroke-linecap="round" transform="rotate(-90,128,128)"/></g>
</svg>
</div>
<script>
class ProgressClock{
  constructor(qs){this.el=document.querySelector(qs);this.update()}
  getDayOfWeek(d){return["星期日","星期一","星期二","星期三","星期四","星期五","星期六"][d]}
  getMonthInfo(mo,yr){const m=[{name:"1 月",days:31},{name:"2 月",days:yr%4===0?29:28},{name:"3 月",days:31},{name:"4 月",days:30},{name:"5 月",days:31},{name:"6 月",days:30},{name:"7 月",days:31},{name:"8 月",days:31},{name:"9 月",days:30},{name:"10 月",days:31},{name:"11 月",days:30},{name:"12 月",days:31}];return m[mo]}
  update(){
    const t=new Date(),day=t.getDate(),hr=t.getHours(),min=t.getMinutes(),sec=t.getSeconds();
    const monthInfo=this.getMonthInfo(t.getMonth(),t.getFullYear());
    const m_p=sec/60,h_p=(min+m_p)/60,d_p=(hr+h_p)/24,mo_p=((day-1)+d_p)/monthInfo.days;
    const units=[{label:"w",value:this.getDayOfWeek(t.getDay())},{label:"mo",value:monthInfo.name,progress:mo_p},{label:"d",value:day,progress:d_p},{label:"h",value:hr>12?hr-12:hr,progress:h_p},{label:"m",value:min<10?"0"+min:min,progress:m_p},{label:"s",value:sec<10?"0"+sec:sec}];
    units.forEach(u=>{
      const ring=this.el.querySelector(`[data-ring="${u.label}"]`);
      if(ring){const c=+ring.getAttribute("stroke-dasharray").split(" ")[0];ring.setAttribute("stroke-dashoffset",(1-u.progress)*c)}
      const unit=this.el.querySelector(`[data-unit="${u.label}"]`);
      if(unit)unit.innerText=u.value;
    });
    setTimeout(()=>this.update(),1000);
  }
}
new ProgressClock("#clock");
</script>
</body></html>

week.zip

下载

本站名称：茉莉小栈

本站网址：www.5iml.com

本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。

本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。

本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。

本站附件资源、教程等内容如因时效原因失效或不可用，请评论区留言或联系站长及时更新。

THE END