HTML5 3D魔方旋转拼图代码
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="body-wrapper">
<div class="cubetwo-help-component">
<div class="cubetwo-row">
<div class="cubetwo-device-info">
<i class="material-icons">touch_app</i>
<div>tap or swipe with fingers</div>
</div>
<div class="cubetwo-device-info">
<i class="material-icons">mouse</i>
<div>click or swipe with mouse</div>
</div>
<div class="cubetwo-device-info cubetwo-device-info--keyboard">
<i class="material-icons">keyboard</i>
<div>keyboard keys</div>
<div class="cubetwo-device-info-groups">
<div class="cubetwo-device-info-group">
<div>
<i class="material-icons">keyboard_tab</i>
<i class="material-icons">keyboard_arrow_up</i>
</div>
<div>
<i class="material-icons">keyboard_arrow_left</i>
<i class="material-icons">keyboard_arrow_down</i>
<i class="material-icons">keyboard_arrow_right</i>
</div>
</div>
<div class="cubetwo-device-info-group">
<div>
<span>q</span>
<span>w</span>
<span>e</span>
</div>
<div>
<span>a</span>
<span>s</span>
<span>d</span>
</div>
<div>
<span>x</span>
<span>y</span>
<span>z</span>
</div>
</div>
</div>
</div>
</div>
4、书写css代码。
*,
:after,
:before {
box-sizing: border-box
}
a,
button {
-we bkit-tap-highlight-color: transparent;
cursor: pointer
}
button {
margin: 0;
padding: 4px;
background: #111;
border: 1px solid #add8e6;
border: 0;
color: #add8e6;
box-shadow: 2px 2px 4px gray;
outline: none;
transition: background .2s;
border-radius: 0;
font-size: 0;
box-shadow: none;
background: transparent;
border-radius: 50%
}
button:focus {
box-shadow: 2px 2px 1rem #add8e6
}
button.cubetwo-active {
background: hsla(0, 0%, 100%, .2)
}
5、书写并添加js代码。
<script src='js/hammer.min.js'></script>
<script src="js/index.js"></script>
6、代码整体结构。
7、查看效果。
