/* box-shadow: 0 6px 40px rgba(128, 128, 128, 0.25);
} */
._13b1tlgp0o000 .zz-element-wrapper:hover{
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
transition: all 0.36s ease;
}
._13b1tlgp0o000 .zz-element-wrapper:hover .title *{
color:rgba(0, 221, 220, 1);
}
._13b1tlgp0o000 .zz-element-wrapper img{
transition: all 0.36s ease;
}
._13b1tlgp0o000 .zz-element-wrapper:hover img{
transform:scale(1.1);
}
/*進度條*/
._13b1tlgp0o000 .zz-element-wrapper::after{
content:'';
position:absolute;
left:0;
bottom:-1px;
height:2px;
width:0%;
background-color:rgba(0, 221, 220, 1);
transition: all 0.36s ease;
z-index:3;
}
._13b1tlgp0o000 .zz-element-wrapper:hover::after{
width:100%;
}
/* 箭頭 ,箭頭可替換為矢量圖,修改代碼:
content:url(https://f.cdn-static.cn/12954_15984245228312.png);
*/
._13b1tlgp0o000 .zz-element-wrapper .text{
position:relative;
}
._13b1tlgp0o000 .zz-element-wrapper .text::after{
content:'→';
position:absolute;
right:0;
top:50%;
transform:translate(100%,-50%);
transition: all 0.36s ease;
opacity:0;
color:rgba(153, 153, 153, 1);
font-size:24px;
}
._13b1tlgp0o000 .zz-element-wrapper:hover .text::after{
transform:translate(0%,-50%);
opacity:1;
}
如上圖所示,上文中使用藍色背景標注的代碼就是效果中圖文的標題顏色以及下部的進度條顏色
常見問題