170.Neumorphism 的新风格特效
Posted 前端小智@大迁世界
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了170.Neumorphism 的新风格特效相关的知识，希望对你有一定的参考价值。
效果 (源码网盘地址在最后)
源码
index.html
``
css
*{
margin:0;
padding:0;
}
.container {
background: #f0f0f0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.box {
border-radius: 20px;
width: 60px;
height: 60px;
background: #f0f0f0;
box-shadow: 0 0 0 #cccccc,
0 0 0 #ffffff,
10px 10px 10px #cccccc inset,
-10px -10px 10px #ffffff inset;
animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate;
/* animation-fill-mode: forwards; */
}
@keyframes anime {
0% {
width: 60px;
height: 60px;
b以上是关于170.Neumorphism 的新风格特效的主要内容，如果未能解决你的问题，请参考以下文章