子比主题美化-给顶部幻灯片组件添加一组图标引导栏目-WP教程社区-Wp教程-大玩咖社区

子比主题美化-给顶部幻灯片组件添加一组图标引导栏目

该帖子部分内容已隐藏
付费阅读
6.6
此内容为付费阅读,请付费后查看

效果图

20240521192925169-image

 

 

美化步骤

20240521192933376-image

 

20240521192943727-image

 

如图所示,在幻灯片简介这里添加代码(显示位置选择为居中)

然后添加自定义css代码

.icon-cover-card {
  display: flex;
  justify-content: center;
  position: relative;
  min-width: 60px; 
}
.icon-cover-icon {
  margin: 0 5px; 
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34), margin-top 0.3s cubic-bezier(0.25, 0.1, 0.13, 1.34); /* 添加放大效果的过渡 */
  z-index: 1;
  max-width: 100%; 
  max-height: 100%; 
}
.icon-cover-card:hover .icon-cover-icon:hover {
  transform: scale(1.2) translateY(-5px); 
  z-index: 2; 
  margin-top: -20px;
}
@media screen and (max-width: 768px) {  
      .conter-bottom {  
        display: none;  
    }  
}

 

 

请登录后发表评论

    请登录后查看回复内容

 

昼夜

客服

客服

点击联系站长 点击联系站长

在线时间
12:00 - 22:00

关注微信公众号

扫码加入QQ交流群
交流QQ群

1064590465

站长邮箱 3337469827@qq.com