说明: 刚刚凭借自己仅有的css知识去改了以下单调的博客底部,现在已经好看多啦,效果如下
代码: 接下来直接放代码了,喜欢的可以自己去修改一下,加更多的css特效
十年之约的图指向的超链接打不开了,干脆改了一下。
<!--以下为底部代码 -->
<style>
#footerTextIcon {
display: inline-block;
animation: beating 1s infinite;
animation-timing-function: ease-out;
margin: 0 3px;
}
#timeDate {
animation: turn 6s infinite;
animation-timing-function: ease-out;
}
#times{
color: white;
animation: turn 6s infinite;
animation-timing-function: ease-out;
}
#hitokoto {
animation: turn 6s infinite;
animation-timing-function: ease-out;
}
@keyframes turn {
0%{
color: white;
}
25%{
color: #66CCFF;
}
50%{
color: #FF3366;
}
75% {
color: red;
}
100% {
color: white;
}
}
@keyframes beating{
0% {
transform: scale(1);
}
20% {
transform: scale(1.6);
}
30% {
transform: scale(1);
}
50% {
transform: scale(1.6);
}
70%, 100% {
transform: scale(1);
}
}
</style>
<a href="填写你的站点url" target="_blank" rel="no follow noopener" style="color:orange">站点名称</a>
<span id="footerTextIcon">❤️</span>
<script src="https://v1.hitokoto.cn/?c=a&encode=js&select=%23hitokoto" defer></script>
<p id="hitokoto"></p>
<div>
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script style="font:whit">
var now = new Date();
function createtime(){
var grt= new Date("10/10/2019 00:00:00");//此处修改你的建站时间或者网站上线时间
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
hnum = Math.floor(hours);
if(String(hnum).length ==1 ){
hnum = "0" + hnum;
}
minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
mnum = Math.floor(minutes);
if(String(mnum).length ==1 ){
mnum = "0" + mnum;
}
seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
snum = Math.round(seconds);
if(String(snum).length ==1 ){
snum = "0" + snum;
}
document.getElementById("timeDate").innerHTML = "本站安全运行 "+dnum+" 天";
document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()",250);
</script>
<br>
<a href="https://www.wwcun.com" target="_blank" rel="nofollow">
<img src="https://img.wwcun.com/user_files/1/bbs/65264176_1606403352.png" alt="Ten years" style="height: 1.5em; ">
</a>
感谢支持