在网页设计中，CSS动画是提高用户体验和吸引用户注意力的重要方式之一。但是，有时候我们会发现动画元素被其他元素遮挡了，影响了网页设计效果。

/*动画元素的CSS代码*/
.animation{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: move 2s ease-in-out;
}
@keyframes move{
0%{
transform: translate(-50%, -50%) rotate(0deg);
}
50%{
transform: translate(-50%, -50%) rotate(180deg);
}
100%{
transform: translate(-50%, -50%) rotate(360deg);
}
}
/*遮挡动画元素的CSS代码*/
.cover{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
z-index: 1;
}

以上是一个动画元素和一个遮挡元素的CSS代码。在这段代码中，我们可以看到遮挡元素的z-index属性设置为1，而动画元素的z-index属性并没有设置。这就是导致动画元素被遮挡的原因，因为默认情况下，所有的元素z-index值都是0。

为了解决这个问题，我们需要给动画元素添加一个更高的z-index值：

.animation{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: move 2s ease-in-out;
z-index: 2;
}

现在，我们给动画元素添加了一个z-index值，它就可以脱颖而出，不再被其他元素遮挡了。

总结来说，如果在网页设计中使用了CSS动画，但是发现动画元素被其他元素遮挡，那么可以通过给动画元素添加z-index属性解决这个问题。这个小技巧可以帮助你更好地提高网页设计效果，使用户体验更加良好。