酷炫网页右下角3d魔方代码 - 我爱搜-爱搜网-吾爱共享-吾爱分享-免费资源分享平台

2018年11月27日 1条评论

酷炫网页右下角3d魔方代码

<style>
.container {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  position: fixed;
  z-index: 999;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  right: 0px;
  bottom: 0px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.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(0.94, -0.6, 0.45, 1.31) infinite;
          animation: around 5s cubic-bezier(0.94, -0.6, 0.45, 1.31) infinite;
}
.cube div {
  width: 120px;
  height: 120px;
  display: block;
  margin: 0;
  position: absolute;
}
.cube div a {
  color: white;
  font-size: 8em;
  text-decoration: none;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.cube .front {
  -webkit-transform: rotateY(0deg) translateZ(60px);
          transform: rotateY(0deg) translateZ(60px);
  background-color: rgba(0, 191, 255, 0.7);
  border: 2px solid rgba(0, 191, 255, 0.7);
}
.cube .back {
  -webkit-transform: rotateX(180deg) translateZ(60px);
          transform: rotateX(180deg) translateZ(60px);
  background-color: rgba(124, 252, 0, 0.7);
  border: 2px solid rgba(124, 252, 0, 0.7);
}
.cube .left {
  -webkit-transform: rotateY(-90deg) translateZ(60px);
          transform: rotateY(-90deg) translateZ(60px);
  background-color: rgba(255, 215, 0, 0.7);
  border: 2px solid rgba(255, 215, 0, 0.7);
}
.cube .right {
  -webkit-transform: rotateY(90deg) translateZ(60px);
          transform: rotateY(90deg) translateZ(60px);
  background-color: rgba(255, 69, 0, 0.7);
  border: 2px solid rgba(255, 69, 0, 0.7);
}
.cube .top {
  -webkit-transform: rotateX(90deg) translateZ(60px);
          transform: rotateX(90deg) translateZ(60px);
  background-color: rgba(255, 0, 157, 0.7);
  border: 2px solid rgba(255, 0, 157, 0.7);
}
.cube .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(60px);
          transform: rotateX(-90deg) translateZ(60px);
  background-color: rgba(184, 111, 220, 0.7);
  border: 2px solid rgba(184, 111, 220, 0.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);
  }
} 
</style>
<div class="container"><div class="cube"><div class="front"><a href="http://www.wuiso.com/" data-ke-src="http://www.wuiso.com/" target="_blank" style="font-size:28px;">我爱搜网</a></div><div class="back"><a href="http://www.wuiso.com/" data-ke-src="http://www.wuiso.com/" target="_blank" style="font-size:28px;">快速建站</a></div><div class="right"><a href="http://www.wuiso.com/" data-ke-src="http://www.wuiso.com/" target="_blank" style="font-size:28px;">我爱搜网</a></div><div class="left"><a href="http://www.wuiso.com/" data-ke-src="http://www.wuiso.com/" target="_blank" style="font-size:28px;">快速建站</a></div><div class="top"><a href="http://www.wuiso.com/" data-ke-src="http://www.wuiso.com/" target="_blank" style="font-size:28px;">快速建站</a></div><div class="bottom"><a href="http://www.wuiso.com/" data-ke-src="http://www.wuiso.com/" target="_blank" style="font-size:28px;">快速建站</a></div></div></div>

点赞 (3) 打赏分享

支付宝扫一扫
微信扫一扫
企鹅扫一扫

热度：278° 评分：7.5 发布时间： 2018年11月27日

本文标签：网页网页代码 js代码

版权声明：若无特殊注明，本文皆为《小洋vier》原创，转载请保留文章出处。

本文链接：酷炫网页右下角3d魔方代码 - https://www.wuiso.com/post-1142.html

发表评论
取消回复

评论

1条评论

吾爱资源网回复

<a href="050qa.cn">吾爱资源网</a>

中国移动 2018-12-02 20:26

最新微语
- 1. 本站注册会员12元/月,续费10/月,注册即享全站资源下载（2019年4月11日）
- 2. 本站全部资源免费，无水印，无广告，欢迎搬砖。。（2019年2月19日）
- 3. 最近比较忙很少更新了。（2018年1月28日）
- 4. 网站界面美化中。。。。（2018年1月12日）
- 5. 新版网站上线公告（2018年1月3日）
吾爱搜随机推荐
最新评论

去顶部