css3图片从上掉下效果 |this .css

/* 设置图片的初始状态 */
.img{
position:absolute;  /*设置为绝对定位*/
top:-100px;         /*将图片向上100px*/
left:50%;           /*将图片水平居中*/
transform:translateX(-50%); /*将图片水平居中*/
transition:1s;      /*设置过渡效果为1s*/
}
/* 设置图片的运动状态 */
.img.active{
top:50px;           /*将图片落下50px*/
}

上述代码中，大家使用了CSS3中的transition和transform属性，这两个属性可以使大家的图片运动起来。首先，大家将图片的初始位置设置在页面上方100个像素外，并将其水平居中，然后通过transform属性将其向左移动50%，使其居中。在图片被触发后，大家将其状态设置为active，并将其top属性设置为50px，使其从上方落下，形成动画效果。

大家可以通过以下代码触发图片下落的效果：

var img = document.querySelector('.img');
img.classList.add('active');

这样，大家就可以实现图片从上往下落的效果了。