Typecho不同分类文章标题显示不同颜色
2023-01-09
分类: typecho
简介:如果你想在index页面,让文章标题的颜色根据分类显示,那么就打开你的模板文件夹下的index.php文件,将:<h2 class="entry_title"></h2>替换为 <h2 class="entry_title"> <a href="<?php $this >permalink() ?>" class="<?php echo $this >category; ?>"><?php $this >title() ?></a> </h2>这样就会在index页面的每篇文章里加上class=”分类缩略名”,然后我们就可以用这个来修改css样式了。打开你的主题文件夹下style.css文件来定义css,比如我的一个分类是news,想把分类下文章标题都变成红色的,那么添加代码.news{color:red;}同理,你也可以将archives.php,以及post.php等页面都照此法处理。注意如果一篇文章属于多个分类,那么用:<?php echo $this >category; ?>只能输出一个分类缩略名,暂时还没找到更好的办法。
css 流光按钮
2021-06-30
分类: dynamic
简介:先看效果图:实现简单炫酷,直接复制查看效果CSS:<style> .btn { position: absolute; top: 50%; left: 50%; transform: translate( 50%, 50%); width: 230px; height: 90px; line height: 90px; text align: center; color: #fff; font size: 25px; text transform: uppercase; cursor: pointer; background: linear gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background size: 400%; border radius: 60px; } .btn:hover { animation: animate 8s linear infinite; } @keyframes animate { 0% { background position: 0%; } 100% { background position: 400%; } } .btn::before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; z index: 1; background: linear gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4); background size: 400%; border radius: 40px; opacity: 0; transition: 0.5s; } .btn:hover::before { filter: blur(20px); opacity: 1; animation: animate 8s linear infinite; }
</style> <body> <b href="#" class="btn">button</b>
</body>
Emlog模版文章页标题自动变颜色方法
2021-01-24
分类: Emlog
简介:1、打开模板下的 css 文件 ,把下面颜色代码添加进去,里面颜色自己修改,众口难调每个人喜好的颜色都不一样.... #bianse{animation:change 10s linear 0s infinite;} @keyframes change{0%{color:#333;}25%{color:#fff0;}50%{color:#f60;}75%{color:#cf0;}100%{color:#f00;}}2、打开模板下的 文章页文件 echo_log.php 找到 <?php echo $log_title; ?> 如果模版没有改过就是被 h2 标签嵌套的,只需要在 h2 标签里面调用 id="bianse" 即可。 <h2 class="post title" id="bianse">这里是标题内容</h2>