XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: 优化幻灯片项悬停动画效果

Browse Source 
将幻灯片项的遮罩动画从修改宽高改为缩放变换，使动画效果更平滑自然。同时统一了CSS和LESS文件的实现方式。
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-06-10 15:48:55 +08:00
parent 8284e385c2
commit 34185d8d1f
2 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/styles/apartmentDetail.css
View File

@@ -152,21 +152,21 @@
.content .header .header-content .header-left .slideshow-across .box .item::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.50196078);
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
transition: all 0.3s;
transform: scale(1);
}
.content .header .header-content .header-left .slideshow-across .box .item:hover::after {
width: 0;
height: 0;
transform-origin: center;
transform: scale(0);
}
.content .header .header-content .header-left .slideshow-across .box .item.pitch::after {
width: 0;
height: 0;
transform-origin: center;
transform: scale(0);
}
.content .header .header-content .header-left .slideshow-across .box .item .video-icon {
width: 44px;

16
src/assets/styles/apartmentDetail.less
View File

@@ -180,24 +180,24 @@
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.501960784313725);
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
transition: all 0.3s;
transform: scale(1);
}
&:hover::after {
width: 0;
height: 0;
transform-origin: center;
transform: scale(0);
}
&.pitch {
&::after {
width: 0;
height: 0;
transform-origin: center;
transform: scale(0);
}
}