评论可见
前往评论
温馨提示：这篇文章已超过385天没有更新，请注意相关的内容是否还可用！
让你的 Typecho 博客增添萤火虫氛围效果，纯 CSS 无 JS 加载，可全局使用、可指定任意文章页显示，在暗调页面下效果更优。
A 引入 CSS
隐藏内容
B 引入 JS
<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style>
<script>
var firefly = "";
for (var i = 1; i <= 100; i++) {
firefly = '<div class="circle-container"><div class="circle"></div></div>';
document.writeln(firefly);
}
</script>C 示例
在缩略名（slug）为 about-me 的独立页面添加萤火虫效果，操作如下：
在主题文件 page.php 适当位置，或者！如果 page.php 有引入 footer.php 的话，也可以在 footer.php 适当位置，添加以下代码。
<?php if ($this->is('page','about-me')): //仅 about-me 显示萤火虫效果 ?>
<link rel="stylesheet" href="<?php $this->options->themeUrl('css/lopwon.firefly.css'); //样式路径 ?>" />
<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style>
<script>
var firefly = "";
for (var i = 1; i <= 100; i++) {
firefly = '<div class="circle-container"><div class="circle"></div></div>';
document.writeln(firefly);
}
</script>
<?php endif; ?>将以上代码中的 about-me 和样式路径（css/lopwon.firefly.css）替换为自己的，如果不显示萤火虫效果，可尝试修改 style 中的 z-index 层叠值（如：9）。
如果想在多个独立页面同时使用萤火虫效果，可以将以上代码中的 if 语句修改为：
<?php if ($this->is('page','about-me') or $this->is('page','test')): //将 about-me 和 test 同时显示萤火虫效果 ?>
发表评论