本文主要是用来记录些自己在折腾博客的过程中遇到的各种代码,以便日后COPY,再折腾。

1、DIV提醒功能

查看源码

<style>
    .box{
        position:relative;
        border:1px solid red;
    }
    .box::before{
        content:attr(title);
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        -webkit-transform:translate(-50%,-50%);
        padding:0 10px;
        background-color:#fff;
    }
</style>
<div class="box" title="使用方法">
    <ol>
        <li>这是啥</li>
        <li>干啥</li>
    </ol>
</div>

这个代码可用作文本提醒,可参照文章Typecho 代码实现文章页面添加提醒功能 - Eonegh's Blog

2、logo闪光效果

查看源码

/**logo闪光效果CSS**/
.logo:before {
 content: "";
 position: absolute;
 width: 140px;
 height: 10px;
 background-color: rgba(255, 255, 255, 0.5);
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: blink 1s ease-in 1s infinite;
 animation: blink 1s ease-in 1s infinite;
}
 
@-webkit-keyframes blink {
 from {left: 10px;top: 0;}
 to {left: 320px;top: 0;}
}
@-o-keyframes blink {
 from {left: 10px;top: 0;}
 to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
 from {left: 10px;top: 0;}
 to {left: 320px;top: 0;}
}
@keyframes blink {
 from {left: -100px;top: 0;}
 to {left: 320px;top: 0;}
}

使用:

<div class="logo">内容<div>

3、动态变更网站标题及图标

查看源码1

<script type="text/javascript">
      var ico = document.querySelector('link[rel="icon"]');  //获取原始ico属性
      var OriginTitile = document.title;
      var titleTime;
      document.addEventListener('visibilitychange', function() {
          if (document.hidden) {
          ico.href='./xxx.ico';  //自定义离开页面ico地址
              document.title = '此处为自定义内容' ;
              clearTimeout(titleTime);
          }
          else {
          ico.href='./xxx.cio';  //此处为原始站点ico地址
              document.title = '自定义内容'+OriginTitile;  //此处为原始站点title数据
              titleTime = setTimeout(function() {
                  document.title = OriginTitile;
              }, 2000);
          }
      });
    </script>

查看源码2

<script>
var enter = '(*゜ロ゜)ノ被发现了~';
var leave = '(つ ェ ⊂)我藏好了哦~';
var clock;
var normal_title;
window.onload = function(){
    if (document.visibilityState == 'hidden' && !(document.title == leave)) {
        normal_title = document.title;
        document.title = leave;
    }
}
document.addEventListener('visibilitychange',function() {
    if (document.visibilityState == 'hidden') {
      if (!(document.title == enter)) {
          normal_title = document.title;
      }
      document.title = leave;
      clearTimeout(clock);
    } else {
        if (!(document.title == leave)) {
            normal_title = document.title;
        }
       document.title = enter;
       clock = setTimeout(function()
       {
           if (!(document.visibilityState == 'hidden')) {
               document.title=normal_title;
           }
       },2500);
    }
});
</script>


注:选择以上两种代码中的一种使用即可,否则有冲突。


本文标签:网页设计CSS