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

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

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