css 让图片从左一次显示不出来

在网页设计中，使用图片可以为页面增添美观度和提高用户体验。然而，有时候我们需要让图片从左边一次性显示出来，而不是逐渐出现，这就需要用到CSS。

    img{
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    .show{
        opacity:1;
    }

CSS代码解释：

首先，我们将图片的透明度设置为0。opacity属性控制元素的透明度，数值从0到1，0表示完全透明，1表示不透明。

接着我们给图片设置了一个1秒的渐变效果，当图片的透明度发生改变时就会慢慢显示出来。transition属性定义了元素的过渡效果，它有4个值：属性、持续时间、过渡方式、延迟时间。

最后，我们使用.show类来使图片显示出来，当该类被添加到img元素上时，图片就会从左边一次性显示出来。

HTML代码：

    <img src="image.png" class="show">

在HTML代码中，我们将图片元素添加了show类，这样图片在加载时会立即显示出来。