当前位置:首页 » 《资源分享》 » 正文

HTML+CSS+JS实现 ❤️3D立体魔方小游戏❤️_java李阳勇的博客

9 人参与  2021年09月19日 14:03  分类 : 《资源分享》  评论

点击全文阅读


🍅 作者主页:Java李杨勇 

🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示: 文末获取源码 

代码目录:

主要代码实现:

部分CSS样式:

 .cube {
        width: 100%;
        height: 100%;
    }

    @font-face {
        font-family: "RubikExtended";
        src: url("../media/RubikExtended.ttf") format( "truetype"), url("../media/RubikExtended.otf") format( "otf");
        font-weight: normal;
        font-style: normal;
    }

    /*

	This next bit is just for labeling a Cube's face.

*/

    .faceLabel {
        display: none;
        position: absolute;
        font-size: 60px;
        text-align: center;
        font-family: "RubikExtended";
        text-shadow: 0 0 24px rgba( 0, 0, 0, 0.3);
        color: #FFF;
    }

  

    .cube .cubelet {
        width: 1em;
        height: 1em;
        position: absolute;
        box-sizing: border-box;
    }

  

	Direction-facing planes of limited size
	that act as containers for content.

*/

    .cube
    /*.cubelet >*/

    .face {
        position: absolute;
        width: 1em;
        height: 1em;
        background-color: #000;
        text-align: center;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        padding: 0.05em;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    /*

	Extroverted faces have content such as a colored sticker, text, etc.
	They are constantly visible. Meanwhile introverted faces are not
	visible when the cube is an untwisted state. Some introverted walls
	are momentarily visible as the cube twists.

*/

    .cube
    /*.cubelet >*/

    .face.faceIntroverted {
        background-color: #000;
    }

HTML代码 :

上面的js文件需要引入 

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方


点击全文阅读


本文链接:http://zhangshiyu.com/post/28176.html

获取  代码  实战  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 邻居低素质,而我没素质独家番外_老太太赖皮欣欣超长版_小说后续在线阅读_无删减免费完结_
  • 重生后我转嫁首富瘸腿独子,总裁前夫却疯了一口气看完_妹妹傅云琛沈明辉独家番外_小说后续在线阅读_无删减免费完结_
  • 我拒绝给系花捐款后,全系同学悔疯了在线阅读_小说后续在线阅读_无删减免费完结_
  • 我让位给女友的透视眼竹马,他却说如果能重生再也不来了。虐心反转_玉石林若女友推荐_小说后续在线阅读_无删减免费完结_
  • 相国独子的丫鬟砸坏我的玉佩后,我当场拒婚阅读_玉佩陈郡谢氏全新_小说后续在线阅读_无删减免费完结_
  • 手术时,我看着病人惨死最新试读_淼淼陆知衍姜颜全本完结_小说后续在线阅读_无删减免费完结_
  • 男友霸道给我开黑卡,转头却骂我是捞女最新章节_肖年顾客黑卡热文_小说后续在线阅读_无删减免费完结_
  • 他在回忆尽头全集_贺南舟许清梨叶絮完结txt_小说后续在线阅读_无删减免费完结_
  • 旅游结婚那天未婚夫另娶女秘书,我让他们一无所有连载_老公迎宾超长版_小说后续在线阅读_无删减免费完结_
  • 完结文异界修仙我的直播间能打赏核弹列表_完结文异界修仙我的直播间能打赏核弹(江流年沈红菱)
  • 全书浏览陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)_陪弟弟混骑行圈,离婚你哭什么?(韩星河柳千雪)全书结局
  • 老公出轨我助攻虐心反转_秦绍卿卿阿溪后续加长_小说后续在线阅读_无删减免费完结_

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1