一.css美化代码

代码位置： 找到目录index.php，放到最低下就可以但是一定要放在 body里面

目录/user/themes/主题/index.php

<marquee border='0' align='middle' scrolldelay='80'>滚动内容</marquee>

<!-- 顶部跑马灯特效 -->
<style>
    #top-grrk{
    background:url(https://external-30160.picsz.qpic.cn/e94ff0137dfb6cc51925d4ccf61d2541);
    height:2px;
    position:fixed;
    width:100%;
    Z-index:10000;
}
</style>    
<div id="top-grrk"></div>
<!-- 顶部跑马灯特效 -->

使用方法：找到对应的主题，放到头部文件即可

{tabs-pane label="效果演示"}

{/tabs-pane}
{tabs-pane label="代码实现"}

<!-- 顺数计日开始 -->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
var birthDay =NewDate("2021-6-12");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "XXX已过去了"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
setTimeout(momxc, 1000);
}momxc();
</script>  <style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<!-- 顺数计日结束 -->

{/tabs-pane}

{tabs-pane label="效果显示"}

效果是动态

{/tabs-pane}
{tabs-pane label="代码实现"}

<!--底部波浪开始-->
<div class="qin0_layout">
<svg class="editorial"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 24 150 28"
    preserveAspectRatio="none">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0 
   58-18 88-18s
   58 18 88 18 
   58-18 88-18 
   58 18 88 18
   v44h-352z" />
 </defs>
 <g class="parallax">
  <use xlink:href="#gentle-wave" x="50" y="0" fill="#4579e2"/>
  <use xlink:href="#gentle-wave" x="50" y="3" fill="#3461c1"/>
  <use xlink:href="#gentle-wave" x="50" y="6" fill="#2d55aa"/>  
 </g>
</svg>
</div>
<style type='text/css'>
.parallax > use{animation: move-forever 12s linear infinite;}.parallax > use:nth-child(1){animation-delay: -2s;}.parallax > use:nth-child(2){animation-delay: -2s; animation-duration: 5s;}.parallax > use:nth-child(3){animation-delay: -4s; animation-duration: 3s;}@keyframes move-forever{0%{transform: translate(-90px, 0%);} 100%{transform: translate(85px, 0%);}}.qin0_layout{{width: 100%;height: 40px;position: relative;overflow: hidden;z-index: 1;background: var(--footer-bg);}.editorial{display: block; width: 100%; height: 40px; margin: 0;}
</style>
<!--底部波浪结束-->

{/tabs-pane}

待更新

网站美化，功能教程（CSS美化教程）

一.css美化代码

评论 (29)