实现效果图: 实现效果视频: 视频加载中。。。 实现代码:!DOCTYPEhtmlhtmllangenheadmetacharsetutf8styletypetextcsshtml,body{width:100;height:100;margin:0;padding:0;背景颜色,天空backgroundcolor:b1e3fa;}。box{width:100;height:100;position:relative;设置对象处理溢出内容的方式,hidden隐藏溢出容器的内容且不出现滚动条overflow:hidden;}。boximg{position:absolute;width:100;bottom:0px;}图片1的动画属性。boximg:nthchild(1){动画名称、一周期时间、运动曲线为匀速、播放次数为无限循环、动画先正常运行再反方向运行并持续交替运行animation:move1slinearinfinitealternate;}设置图片2的动画属性。boximg:nthchild(2){动画名称、一周期时间、运动开始时间、、、、、animation:move1s0。5slinearinfinitealternate;}规定图片动画移动keyframesmove{from{bottom:0px;}to{向下运动bottom:50px;}}太阳。sun{width:100px;height:100px;position:absolute;left:50px;top:50px;}。sun:after{content:;设置对象是否及如何显示:指定对象为块元素display:block;width:50px;height:50px;设置对象使用圆角边框borderradius:50;backgroundcolor:ffffffcc;position:absolute;left:50;marginleft:25px;top:50;margintop:25px;动画名称、一周期时间、运动曲线为匀速、播放次数为无限循环、动画先正常运行再反方向运行并持续交替运行animation:scale1slinearinfinitealternate;}。sun:before{content:;display:block;width:80px;height:80px;borderradius:50;backgroundcolor:ffffff99;position:absolute;left:50;marginleft:40px;top:50;margintop:40px;animation:scale1s0。5slinearinfinitealternate;}规定动画,太阳keyframesscale{from{boxshadow:0px0px0pxfff;transform:scale(1);}to{boxshadow:0px0px50pxfff;放大1。2倍transform:scale(1。2);}}styleheadbodyimgsrcc2021imgdataimg。jpgdatasrcimg05。71396。combalp6e60853dedfcfdf0。jpgaltimgsrcc2021imgdataimg。jpgdatasrcimg05。71396。combalp3a220004b7106964。jpgaltbodyhtml 素材图片: