css--悬浮图像

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="origin">

<link type="text/css" rel="stylesheet" href="https://www.cnblogs.com/cjsblog/custom.css?v=oCtwM4EaP1+6xfn+Ctza0Eo26XU=">

<style type="text/css">

body {
font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
text-shadow: 0 0 1px transparent;
}

#cnblogs_post_body p {
font-size: 15px;
/*color: #3e3e3e;*/
line-height: 1.6;
word-spacing: 1px;
letter-spacing: 1px;
font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%), linear-gradient(360deg, rgba(50, 0, 0, 0.05) 3%, rgba(0, 0, 0, 0) 3%);
background-size: 20px 20px;
background-position: center center;
}

#cnblogs_post_body h1 {
   background: #2B6695;
   border-radius: 6px 6px 6px 6px;
   box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
   color: #FFFFFF;
   font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
   margin: 18px 0 !important;
   padding-left: 5px;
   text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2{
background: #377d22;
/* background: #ef7060; */
/*   background: #2B6600; */
   border-radius: 6px 6px 6px 6px;
   box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
   color: #FFFFFF;
   font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
   font-size: 23px;
   margin: 12px 0 !important;
   padding-left: 10px;
   text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h3{
   font-size: 18px;
}

/*点击页面爱心效果*/
#div_digg {
   position:fixed;
   bottom:5px;
   width:140px;
   right:50px;
   border:2px solid #6FA833;
   padding:10px;
   background-color:#fff;
   border-radius:5px 5px 5px 5px !important;
   box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
}

/*点击飘心效果*/
canvas {
   display: block;
   position: fixed;
   bottom: 100px;
   right: -24px;
   z-index: 20;
   cursor: pointer;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.journal-reward {
   position: fixed;
   bottom: 80px;
   right: 15px;
   height: 80px;
   width: 80px;
   display: block;
   z-index: 21;
}

/*立方体效果*/
.wrap {
width: 120px;
height: 200px;
margin: 20px;
position: fixed;
top: 15px;
right: 15px;
display: table-cell;
vertical-align: middle;
text-align: center;
z-index: 22;
}

.cube {
width: 120px;
height: 120px;
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: 120px;
height: 120px;
opacity: 0.8;
transition: all .4s;
}

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

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

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

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

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

.cube .out_bottom {
transform: rotateX(-90deg) translateZ(60px);
}
</style>




</head>
<body>
<div class="cube">
<div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
<div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
<div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>
<div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>
<div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>
<div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic">
</div>
</div>
</body>
</html>

猜你喜欢