最近很火的网站右下角生成一个旋转小魔方_最优秀的QQ技术网_最专业的网络资源收集平台_小辉资源网分享_小刀娱乐网

最近很火的网站右下角生成一个旋转小魔方

2021-3-19 1056 0

最近很火的网站右下角生成一个旋转小魔方，让网站右下角很好看，可以研究下

代码如下：

<!doctype html>
<!--小辉网 www.8gws.com-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>最近很火的网站右下角生成一个旋转小魔方</title>
<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>
</body>
</html>

Plugins by frpkj.com

下载地址：

文件名称：最近很火的网站右下角生成一个旋转小魔方

文件大小：4KB适用版本：PC

更新日期：2021-03-19作者信息：小辉网络

点击下载 查看演示

上一篇: 织梦cms响应式陶瓷研磨盘抛光类网站模板源码(自适应手机端)网站手工DIV+css

下一篇: 最新版仿海螺模板影视小程序源码无授权版附教程