用CSS动画线性渐变结束的透明颜色
用CSS动画线性渐变结束的透明颜色
提问于 2017-10-04 18:52:41
我需要帮助，使动画像线性梯度使用CSS结束在图像上的透明颜色..。
这是一个例子(如果可能的话)：
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-04 19:13:39
通过在:hover上创建线性梯度透明-白色透明和移动背景来实现电流效应。
这是在这个动画下放置图像的解决方案。但是请记住，没完没了的动画可能会给你的用户带来很大的干扰和烦扰。
.wrapper {
position: relative;
width: 350px;
height: 150px;
/*border: 2px solid #444;*/
border-radius: 10px;
overflow: hidden;
}
img {
position: relative;
z-index: 0;
width: 100%;
}
.gradient {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
font: 0;
position: absolute;
z-index: 1;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gradient {
background-image: linear-gradient(to top, transparent 0%, white 51%, transparent 100%);
background-position: center bottom;
}
.gradient:hover {
background-position: center top;
}
.gradient.animated {
animation: gradient 2s infinite;
}
@keyframes gradient {
0% {
background-position: center bottom;
}
50% {
background-position: center top;
}
100% {
background-position: center bottom;
}
}<div class='wrapper'>
<div href='#' class='gradient'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
<div class='wrapper'>
<div href='#' class='gradient animated'></div>
<img src='http://lorempixel.com/350/150/sports/' />
</div>
和更简单的例子来更好地理解
您可以在下面的文章中找到更多信息。
.gradiented {
transition: background-position .5s;
background-size: 200% auto;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
width: 200px;
height: 200px;
}
.gradiented {
background-image: linear-gradient(to top, #283048 0%, #859398 51%, #283048 100%);
background-position: center bottom;
}
.gradiented:hover {
background-position: center top;
}<div href='#' class='gradiented'></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46572171
复制相关文章
相似问题
腾讯云开发者
