全部复制到 博客侧边栏公告 即可
轮播图
<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;
width: 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 {
width: 100px;
height: 100px;
margin: 150px;
position: relative;
}
/*包裹所有容器样式*/
.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: 200px;
height: 200px;
opacity: 0.8;
transition: all .4s;
}
/*定义所有图片样式*/
.pic {
width: 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;
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
.cube .in_pic {
width: 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)";>