彩色滚动变色字体
代码直接复制粘贴到网站自定义代码区即可！
效果：
代码：
<div id="binft"></div>
<script>
var binft = function (r) {
function t() {
return b[Math.floor(Math.random() * b.length)]
}
function e() {
return String.fromCharCode(94 * Math.random() + 33)
}
function n(r) {
for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
var l = document.createElement("span");
l.textContent = e(), l.style.color = t(), n.appendChild(l)
}
return n
}
function i() {
var t = o[c.skillI];
c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d)
}
var l = "",
o = ["青青陵上柏，磊磊涧中石。", "人生天地间，忽如远行客。","斗酒相娱乐，聊厚不为薄。", "驱车策驽马，游戏宛与洛。","洛中何郁郁，冠带自相索。","长衢罗夹巷，王侯多第宅。","两宫遥相望，双阙百余尺。","极宴娱心意，戚戚何所迫？"].map(function (r) {
return r + ""
}),
a = 2,
g = 1,
s = 5,
d = 75,
b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"],
c = {
text: "",
prefixP: -s,
skillI: 0,
skillP: 0,
direction: "forward",
delay: a,
step: g
};
i()
};
binft(document.getElementById('binft'));
</script>网站底部波浪特效
将代码复制到网站底部代码区即可，或网站主题目录footer.php文件中的<footer>标签内或标签结尾下。
效果：
代码：
<!--底部波浪开始-->
<div class="wiiuii_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%);}}.wiiuii_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>
<!--底部波浪结束-->网站底部鱼群跳跃
如果用的子比主题：把代码复制粘贴到主题后台–>自定义代码–>自定义底部HTML代码，
其它主题：把代码放到主题footer.php文件的在 <footer></footer> 之间添加两行代码。
效果：
就是一群小鱼在跳跃到水面。
代码：
<div id="jsi-flying-fish-container"></div>
<script src="https://www.atbkw.cn/aotian/js/script.js"></script>时间代码太空人手表
效果：
代码：
<iframe src="https://www.atbkw.cn/aotian/web/huaweitiankongren/index.html" width="290" height="290" frameborder="no"></iframe>倒计时
把下面的代码放在站点后台 >>外观 >> 小工具 >> html代码 然后把小工具添加到指定侧边栏中即可。
效果：
倒计时
COUNT DOWN
距离结束还剩
00
00
00
代码：
<html >
<head>
<style type="text/css">
.se-kl{width:190px;height:275px;background-color:#e83632;margin:auto;position:relative}.se-cn{position:absolute;top:42px;left:0;width:100%;text-align:center;font-size:34px;color:#fff}.se-en{position:absolute;top:90px;left:0;width:100%;text-align:center;font-size:20px;color:rgba(255,255,255,.5)}.se-io{width:20px;height:33px;position:absolute;background:url(https://img.wiiuii.cn/img/seckill.png) no-repeat;background-position:-32.5px 0;background-size:52.5px 40px;left:85px;top:126px;display:block}.se-info{position:absolute;top:170px;text-align:center;width:100%;font-size:16px;color:#fff}.se-count{position:absolute;top:212px;left:30px;height:40px}.se-day{display:none}.se-hour,.se-min,.se-sec{position:relative;background-color:#2f3430;width:40px;height:40px;float:left;text-align:center;line-height:40px;margin-right:5px}.se-txt{font-size:20px;font-weight:700;color:#fff}.se-txt:before{content:"";display:block;position:absolute;top:50%;left:0;width:100%;height:1px;background-color:#e83632}
</style>
</head>
<body>
<div class="se-kl">
<div class="se-cn">倒计时</div>
<div class="se-en">COUNT DOWN</div>
<i class="se-io"></i>
<div class="se-info">距离结束还剩</div>
<div class="se-count">
<div class="se-day"></div>
<div class="se-hour"><span class="se-txt">00</span></div>
<div class="se-min"><span class="se-txt">00</span></div>
<div class="se-sec"><span class="se-txt">00</span></div>
</div>
</div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var oDate = new Date();
var nowTime = oDate.getTime(); //现在的毫秒数
oDate.setDate(oDate.getDate() + 1); // 设定截止时间为第二天
var targetDate = new Date(oDate.toLocaleDateString());
run(targetDate);
});
function run(enddate) {
getDate(enddate);
setInterval("getDate('" + enddate + "')", 500);
}
function getDate(enddate) {
var oDate = new Date(); //获取日期对象
var nowTime = oDate.getTime(); //现在的毫秒数
var enddate = new Date(enddate);
var targetTime = enddate.getTime(); // 截止时间的毫秒数
var second = Math.floor((targetTime - nowTime) / 1000); //截止时间距离现在的秒数
var day = Math.floor(second / 24 * 60 * 60); //整数部分代表的是天；一天有24*60*60=86400秒 ；
second = second % 86400; //余数代表剩下的秒数；
var hour = Math.floor(second / 3600); //整数部分代表小时；
second %= 3600; //余数代表 剩下的秒数；
var minute = Math.floor(second / 60);
second %= 60;
var spanH = $('.se-txt')[0];
var spanM = $('.se-txt')[1];
var spanS = $('.se-txt')[2];
spanH.innerHTML = tow(hour);
spanM.innerHTML = tow(minute);
spanS.innerHTML = tow(second);
}
function tow(n) {
return n >= 0 && n < 10 ? '0' + n : '' + n;
}
</script>
</body>
</html>更多代码敬请期待......
© 版权声明
文章版权归本站所有，未经允许请勿转载。
THE END
暂无评论内容