首页 网页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>
中国 移动