庆祝异度之刃3即将发售用【CSS】做一台 switchlite

菜逼善意
308 阅读4分钟

前言

《异度神剑3》是一款由任天堂子公司MONOLITH SOFT开发的冒险类RPG游戏。本作原定2022年9月发售，后提前发售日期，预定于2022年7月29日发售

为庆祝异度之刃已经发售，用CSS做一台switchlite

需求分析

首先switchlite 是这个样子的（图片来源任天堂港服官网）

mv-slide-pink-pc.png

创建一个div 作为外层

<div class="switch" ></div>

观察一下可以把switchlite分成两个部分：

第一部分 外层L键、R键、L键右侧的两个凸起按键

第二部分 switchlite主体

switchlite主体

首先做switchlite外壳的样式

<div class="switch" >
    <div class="switch-body"/>
</div>

.switch {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 665px;
    height: 300px;
    margin: 170px auto 0 auto
}
.switch-body {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: #fff;
    display: block;
    width: 655px;
    height: 290px;
    border-radius: 70px;
    background-image: linear-gradient(#FF8688, #FF7B81);
    box-shadow: -1px -7px 4px #F0696D inset, 6px 5px 6px #FE8C90 inset, 10px 10px 4px #FFAFB1 inset, -4px 5px 4px #FA7F84 inset, -10px 10px 4px #FD9A9E inset, 0 80px 40px -70px rgba(0, 0, 0, 0.3)
}

Snipaste_2022-07-25_13-14-27.jpg

然后暂时先不去做switch上面的按钮和屏幕，先做外侧的按键

switchlite外侧按键

左右两侧的透明按钮

<div class="switch" >
    <div class="back left"></div>
    <div class="back right"></div>
    <div class="switch-body"/>
</div>

.back {
    display: block;
    width: 170px;
    height: 120px;
    background-color: #DADADA;
    position: absolute;
    top: 4px;
    border-radius: 70px
}

.back.left {
    left: 2px;
    box-shadow: 1px 1px 1px 0 #C1C1C1 inset, 2px 2px 1px 0 #FFF inset
}

.back.right {
    right: 2px;
    box-shadow: -1px 1px 1px 0 #C1C1C1 inset, -2px 2px 1px 0 #FFF inset
}

Snipaste_2022-07-25_13-27-03.jpg

最后是L键右侧的两个凸起按键

<div class="switch" >
    <div class="volume down"></div>
    <div class="volume up"></div>
    <div class="back left"></div>
    <div class="back right"></div>
    <div class="switch-body" />
</div>

.volume {
    display: block;
    width: 16px;
    height: 2px;
    position: absolute;
    top: 3px;
    background-image: linear-gradient(#FA8888, #E56B69);
    border-radius: 1px
}

.volume.down {
    left: 145px
}

.volume.up {
    left: 175px
}

image.png

switchlite 按键

剩下的内容也可以分为三个部分（左侧按键，屏幕，右侧按键）

为了方便做左右两侧的按键的位置，这边先把中间的屏幕做出来

<div class="switch" >
    <div class="volume down"></div>
    <div class="volume up"></div>
    <div class="back left"></div>
    <div class="back right"></div>
    <div class="switch-body">
       <div class="screen-container">
       </div>
    </div>
</div>

.screen-container {
    display: block;
    width: 445px;
    height: 250px;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    border-radius: 9px;
    background-image: linear-gradient(#F4797C, #F07477);
    box-shadow: 0 0 .5px .5px #FF9395, 0px -3px 4px #E56A6F inset, 1px 1.5px 1.5px #BA525A inset, 4px 4px 2px #FD8186 inset, -1px 1.5px 1.5px #BA525A inset, -4px 4px 2px #FD8186 inset
}

Snipaste_2022-07-25_13-54-27.jpg

设置内屏样式

<div class="switch" >
    <div class="volume down"></div>
    <div class="volume up"></div>
    <div class="back left"></div>
    <div class="back right"></div>
    <div class="switch-body">
       <div class="screen-container">
           <div class="screen"></div>
       </div>
    </div>
</div>
.screen {
    display: block;
    width: 390px;
    height: 225px;
    background-color: #FFDADB;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 15px;
    border-radius: 2px;
    box-shadow: 0 0 1px 1px #EB8B89, 0 0 0 5px #030303 inset
}

Snipaste_2022-07-25_13-57-25.jpg

把左右两侧减号与加号的样式添加一下

<div class="switch" >
    <div class="volume down"></div>
    <div class="volume up"></div>
    <div class="back left"></div>
    <div class="back right"></div>
    <div class="switch-body">
        <div class="minus"></div>
        <div class="plus">
            <div class="vertical"></div>
            <div class="horizontal"></div>
        </div>
        <div class="screen-container">
           <div class="screen"></div>
        </div>
    </div>
</div>

.minus {
    position: absolute;
    display: block;
    width: 16px;
    height: 4px;
    top: 30px;
    left: 80px;
    border-radius: 1px;
    background-color: #DFD5D9;
    box-shadow: 0 0 .5px .75px #4B0607, 0 0 0 .5px #FFFAF8 inset, 0 2.5px 4px -1px #B84849
}

.plus {
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 25px;
    right: 80px
}

.plus:before,
.plus:after {
    content: "";
    display: block;
    width: 5.5px;
    height: 100%;
    background-color: #340005;
    margin-left: auto;
    margin-right: auto;
    border-radius: 1px;
    position: absolute;
    left: 0;
    right: 0;
    box-shadow: 0 1px 1px rgba(52, 0, 5, 0.2), 0 0 .5px rgba(52, 0, 5, 0.5)
}

.plus:after {
    width: 5px;
    transform: rotate(90deg)
}

Snipaste_2022-07-25_14-02-35.jpg

做两侧对称的摇杆

<div class="switch" >
    <div class="volume down"></div>
    <div class="volume up"></div>
    <div class="back left"></div>
    <div class="back right"></div>
    <div class="switch-body">
        <div class="minus"></div>
        <div class="plus">
            <div class="vertical"></div>
            <div class="horizontal"></div>
        </div>
        <div class="screen-container">
           <div class="screen"></div>
        </div>
         <div class="controller left"></div>
    </div>
</div>

.controller {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background-image: linear-gradient(-135deg, #F4F2F0, #AFAFAF);
    box-shadow: 0 -4.5px 3px #BAB6B3 inset, 0 0 .5px 5px #EFEDEE inset, 0 -5px .5px 1px white inset, -1.5px 1.5px 2px 4px #888 inset, 0 0 1px 1px #2F0000, 0 -1px 1.5px 1px #913639, 0 10px 14px -2px #C64850
}

.controller.left {
    position: absolute;
    left: 33px;
    top: 55px
}

Snipaste_2022-07-25_14-04-55.jpg

右侧摇杆调整对应位置即可

左侧的十字按键

<div class="arrow-container">
    <div class="arrow top"></div>
    <div class="arrow right"></div>
    <div class="arrow bottom"></div>
    <div class="arrow left"></div>
 </div>

.arrow-container {
    display: block;
    width: 62px;
    height: 62px;
    position: absolute;
    top: 140px;
    left: 25px
}

.arrow-container:before,
.arrow-container:after {
    position: absolute;
    left: 0;
    right: 0;
    content: "";
    display: block;
    width: 22px;
    height: 100%;
    background-color: yellow;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
    background-color: #0B0000
}

.arrow-container:after {
    transform: rotate(90deg)
}

.arrow {
    position: absolute;
    display: block;
    width: 19px;
    height: 50%;
    background-color: #D2D2D2;
    z-index: 1;
    border-radius: 2px
}

.arrow:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #B8BAB9;
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

.arrow.top {
    top: 1.5px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    box-shadow: 0 2px 2px #FAF5F7 inset, -1.5px 0 1px #FAF5F7 inset, 1px 0 1px #FAF5F7 inset
}

.arrow.bottom {
    transform: rotate(180deg);
    bottom: 1px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    box-shadow: 0 4px 2px -2px #B2A4A9 inset
}

.arrow.right {
    top: 15.5px;
    transform: rotate(90deg);
    right: 8px;
    box-shadow: 0 3px 2px -2px #FFFBFC inset
}

.arrow.left {
    top: 15.5px;
    transform: rotate(-90deg);
    left: 7px;
    box-shadow: 0 4px 2px -2px #FAF5F7 inset
}

Snipaste_2022-07-25_14-08-58.jpg

右侧按键样式

  <div class="button-container" aria-hidden="true">
    <div class="button top">
        <p>X</p>
    </div>
    <div class="button right">
        <p>A</p>
    </div>
    <div class="button bottom">
        <p>B</p>
    </div>
    <div class="button left">
        <p>Y</p>
    </div>
</div>
.button-container {
    display: block;
    width: 75px;
    height: 75px;
    position: absolute;
    top: 45px;
    right: 20px
}

.button {
    display: block;
    position: absolute;
    width: 23px;
    height: 23px;
    border-radius: 12.5px;
    background-color: #DBDBD9;
    background-image: linear-gradient(#E1DFE0, #D1D4CF);
    box-shadow: 0 2px .75px #F4F6FA inset, 0 -2px .75px #B8A8A4 inset, -2px 0 .75px #D1C7C9 inset, 2px 0 .75px #D1C7C9 inset, 0 0 1px 1px #450709, 0 -2px 1px 1px #EC919B, 0 5px 4px -2px #D35657
}

.button.top {
    top: 1px
}

.button.bottom {
    bottom: 1px
}

.button.top,
.button.bottom {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto
}

.button.left {
    left: 1px
}

.button.right {
    right: 1px
}

.button.left,
.button.right {
    top: 25px
}

.button p {
    text-align: center;
    margin-top: 4px;
    font-family: sans-serif;
    font-size: .75rem;
    color: #B2B2B2
}

image.png

最后是左右侧两端下部按钮

  <div class="screenshot"></div>
  <div class="home"></div>
.vertical,
.horizontal {
    position: absolute;
    display: block;
    width: 3.5px;
    z-index: 1;
    background-color: #E3E2DE;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: .5px
}

.vertical {
    top: 1px;
    height: 13px
}

.horizontal {
    transform: rotate(90deg);
    top: 1px;
    height: 13.5px
}

最后我们将异度之刃的图片设置到屏幕上 code.juejin.cn/pen/7124094…

“我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！”

avatar
文章
阅读
粉丝