我正在卡片中显示我的 SVG 图像
<div class="card-image">
<img src="/images/linux.svg" />
</div>
我无法在这里上传 SVG 文件,但我想做的是:(事件触发后)
- 一开始显示完整的原始 SVG,但是当执行操作时,只有 SVG 图像的左半部分或右半部分以彩色显示,而另一半则以灰度显示。
- 我希望能够调整旋转,以便可以选择图像变灰的 Angular 。
有人能指出我正确的方向吗?
最佳答案
你可以在容器上设置一个伪元素,并为这个伪元素设置一个渐变,一半是透明的,另一半是灰色的。线性渐变可以设置为您想要的 Angular
.card-image {
width: 200px;
height: 300px;
display: inline-block;
position: relative;
}
.grayed:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: 9;
background-image: linear-gradient(110deg, transparent 50%, #888a 50%);
}
<div class="card-image">
<img src="http://placekitten.com/200/300" />
</div>
<div class="card-image grayed">
<img src="http://placekitten.com/200/300" />
</div>
.card-image {
width: 600px;
height: 400px;
display: inline-block;
position: relative;
overflow: hidden;
}
.grayed:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
left: 50%;
top: -50%;
z-index: 9;
background-color: white;
mix-blend-mode: color;
transform: rotate(30deg);
transform-origin: left center;
animation: rotate infinite 10s linear;
}
@keyframes rotate {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
<div class="card-image grayed">
<img src="http://placekitten.com/600/400" />
</div>
关于javascript - 仅显示 SVG 的一半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60910568/