红烧鲈鱼的博客园设置 - 只用于保存

参考自。。。很多好像没记录QWQ

博客皮肤使用marvin3-blue 然后 禁用模板默认CSS

Ctrl+c Ctrl+v 然后自己修改。好看好玩的就Copy过来

博客侧边栏公告(支持HTML)(支持JS代码)

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <style>
       /*最外层容器样式*/
       .wrap {
           width: 150px;
           height: 150px;
           margin: 40px;
           position: relative;
      }

       /*包裹所有容器样式*/
       /*设置transform-style: preserve-3d，让其子元素在3D空间呈现*/
       .cube {
           width: 50px;
           height: 50px;
           margin: 0 auto;
           transform-style: preserve-3d;
           transform: rotateX(-30deg) rotateY(-80deg);
           animation: rotate linear 20s infinite;
      }

       @-webkit-keyframes rotate {
           from {
               transform: rotateX(0deg) rotateY(0deg);
          }
           to {
               transform: rotateX(360deg) rotateY(360deg);
          }
      }

       .cube div {
           position: absolute;
           width: 150px;
           height: 150px;
           opacity: 0.8;
           transition: all .4s;
      }

       /*定义所有图片样式*/
       .pic {
           width: 150px;
           height: 150px;
      }

       .cube .out_front {
           transform: rotateY(0deg) translateZ(75px);
      }

       .cube .out_back {
           transform: translateZ(-75px) rotateY(180deg);
      }

       .cube .out_left {
           transform: rotateY(-90deg) translateZ(75px);
      }

       .cube .out_right {
           transform: rotateY(90deg) translateZ(75px);
      }

       .cube .out_top {
           transform: rotateX(90deg) translateZ(75px);
      }

       .cube .out_bottom {
           transform: rotateX(-90deg) translateZ(75px);
      }

       /*定义小正方体样式*/
       .cube span {
           display: block;
           width: 75px;
           height: 75px;
           position: absolute;
           top: 50px;
           left: 50px;
      }

       .cube .in_pic {
           width: 75px;
           height: 75px;
      }

       .cube .in_front {
           transform: rotateY(0deg) translateZ(32px);
      }

       .cube .in_back {
           transform: translateZ(-32px) rotateY(180deg);
      }

       .cube .in_left {
           transform: rotateY(-90deg) translateZ(32px);
      }

       .cube .in_right {
           transform: rotateY(90deg) translateZ(32px);
      }

       .cube .in_top {
           transform: rotateX(90deg) translateZ(32px);
      }

       .cube .in_bottom {
           transform: rotateX(-90deg) translateZ(32px);
      }

       /*鼠标移入后样式*/
       .cube:hover .out_front {
           transform: rotateY(0deg) translateZ(100px);
      }

       .cube:hover .out_back {
           transform: translateZ(-100px) rotateY(180deg);
      }

       .cube:hover .out_left {
           transform: rotateY(-90deg) translateZ(100px);
      }

       .cube:hover .out_right {
           transform: rotateY(90deg) translateZ(100px);
      }

       .cube:hover .out_top {
           transform: rotateX(90deg) translateZ(100px);
      }

       .cube:hover .out_bottom {
           transform: rotateX(-90deg) translateZ(100px);
      }
   </style>
</head>
<body>
   <!-- 外层最大容器 -->
   <div class="wrap">
       <!--包裹所有元素的容器-->
       <div class="cube">
           <!--前面图片 -->
           <div class="out_front">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110121959out_front.jpg" class="pic" />
           </div>
           <!--后面图片 -->
           <div class="out_back">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122008out_back.jpg" class="pic" />
           </div>
           <!--左面图片 -->
           <div class="out_left">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122017out_left.jpg" class="pic" />
           </div>
           <!--右面图片 -->
           <div class="out_right">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122025out_right.jpg" class="pic" />
           </div>
           <!--上面图片 -->
           <div class="out_top">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122032out_top.jpg" class="pic" />
           </div>
           <!--下面图片 -->
           <div class="out_bottom">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122038out_bottom.jpg" class="pic" />
           </div>

           <!--小正方体 -->
           <span class="in_front">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122542in_front.jpg" class="in_pic" />
           </span>
           <span class="in_back">
                <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122550in_back.jpg" class="in_pic" />
           </span>
           <span class="in_left">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122554in_left.jpg" class="in_pic" />
           </span>
           <span class="in_right">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122557in_right.jpg" class="in_pic" />
           </span>
           <span class="in_top">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122601in_top.jpg" class="in_pic" />
           </span>
           <span class="in_bottom">
               <img src="https://images.cnblogs.com/cnblogs_com/fallsown/1913051/o_210110122605in_bottom.jpg" class="in_pic" />
           </span>
       </div>
   </div>
</body>
</html>

首页HTML

<!-- 用来适应手机端 -->
<script>
var content = 'width=device-width, initial-scale=1 user-scalable=no';
var viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
viewport.setAttribute('content', content);
document.head.appendChild( viewport );
</script>

<!-- 自定制样式文件 -->
<link rel="stylesheet" href="https://files.cnblogs.com/files/fallsown/fallsown_basic.css" />
<link rel="stylesheet" href="https://files.cnblogs.com/files/fallsown/fallsown_basic_mobil.css" />

页脚HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/fallsown/waifu.css"/>

</head>
<body>    
    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
    </div>
<script type="text/javascript">  
function browserRedirect() {  
    var sUserAgent = navigator.userAgent.toLowerCase();  
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";  
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";  
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";  
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";  
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";  
    var bIsAndroid = sUserAgent.match(/android/i) == "android";  
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";  
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";  
    // 浏览设备为  
    if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {  
        //手机浏览 
    } else {  
        //PC浏览
        document.write('<script type="text/javascript" charset="utf-8" src="https://blog-static.cnblogs.com/files/fallsown/waifu-tips.js"><\/script>');
        document.write('<script type="text/javascript" charset="utf-8" src="https://blog-static.cnblogs.com/files/fallsown/live2d.js"><\/script>');  
    }  
}  
browserRedirect();  
</script> 
<script type="text/javascript">initModel()</script>
<script type="text/javascript" languzage="javascript">
$('link[rel="shortcut icon"]').remove();
(function() {
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'https://blog-static.cnblogs.com/files/fallsown/fallsown_head_sculpture.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
}());
</script>
</body>
</html>
posted @   红烧鲈鱼  阅读(153)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示