博客园 装扮

目录

• 轮播图
• 立方体
• 看板娘

全部复制到 博客侧边栏公告 即可

轮播图

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--轮播图-->
<div id="myCarousel" class="carousel slide"  >
	<!-- 轮播（Carousel）指标 -->
	<ol class="carousel-indicators" >
		<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
		<li data-target="#myCarousel" data-slide-to="1"></li>
		<li data-target="#myCarousel" data-slide-to="2"></li>
		<li data-target="#myCarousel" data-slide-to="3"></li>
		<li data-target="#myCarousel" data-slide-to="4"></li>
	</ol>
	<!-- 轮播（Carousel）项目 -->
	<div class="carousel-inner" style="-webkit-box-shadow: 25px 17px 15px rgba(0,0,0,.5)"; >
		<div class="item active" >
            <a target="_blank"  href="https://720yun.com/"> <img title="全景风景欣赏" src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_200109011419%E9%A3%8E%E6%99%AF1.jpg" alt="First slide"> </a>
		</div>
		<div class="item">
            <a target="_blank"  href="https://www.ivsky.com/bizhi/naruto_t563/"> <img title="火影忍者" src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_200101103224%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85%E5%90%88%E7%85%A7.jpg" alt="Second slide"> </a>
		</div>
		<div class="item">
            <a target="_blank"  href="https://www.ivsky.com/search.php?q=%E6%B5%B7%E8%B4%BC%E7%8E%8B"> <img title="海贼王" src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_200101103052%E6%B5%B7%E8%B4%BC%E7%8E%8B.jpg" alt="Third slide"> </a>
		</div>
        <div class="item">
            <a target="_blank"  href="https://www.quanjing.com/"> <img title="模特" src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_200101101602%E6%A8%A1%E7%89%B92.jpg" alt="Third slide"> </a>
		</div>
        <div class="item">
            <a target="_blank"  href="http://www.netbian.com/qiche/index.htm"> <img title="跑车" src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_200101102907%E8%B7%91%E8%BD%A6.jpg" alt="Third slide"> </a>
		</div>
        <div class="item">
            <a target="_blank"  href="https://www.ygdy8.com/index.html"> <img title="电影网" src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_200101103801%E5%B0%8F%E4%B8%91.jpg" alt="Third slide"> </a>

	</div>
	<!-- 轮播（Carousel）导航 -->
	<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
		<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
		<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		<span class="sr-only">Next</span>
	</a>
</div>

立方体

<!--立方体-->
<style>
       .btn-box {
         cursor: pointer;
         display: block;
          200px;
         font-style: oblique;
     }
     .btn-hover:hover {
         color: black;
     }
    .btn-visiten:visited {
        color: black;
    }
    .btn-active:active{
        color: #7b3630;
    }
        .btnn {
            padding: 10px 15px;
            font-size: 15px;
            font-weight: 400;
            line-height: 1.4;
            border: none;
            border-radius: 4px;
        }
        /*最外层容器样式*/
        .wrap {
             100px;
            height: 100px;
            margin: 150px;
            position: relative;
        }
 
        /*包裹所有容器样式*/
        .cube {
             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;
             200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }
 
        /*定义所有图片样式*/
        .pic {
             200px;
            height: 200px;
        }
 
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
 
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
 
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
 
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
 
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
 
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
 
        /*定义小正方体样式*/
        .cube span {
            display: block;
             100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
 
        .cube .in_pic {
             100px;
            height: 100px;
        }
 
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
 
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
 
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
 
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
 
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
 
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
 
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
 
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
 
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
 
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
 
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
 
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>


    <!-- 外层最大容器 -->
    <div class="wrap">
        <!--包裹所有元素的容器-->
        <div class="cube">
            <!--前面图片晓楠 -->
            <div class="out_front">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230054234%E6%99%93.jpg" class="pic">
            </div>
            <!--后面图片鸣人 -->
            <div class="out_back">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230062743%E9%B8%A3%E4%BA%BA.jpg" class="pic">
            </div>
            <!--左面图片鸣人雏田 -->
            <div class="out_left">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230063010%E9%B8%A3%E4%BA%BA%E9%9B%8F%E7%94%B0.jpg" class="pic">
            </div>
            <!--右面图片凯 -->
            <div class="out_right">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230063251%E5%87%AF.jpg" class="pic">
            </div>
            <!--上面图片小樱 -->
            <div class="out_top">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230154715%E5%B0%8F%E6%A8%B1%E9%AB%98%E6%B8%85.png" class="pic">
            </div>
            <!--下面图片 雏田-->
            <div class="out_bottom">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230154223%E9%9B%8F%E7%94%B0%E9%AB%98%E6%B8%85.png" class="pic">
            </div>
 
            <!--小正方体 -->
            <span class="in_front">
               <!--佩恩-->
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230155314%E4%BD%A9%E6%81%A9%E9%AB%98%E6%B8%85.png" class="in_pic">
            </span>
            <!--八门遁甲凯-->
            <span class="in_back">
                 <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230161203%E5%85%AB%E9%97%A8%E9%81%81%E7%94%B2%E9%AB%98%E6%B8%85.png" class="in_pic">
            </span>
            <!--自来也-->
            <span class="in_left">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230162415%E8%87%AA%E6%9D%A5%E4%B9%9F.png"  class="in_pic">
            </span>
           <!--佐助-->
            <span class="in_right">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230162924%E4%BD%90%E5%8A%A9.jpg" class="in_pic">
            </span>
            <span class="in_top">
            <!--鸣人背影-->
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230163113%E9%B8%A3%E4%BA%BA%E8%83%8C%E5%BD%B1.png" class="in_pic">
            </span>
            <!--鼬-->
            <span class="in_bottom">
                <img src="https://images.cnblogs.com/cnblogs_com/kai-/1623472/o_191230163249%E9%BC%AC.jpg" class="in_pic">
            </span>
        </div>
 
    </div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

看板娘

<!-- 看板娘 -->
<html xmlns="">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>

<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/leiting7/flat-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wow-santa/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="waifu" id="waifu" >
<div class="waifu-tips" style="opacity: 0.5;" ></div>
<canvas id="live2d" width="200" height="400" class="live2d" ></canvas>
<div class="waifu-tool">
<span class="fui-home">主页</span>
<span class="fui-chat">聊天</span>
<span class="fui-eye">换角色</span>
<span class="fui-user">换装</span>
<span class="fui-photo">拍照</span>
<!-- <span class="fui-info-circle"></span> -->
<span class="fui-cross">退出</span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/leiting7/live2d.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wow-santa/waifu-tips.js"></script>
<script type="text/javascript">initModel()</script>

这一段不用加
<input type="button" value="立体框开关按钮" class="btn btn-box btn-hover btn-visiten btn-active" style="margin-top: 29px; -webkit-box-shadow: 30px 20px 11px rgba(0,0,0,.5)";>
<input type="button" value="看板娘开关按钮" class="btnn btn-box btn-hover btn-visiten btn-active" style="margin-top: 9px; -webkit-box-shadow: 30px 20px 11px rgba(0,0,0,.5)";>