<div class="image">
<a href="网址">
<img src="图片网址"  class='no-lity'>
</a>
</div>

<!-------------图片逐渐显示并逐渐消失---------------->
<style>
/* 创建一个关键帧动画 */
@keyframes fade {
0% { opacity: 0; } /* 初始状态，完全透明 */
25% { opacity: 1; } /* 图像逐渐出现，25%的时间内 */
75% { opacity: 1; } /* 图像保持不透明，50%的时间内 */
100% { opacity: 0; } /* 结束状态，完全透明 */
}
/* 应用动画效果 /
.image {
position: fixed; / 使图像相对于浏览器窗口定位 /
top: 50%; / 将图像的顶部与窗口垂直居中 /
left: 55%; / 将图像的左侧与窗口水平居中 /
transform: translate(-50%, -50%); / 使用负值的translate来偏移图像的一半尺寸，使其居中 /
animation: fade 4s ease-in-out forwards; / 应用动画效果，持续4秒，并保持最后一帧状态 */
}
/* 图像样式 /
.image img {
max-width: 100%; / 图片的最大宽度为其容器的宽度 /
height: auto; / 确保图片保持其原始纵横比例 */
}
</style>
<!-------------图片逐渐显示并逐渐消失---------------->