CSS——实现新拟态
新拟态真的是我最喜欢的CSS风格之一了，其次是毛玻璃。在掌握了一些CSS3技巧之后，我希望能够自己写一个新拟态。
啥是新拟态？
简单讲，新拟态是一种图形样式，其原理是为界面的UI元素赋予真实感。
其实他也是算拟物风格的一种，只不过表现形式不一样，最早出现在追波上,后面陆续被收录在2020设计趋势预测里面，在2019年的年末慢慢被大家熟知，讨论，重视起来。暂且不论是不是未来的必然趋势之一，一个事物的兴起多少是有些道理，我们持辩证的眼光去看到，去学习、去了解便好。
原理
- 左上角亮色投影，右下角深色投影（有且只有一个光源照射）
- 元素与背景对比度比较弱
- 常常用于按钮组件和卡片
- 按钮状态，视觉上凸出代表未选中，凹进去表示已选中状态
所以大致懂了吧，给大家上代码，感受一下：
CSS
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #efeeee;
}
.container{
width: 700px;
height: 600px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
}
.container .box{
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
align-content: center;
width: 100px;
height: 140px;
margin: 20px;
}
.container .box .img{
width: 100px;
height: 100px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.1),
-18px -18px 30px rgba(255, 255, 255, 1);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #efeeee;
transition: box-shadow .2s ease-out;
position: relative;
}
.container .box .img img{
width: 60px;
transition: width 0.2s ease-out;
}
.container .box p{
color: slategrey;
}
.container .box .img:hover{
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
transition: box-shadow .2s ease-out;
}
.container .box .img:hover img{
width: 58px;
transition: width 0.2s ease-out;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新拟态</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlyiuR.png" alt="DlyiuR.png" border="0" />
</div>
<p>录音机</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/Dlyn8e.png" alt="Dlyn8e.png" border="0" />
</div>
<p>微信</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlyFD1.png" alt="DlyFD1.png" border="0" />
</div>
<p>日历</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlykHx.png" alt="DlykHx.png" border="0" />
</div>
<p>时钟</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlyCv9.png"/>
</div>
<p>浏览器</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlsjEV.png"/>
</div>
<p>电话</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlyugH.png"/>
</div>
<p>相册</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlyKvd.png"/>
</div>
<p>相机</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlsvNT.png"/>
</div>
<p>短信</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlyVUK.png"/>
</div>
<p>通讯录</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/Dlsqun.png"/>
</div>
<p>Youtube</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/Dlso9g.png"/>
</div>
<p>Facebook</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlsHjs.png"/>
</div>
<p>哔哩哔哩动画</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/Dls7cj.png"/>
</div>
<p>QQ</p>
</div>
<div class="box">
<div class="img">
<img src="https://s3.ax1x.com/2020/11/21/DlsT3Q.png"/>
</div>
<p>Java</p>
</div>
</div>
</body>
</html>
这个是在线演示，自己手动把所有图片都丢到了图床上。
可以在在线演示里面试试看。
小小的纰漏
鼠标悬停在div上时，图片会稍稍移动，反正就当没看到。
一般正常来说，一个普通的新拟态只需要有以下代码即可：
CSS端
div {
width:100px;
height:100px;
text-decoration: none;
margin:15px;
border-radius: 10px;
padding:10px 20px;
box-shadow:2px 2px 4px gray;
background-color: white;
color: slategrey;
text-shadow: 1px 1px 1px gray;
margin: 0 auto;
position: relative;
top: 50%;
margin-top: -60px;
}
div:hover {
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2),
0px 0px 0px rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
transition: box-shadow .2s ease-out;
text-shadow: 1px 2px 2px gray;
}
HTML
<div></div>
这里是实现效果。虽然不太好看，但是看上去还行吧。
