58 lines
1.3 KiB
CSS
58 lines
1.3 KiB
CSS
*{
|
|
/* 初始化 */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body{
|
|
/* 100%窗口高度 */
|
|
height: 100vh;
|
|
/* 弹性布局 水平+垂直居中 */
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
/* 渐变背景 */
|
|
background: linear-gradient(200deg,#ffecd2,#fcb69f);
|
|
}
|
|
.container{
|
|
/* 定义3D元素距视图的距离 */
|
|
perspective: 320px;
|
|
}
|
|
.btn{
|
|
display: block;
|
|
margin: 40px 0;
|
|
width: 240px;
|
|
height: 80px;
|
|
border: none;
|
|
background-color: #fda085;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
border-radius: 6px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
/* 动画过渡 */
|
|
transition: 0.3s;
|
|
}
|
|
.btn:nth-child(1):hover{
|
|
/* 沿X轴旋转15度 */
|
|
transform: rotateX(15deg);
|
|
/* 阴影 */
|
|
box-shadow: 0 15px 15px rgba(225,95,65,0.56);
|
|
}
|
|
.btn:nth-child(2):hover{
|
|
/* 沿X轴旋转-15度 */
|
|
transform: rotateX(-15deg);
|
|
/* 阴影 */
|
|
box-shadow: 0 -15px 15px rgba(225,95,65,0.56);
|
|
}
|
|
.btn:nth-child(3):hover{
|
|
/* 沿Y轴旋转15度 */
|
|
transform: rotateY(15deg);
|
|
/* 阴影 */
|
|
box-shadow: -15px 0 15px rgba(225,95,65,0.56);
|
|
}
|
|
.btn:nth-child(4):hover{
|
|
/* 沿Y轴旋转-15度 */
|
|
transform: rotateY(-15deg);
|
|
/* 阴影 */
|
|
box-shadow: 15px 0 15px rgba(225,95,65,0.56);
|
|
} |