80 lines
1.8 KiB
CSS
80 lines
1.8 KiB
CSS
body{
|
||
/* 取消页面内外边距 */
|
||
margin: 0;
|
||
padding: 0;
|
||
/* 100%窗口高度 */
|
||
height: 100vh;
|
||
/* 渐变背景 */
|
||
background: linear-gradient(200deg,#f3e7e9,#e3eeff);
|
||
/* 弹性布局 水平、垂直居中 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.share-button{
|
||
width: 300px;
|
||
height: 80px;
|
||
background-color: #fff;
|
||
border-radius: 40px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
cursor: pointer;
|
||
/* 溢出隐藏 */
|
||
overflow: hidden;
|
||
/* 加个动画过渡 */
|
||
transition: 0.3s linear;
|
||
}
|
||
.share-button:hover{
|
||
/* 放大1.1倍 */
|
||
transform: scale(1.1);
|
||
}
|
||
.share-button span{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #333;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
line-height: 80px;
|
||
border-radius: 40px;
|
||
z-index: 1;
|
||
/* 动画过渡 */
|
||
transition: 0.6s linear;
|
||
}
|
||
.share-button:hover span{
|
||
/* 沿X轴移动 */
|
||
transform: translateX(-100%);
|
||
/* 动画延迟 */
|
||
transition-delay: 0.3s;
|
||
}
|
||
.share-button a{
|
||
flex: 1;
|
||
font-size: 26px;
|
||
color: #333;
|
||
text-align: center;
|
||
transform: translateX(-100%);
|
||
/* 不透明度 */
|
||
opacity: 0;
|
||
transition: 0.3s linear;
|
||
}
|
||
.share-button:hover a{
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
/* 接下来为每一个a元素（图标）分别设置动画延迟 */
|
||
/* :nth-of-type(n)选择器是匹配属于父元素的特定类型的第n个子元素的每个元素 */
|
||
.share-button a:nth-of-type(1){
|
||
transition-delay: 1s;
|
||
}
|
||
.share-button a:nth-of-type(2){
|
||
transition-delay: 0.8s;
|
||
}
|
||
.share-button a:nth-of-type(3){
|
||
transition-delay: 0.6s;
|
||
}
|
||
.share-button a:nth-of-type(4){
|
||
transition-delay: 0.4s;
|
||
} |