H5新拟态设计风格按钮 |
您所在的位置：网站首页 › h5按钮点击设置 › H5新拟态设计风格按钮 |
H5新拟态设计风格按钮
|
引用知乎 全网最全的新拟态设计讲解 简单讲，新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。 其实他也是算拟物风格的一种，只不过表现形式不一样，最早出现在追波上, 后面陆续被收录在2020设计趋势预测里面，在2019年的年末慢慢被大家熟知，讨论，重视起来。暂且不论是不是未来的必然趋势之一，一个事物的兴起多少是有些道理，我们持辩证的眼光去看到，去学习、去了解便好。 新拟态设计风格特点 1.有且只有一个光源照射 2.组件与背景对比度比较弱 3.按钮状态，视觉上凸出代表未选中，凹进去表示已选中状态 H5实战 创建一个html文件 新拟态按钮 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } 写一个图标去阿里巴巴矢量图标库下载个图标，我就下载了个搜索的图标 阿里巴巴矢量图标库 搜索给他们来个居中，然后给个背景颜色 body { display: flex; align-items: center; justify-content: center; background-color: #ebecf0; } .icon-div { width: 100px; height: 160px; border-radius: 20px; display: flex; justify-content: space-around; flex-direction: column; align-items: center; align-content: center; user-select: none; } .icon-div .icon-img { width: 100px; height: 100px; /*一个合适的圆角*/ border-radius: 20px; /*颜色和背景颜色相近，低对比度*/ background-color: #ebecf0; display: flex; align-items: center; justify-content: center; } .icon-div .icon-img img { width: 60px; } .icon-div p { color: slategrey; } .icon-div:hover { cursor: pointer; }现在的效果貌似什么都看不出来，没有关系，下一步就给它模拟光照和阴影 给icon添加box-shadow来模拟光照和阴影 .icon-div .icon-img { /*...*/ /*模拟光照阴影*/ box-shadow: 5px 5px 10px rgba(121, 130, 160, 0.55), -5px -5px 10px rgb(255, 255, 255); }效果显著 设置点击反馈，把阴影反向，图标缩小一些，模拟按下，再增加一个过渡 .icon-div .icon-img img { transform: scale(1); } .icon-div .icon-img:active { /*阴影反向*/ box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0), inset 5px 5px 10px rgba(121, 130, 160, 0.55), inset -5px -5px 10px rgb(255, 255, 255); /*增加过渡*/ transition: box-shadow 50ms ease-out; } .icon-div .icon-img:active img { /*图标缩小*/ transform: scale(0.98); transition: transform 50ms ease-out; }在css里写一个:root选择器，里面写一些变量，方便配置 再把响应的变量替换成var(...)就行了 :root { --color-background: #ebecf0; --color-icon-bg: #ebecf0; --color-label: slategrey; --color-light: rgba(121, 130, 160, 0.55); --color-shadow: rgb(255, 255, 255); --duration-ani: 50ms; } .icon-div .icon-img { /*模拟光照阴影*/ box-shadow: 5px 5px 10px var(--color-light), -5px -5px 10px var(--color-shadow); /*增加过渡*/ transition: box-shadow var(--duration-ani) ease-out; }再来一款暗色配置 :root { --color-background: #3B4046; --color-icon-bg: #2D343C; --color-label: #777A7D; --color-light: #272a2e; --color-shadow: #595a5c; --duration-ani: 50ms; } |
【本文地址】