css--悬浮图像

我就是我 2023-02-17 02:16 125阅读 0赞

<!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>