这个案例是利用关键帧来设置背景图片的动画效果,通过关键帧给外层的飞机图片设置了旋转的效果,以及中间部分的背景图片的缩放与切换效果,并且的图片切换的同时有淡入淡出效果。
效果图:

在这里插入图片描述

HTML部分:

  1. 在body里面添加一个外层的大盒子,用来包裹里面的元素,并且设置了一个类名div1。
  2. 在div1放入圆形的飞机图片;
  3. 再设置一个div,要与上面的图片是平级关系。

HTML代码:
在这里插入图片描述

CSS部分:

  1. 设置div1以及里面的元素的样式;
  2. 设置关键帧:关键帧NO1:旋转的动画效果;关键帧NO2:缩放的动画效果,在缩放的同时切换背景图片,缩放的倍数可以根据图片的大小进行调整。
  3. 给需要实现效果的HTML元素添加animation,设置动画的时间、次数。

CSS代码:

在这里插入图片描述
以上就是全部内容。

Logo

助力广东及东莞地区开发者,代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展,成为松山湖开发者首选的工作与学习平台

更多推荐