评论

新拟态Neumorphism样式的实现

新拟态(Neumorphism)风格的实现。

流行是一种轮回,今年新拟态的风格在设计圈非常火,虽然这个设计风格存在一些问题,但个人也是蛮喜欢的,于是就把这个应用到自己的小程序里了。


一、新拟态定义和特点

通过观察,我们发现新拟态有如下特点:

  1. 只有一个光源,左上角亮色投影,右下角深色投影
  2. 常用与按钮组件和卡片上
  3. 与背景对比度较弱
  4. 分为两种状态,凹下去和凸出来

二、代码实现

.neumorphism{
  box-shadow: -7px -7px 20px 0px #fff9,
              -4px -4px 5px 0px #fff9,
              7px 7px 20px 0px #0002,
              4px 4px 5px 0px #0001;
}
.neumorphismin,.neumorphism:active{
  box-shadow: 0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #fff9,
              0px 0px 0px 0px #0001,
              0px 0px 0px 0px #0001,
              inset -7px -7px 20px 0px #fff9,
              inset -4px -4px 5px 0px #fff9,
              inset 7px 7px 20px 0px #0003,
              inset 4px 4px 5px 0px #0001;
}

在使用的过程中,只需要在原来的按钮加上class即可,点击态自动加上凹下去效果。

凸起:class ="neumorphism"
凹下:class ="neumorphismin" 

实现前后对比图:

最后一次编辑于  2020-05-13  
点赞 4
收藏
评论

1 个评论

  • Zoom
    Zoom
    2020-06-28

    想请问一下,返回的样式是怎么改的啊


    2020-06-28
    赞同 1
    回复 2
    • 驰子
      驰子
      2020-06-30
      自定义导航,navigationStyle设置为custom,就可以自己写样式了。
      2020-06-30
      回复
    • Zoom
      Zoom
      2020-06-30回复驰子
      太棒了,谢谢谢
      2020-06-30
      回复
登录 后发表内容