[分享]css3怎样让图片往右上角飞出

CSS3可以使用动画效果使图片在网页中产生很炫酷的效果。接下来，我们就来讲解一下如何让图片往右上角飞出。/ 设置图片初始位置 / img { : absolute; top: 50; left: 50...

CSS3可以使用动画效果使图片在网页中产生很炫酷的效果。接下来，我们就来讲解一下如何让图片往右上角飞出。

/* 设置图片初始位置 */
img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 设定动画效果 */
@keyframes fly-out {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-200px) rotate(-180deg);
  }
}

/* 加入动画效果 */
img {
  animation: fly-out 2s ease-in forwards;
} 

上面的代码首先让图片从网页的正中间开始出现，然后使用关键帧动画（@keyframes）让图片从初始状态到结束状态进行过渡。设置0%的状态下图片透明度为1，位置与旋转角度不变，设置100%的状态下图片透明度为0，向上移动200px，旋转角度变为-180度。最后，让图片响应动画（animation）效果，动画时间为2秒，加入了缓动（ease-in），并将结束状态保留（forwards）。

通过上面这个简单的样式，就可以让网页中的图片像鸟儿一样飞向远方，大大增强了页面的视觉效果，吸引了更多用户的关注。