线性渐变效果在另一个页面上不起作用 - 可能缺少 css 代码答案

【问题标题】：linear-gradient effect doesnt work on another page- probably missing css code线性渐变效果在另一个页面上不起作用 - 可能缺少 css 代码
【发布时间】：2021-04-08 06:33:28
【问题描述】：

我在 html 上有一个线性渐变。

在此网页上： http://unlockdesizn.com/html/health-and-beauty/be-medical/demo/page-department.html

当你悬停医生滑块时，图片上有渐变效果。

我将滑块转换为 wordpress 插件，但可能我错过了一些 css 代码并且渐变效果在此页面上不起作用：

https://www.video.helvatica.com/

如何解决？

.team-grid .thumb:before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);

【问题讨论】：

标签： css linear-gradients

【解决方案1】：

我想你忘了添加悬停 CSS 和动画 CSS。请添加下面的css并检查它。

.team-grid:hover .thumb:before {
    -webkit-animation: shine .85s;
    animation: shine .85s; 
}
@-webkit-keyframes shine {
  100% { left: 125%; } 
}
@keyframes shine {
  100% { left: 125%; }
}

【讨论】：