网站美化，功能教程（CSS美化教程） {mtitle title="小熊猫博客爱分享"/}网站美化持续更新一.css美化代码{mtitle title="1.网站弹窗公告"/}{tabs}{tabs-pane label="效果演示"}{/tabs-pane}{tabs-pane label="代码实现"}隐藏内容，请前往内页查看详情{/tabs-pane}{/tabs} 代码位置： 找到目录index.php，放到最低下就可以但是一定要放在 body里面目录/user/themes/主题/index.php{mtitle title="网页上层滚动文字"/}<marquee border='0' align='middle' scrolldelay='80'>滚动内容</marquee>{mtitle title="彩条跑马灯"/}{lamp/}<!-- 顶部跑马灯特效 --> <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> <!-- 顶部跑马灯特效 -->使用方法：找到对应的主题，放到头部文件即可{mtitle title="计算网站建站时间"/}{tabs}{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}{mtitle title="自定义电脑右击效果"/}{tabs}{tabs-pane label="效果演示"}{/tabs-pane}{tabs-pane label="代码实现"}隐藏内容，请前往内页查看详情{/tabs-pane}{/tabs}{mtitle title="底部蓝色波浪（动态）"/}{tabs}{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}{/tabs}{ } 待更新