![图片[1]- 子比主题美化— 在网站底部添加旋转魔方](https://www.dh139.cn/wp-content/uploads/2025/12/11-1.png)
效果图如上。
直接在网站主题,主题页脚 (footer.php) 文件内底部,</body> 之前 加上以下代码就行。
每一面的文字,自行修改。
注意: 非WordPress网站自行测试!!!
<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>
© 版权声明
点点赞赏,手留余香~
还没有人给TA充电
给TA充电
声明
花猪使用须知
- 1本网站内容仅供个人学习、研究和欣赏,未经授权禁止用于任何商业用途。
- 2网站中的代码示例仅用于教育目的,使用时请遵循相关开源协议和授权规定。
- 3转载或引用本站内容请注明出处,尊重原创,共同维护良好的创作环境。
- 4网站评论区欢迎理性讨论,请勿发表违反法律法规的言论,共建和谐社区。
- 5如有内容侵犯您的权益,请通过博客联系方式告知,将立即核实并处理。
- 6使用本站资源时产生的任何问题与后果需自行承担,请谨慎操作。
THE END
喜欢就支持一下吧
相关推荐













暂无评论内容