最近很火的网站右下角生成一个旋转小魔方【代码分享】

小星空

文章最后更新时间:2022年06月20日已超过665天没有更新。

效果请看本站右下方 

最近很火的网站右下角生成一个旋转小魔方【代码分享】

ZBlog系统可以后台应用中心 搜索魔方插件

最近很火的网站右下角生成一个旋转小魔方【代码分享】

或者

直接在站主题,主题页脚 (footer.php)  文件内底部,</body> 之前 加上以下代码就行。

每一面的文字,自行修改。

注意: 非WordPress网站自行测试!!!


代码:[CommShow]

<div class="mofang">
  <div class="cube">
    <div class="front">
      <a href="javascript:void(0);" rel="nofollow">小星空博客</a>
    </div>
    <div class="back">
      <a href="javascript:void(0);" rel="nofollow">河北加油</a>
    </div>
    <div class="right">
      <a href="javascript:void(0);" rel="nofollow">石家庄加油</a>
    </div>
    <div class="left">
      <a href="javascript:void(0);" rel="nofollow">中国加油</a>
    </div>
    <div class="top">
      <a href="javascript:void(0);" rel="nofollow">武汉加油</a>
    </div>
    <div class="bottom">
      <a href="javascript:void(0);" rel="nofollow">沧州加油</a>
    </div>
  </div>
</div>
<style>
.mofang{width:60px;height:60px;margin:0 auto;position:fixed;z-index:999;-webkit-perspective:1000px;perspective:1000px;right:0;bottom:0;-webkit-transform:translate(-80%,-80%);transform:translate(-80%,-80%)}
.cube{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-20deg) translateZ(-100px);-webkit-transform-origin:center center -100px;transform-origin:center center -100px;-webkit-animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite;animation:around 5s cubic-bezier(.94,-.6,.45,1.31) infinite}
.cube div{width:80px;height:80px;display:block;margin:0;position:absolute}
.cube div a{color:#fff;text-decoration:none;text-align:center;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);line-height:normal;font-size:16px;letter-spacing:3px}
.cube .front{-webkit-transform:rotateY(0) translateZ(40px);transform:rotateY(0) translateZ(40px);background-color:rgba(0,191,255,.7);border:2px solid rgba(0,191,255,.7)}
.cube .back{-webkit-transform:rotateX(180deg) translateZ(40px);transform:rotateX(180deg) translateZ(40px);background-color:rgba(124,252,0,.7);border:2px solid rgba(124,252,0,.7)}
.cube .left{-webkit-transform:rotateY(-90deg) translateZ(40px);transform:rotateY(-90deg) translateZ(40px);background-color:rgba(255,215,0,.7);border:2px solid rgba(255,215,0,.7)}
.cube .right{-webkit-transform:rotateY(90deg) translateZ(40px);transform:rotateY(90deg) translateZ(40px);background-color:rgba(255,69,0,.7);border:2px solid rgba(255,69,0,.7)}
.cube .top{-webkit-transform:rotateX(90deg) translateZ(40px);transform:rotateX(90deg) translateZ(40px);background-color:rgba(255,0,157,.7);border:2px solid rgba(255,0,157,.7)}
.cube .bottom{-webkit-transform:rotateX(-90deg) translateZ(40px);transform:rotateX(-90deg) translateZ(40px);background-color:rgba(184,111,220,.7);border:2px solid rgba(184,111,220,.7)}
@-webkit-keyframes around{100%{-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)}
}
@keyframes around{100%{-webkit-transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px);transform:rotateX(-15deg) rotateY(-380deg) translateZ(-100px)}
}
@media only screen and (max-width: 767px) {
  .mofang{width:40px;height:40px;-webkit-transform: translate(-100%,-100%);transform: translate(-100%,-100%);}
  .cube div{width:60px;height:60px}
  .cube div a{font-size:12px;letter-spacing:2px}
  .cube .front{-webkit-transform:rotateY(0) translateZ(30px);transform:rotateY(0) translateZ(30px);}
  .cube .back{-webkit-transform:rotateX(180deg) translateZ(30px);transform:rotateX(180deg) translateZ(30px)}
  .cube .left{-webkit-transform:rotateY(-90deg) translateZ(30px);transform:rotateY(-90deg) translateZ(30px)}
  .cube .right{-webkit-transform:rotateY(90deg) translateZ(30px);transform:rotateY(90deg) translateZ(30px)}
  .cube .top{-webkit-transform:rotateX(90deg) translateZ(30px);transform:rotateX(90deg) translateZ(30px)}
  .cube .bottom{-webkit-transform:rotateX(-90deg) translateZ(30px);transform:rotateX(-90deg) translateZ(30px)}
}
</style>


[/CommShow]

版权声明
  本站致力于为模板爱好者提供国内外插件开发技术和模板共享,着力为用户提供优资资源。
  本站提供的所有下载文件均为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
  我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。
  站长会进行审查之后,情况属实的会在三个工作日内为您删除。
文章版权声明:除非注明,否则均为小星空博客原创文章,转载或复制请以超链接形式并注明出处。

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 8 条评论,5539人围观)
网友昵称:小兔子乖乖
小兔子乖乖 V 普通用户 MQQBrowser 6.2 Redmi 沙发
2021-01-19 回复
66666
网友昵称:容筠世
容筠世 V 普通用户 MQQBrowser 6.2 Huawei VKY 椅子
2021-01-20 回复
6666666
网友昵称:822
822 V 普通用户 MQQBrowser 6.2 Android 9 板凳
2021-01-20 回复
282828
网友昵称:燕燕
燕燕 V 普通用户 MQQBrowser 6.2 Redmi 凉席
2021-01-20 回复
小兔子乖乖
网友昵称:1
1 V 普通用户 MQQBrowser 6.2 Huawei LLD-AL20 地板
2021-01-20 回复
1
网友昵称:48428464
48428464 V 普通用户 Google Chrome 88.0.4324.96 Windows 10 x64 6楼
2021-01-28 回复
看看
网友昵称:hou1219
hou1219 V 普通用户 Google Chrome 76.0.3809.89 Huawei KKG-AN00 7楼
2021-08-03 回复
网友昵称:?转乾坤
?转乾坤 V 普通用户 Google Chrome 97.0.4692.71 Windows 10 x64 8楼
2022-02-05 回复
6666666666666666666666
取消
微信二维码
微信二维码
支付宝二维码