最近在社區(qū)看到一種設(shè)計(jì)風(fēng)格——新擬態(tài)谈宛，國(guó)外用neumorphism這個(gè)詞表示鸽照，關(guān)于這種風(fēng)格的介紹户秤，可以看下面的鏈接
火遍外網(wǎng)的「新擬態(tài)」設(shè)計(jì)風(fēng)格码秉，2分鐘就能用PPT做出來(lái)！
使用CSS模擬：
GITHUB上的一個(gè)DEMO
為了方便演示我將顏色以及大小調(diào)節(jié)了一下：
image.png
今天群里老哥推薦了一個(gè)直接生成CSS的網(wǎng)站虎忌，非常方便 neumorphism
核心代碼：
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
修改后的style.css文件
* {
margin: 0;
padding: 0;
}
.button {
width: 100px;
height: 100px;
font-size: 50px;
margin: 10px;
cursor: pointer;
background: #e0e5ec;
outline: none;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50px;
color: lightcoral;
}
.button:active {
box-shadow: inset -2px -2px 6px rgb(163, 177, 198, 0.6), inset 2px 2px 6px rgba(0, 0, 0, 0.8);
}
.dl {
width: 220px;
}
.ll {
height: 220px;
}
.textview {
width: 448px;
margin: 10px;
padding: 8px;
font-size: 50px;
padding: 10;
border: none;
border-radius: 25px;
color: lightcoral;
outline: none;
background: #e0e5ec;
box-shadow: inset 2px 2px 6px rgb(163, 177, 198, 0.6), inset -4px -5px 8px rgba(255, 255, 255, 0.5);
}
.main {
width: 551.25px;
height: 787.5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #e0e5ec;
border-radius: 15px;
box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);
}
.bandt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bg {
background: #e0e5ec;
height: 100vh;
}
配色參考：GITHUB地址
我的博客即將同步至 OSCHINA 社區(qū)泡徙，這是我的 OSCHINA ID：三個(gè)蛋蛋，邀請(qǐng)大家一同入駐：https://www.oschina.net/sharing-plan/apply
