wordpress美化 - 武汉加油炫酷动态彩色魔方分享

在网站的右下角添加一个旋转魔方

最近看新主题的时候,发现网站的右下角有一个不断转动的魔方,上面写着“武汉加油”,感觉很有趣,顺手弄了下来,在这里分享下,如何将这个有趣的魔方加到自己的wordpress主题里面。

效果如下:

wordpress美化 - 武汉加油炫酷动态彩色魔方分享-Npcink

代码如下:

<div class="mofang">
	<div class="cube">
		<div class="front">
			<a href="javascript:void(0);" rel="nofollow">Npcink</a>
		</div>
		<div class="back">
			<a href="javascript:void(0);" rel="nofollow">Npcink</a>
		</div>
		<div class="right">
			<a href="javascript:void(0);" rel="nofollow">Npcink</a>
		</div>
		<div class="left">
			<a href="javascript:void(0);" rel="nofollow">Test</a>
		</div>
		<div class="top">
			<a href="javascript:void(0);" rel="nofollow">Npcink</a>
		</div>
		<div class="bottom">
			<a href="javascript:void(0);" rel="nofollow">Test</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>  

如何使用?

将上面的代码复制下来放到主题根目录下的footer.php文件</body>前,保存,刷新前台页面即可。

如果要让你的网站更加的具有特色,还可以看看这个大气的首页动态背景wordpress美化,他会让你的网站的美观度提升一个台阶。

wordpress美化 - 武汉加油炫酷动态彩色魔方分享-Npcink
wordpress美化 - 武汉加油炫酷动态彩色魔方分享-Npcink

wordpress美化 - 精彩的炫酷首页波动背景图

大气的炫酷波动背景图,适合放在首页吸引您的访客,无论是在wordpress主题中还是在其他需要用网页展示的地方,都能使用。
最后更新: 2020-03-15

下载权限

查看
  • ¥{{right.value}}
    {{right.value}}
    免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天下载所有资源次的特权,今日剩余 已取得下载权限
WP教程

自定义欢迎邮件 - wordpress开发

2020-2-20 7:36:21

WP教程

复制文字时展示提示框 - wordpress小功能

2020-2-20 22:01:18

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,未经Npcink作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1355471563 或 点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索