首页 网页js代码 酷炫网页右下角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> 点赞  (1) 打赏 分享 支付宝扫一扫 微信扫一扫 企鹅扫一扫 热度:189° 评分:4.5 发布时间: 2018年11月27日 本文标签:网页网页代码js代码 版权声明:若无特殊注明,本文皆为《小洋vier》原创,转载请保留文章出处。 本文链接:酷炫网页右下角3d魔方代码 - https://www.wuiso.com/post-1142.html 上一篇:简洁php网站导航前后端源码带后台 下一篇:PHP仿我图网图库下载站源码带个人免签支付 相关文章 新增这个通知功能,不过每次打开网页都会弹出这个通知,要手动点知道了才可关闭 以下为全部代码: <script s... 技术导航网挺火的网站QQ企鹅弹出代码 小洋vier 2017-9-13 就不上图了,代码很简单,直接加到你网站的head里面,</head>的前面就可以了,可以设置时间间隔,代码如下: <script type="text... 一段简单js让网页标题滚动代码 小洋vier 2018-1-28 演示地址:https://www.wuiso.cn/api/index2.html 代码如下: <... 简单的自适应在线工具html源码 小洋vier 2018-7-23 发表评论 取消回复 电子邮件地址不会被公开。 必填项已用*标注 发表评论 评论 1条评论 吾爱资源网 回复 <a href="050qa.cn">吾爱资源网</a> 中国 移动 2018-12-02 20:26
发表评论 取消回复 电子邮件地址不会被公开。 必填项已用*标注 发表评论 评论 1条评论 吾爱资源网 回复 <a href="050qa.cn">吾爱资源网</a> 中国 移动 2018-12-02 20:26
评论
1条评论吾爱资源网 回复
<a href="050qa.cn">吾爱资源网</a>
中国 移动