具有边界半径和线性渐变的CSS过渡 [英] CSS Transition with Border Radius and Linear Gradient

问题描述

给出我的CodePen https://codepen.io/scottmgerstl/pen/MpMeBy 是我的图像布局有问题吗

Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question

<span class="profile-pic-wrapper">
    <a href="https://www.google.com" target="_blank">
        <img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/>
        <span class="profile-pic-overlay">
            <span class="social-icon">View Profile</span>
        </span>
     </a>
</span>

说明

我试图在由边界半径(profile-pic-wrapper)裁剪的线性渐变(profile-pic-overlay)上使用CSS过渡.当圆形的图像容器悬停在上方时，线性渐变逐渐淡入视图，表明您可以查看轮廓，从而获得所需的轮廓图像.

I am trying to use a CSS transition on a linear gradient (profile-pic-overlay) that is clipped by a border radius (profile-pic-wrapper). The desired behavior is to have a profile image when, the rounded image container is hovered over, a linear gradient fades into view indicating you can view the profile.

问题

渐变不遵守边界半径的范围.我尝试了此答案，但是当我这样做时，线性渐变不会过渡. @Keyframe动画也无济于事.

The gradient does not honor the bounds of the border radius. I tried this answer but when I do that, the linear gradient will not transition. @Keyframe animation doesn't help either.

有什么想法吗?

修改

这似乎仅是Windows上的Chrome的问题

This appears to be an issue only with Chrome on Windows

推荐答案

据我所知，该问题与您的渐变层的<a>容器有关.在此处搜索有关如何解决此问题的方法，可以添加一些属性，这些属性将涵盖大多数浏览器:

As far I can test the problem is related to the <a> container of your gradient layer. Searching about how to solve this issue here are some properties you can add that will cover most browsers:

will-change & transform:translate3d

将此添加到您的代码中:

Add this to your code:

.profile-pic-wrapper, .profile-pic-wrapper a {
  display:block;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  will-change:transform;
}

Codepen演示

---

_{注意:信息改编自此答案，我想在此处发布我的答案适合您的情况，因为您需要在标签和父标签上进行操作，但是如果需要，我们可以将其作为dup关闭.}

Codepen Demo

---

_{Note: Info adapted from this answer, I want to post here my answer to suit your case beacuse you need to do it on a tag and parent tag, but if you want we can close it as dup.}

这篇关于具有边界半径和线性渐变的CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！