新拟态设计html,CSS新拟态效果

效果图

html

新拟态

地图

微信

QQ

日历

时钟

电话

相册

相机

邮箱

bilibili

华为

小米

百度

设置

我的

CSS

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

body{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background-color: #efeeee;

}

/*

.container{

position: absolute;

display: grid;

grid-template-columns: repeat(3,1fr);

grid-template-rows: repeat(2,1fr);

grid-gap: 10px;

} */

.container{

width: 700px;

height: 600px;

display: flex;

justify-content: space-around;

align-items: center;

flex-wrap: wrap;

}

.container .box{

display: flex;

flex-direction: column;

justify-content: space-around;

align-items: center;

align-content: center;

width: 100px;

height: 140px;

margin: 20px;

}

.container .box .img{

width: 60px;

height: 60px;

display: flex;

justify-content: center;

align-items: center;

box-shadow: 18px 18px 30px rgba(0,0,0,.1),

-18px -18px 30px rgba(255,255,255,1);

border-radius: 20px;

background-color: #EFEEEE;

transition: box-shadow .2s ease-out;

}

.container .box .img img{

width: 30px;

transition: width .2s ease-out;

}

.container .box .img p{

color: slategray;

}

.container .box .img:hover{

box-shadow: 0px 0px 0px rgba(0,0,0,.1),

0px 0px 0px rgba(255,255,255,1),

inset 18px 18px 30px rgba(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: 29px;

transition: width .2s ease-out;

}