【凡哥教程第五讲作业】【花简静】吹泡泡的小姑娘（让元素动起来）

花简静

花简静

<style> #mama { position: relative; margin: 130px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/fgji5.webp') no-repeat center/cover; }   #mypic { position: absolute; left: 20px; top: 240px; width: 180px; height: 180px; animation: rot 8s linear 6; /* 时长为8秒 匀速 运行6次 */ } @keyframes rot { from { left: 880px; } /* 从 左距880px开始 */ to { left: 10px; } /* 到 左距10px结束 */ } </style> <div id="mama"> <img id="mypic" alt="" src="https://642303.freep.cn/642303/za/xiaotu06080603.png" /> </div>

花简静

凡哥第五 讲作业要求：
作业：修改本节的演示代码，令四叶草从左上角往左下角运动3次，每一次用4秒钟。
提示：使用 top 属性设计 @keyframes 动画，动画设计中不能 top 和 bottom 混用，要统一使用相同的属性，要么都是 top 要么都是 bottom；计算左下角 top 值时，应考虑帖子容器的高度、子元素即图片的高度以及预留空间。

完成作业情况：
根据画面要求，把子元素图片泡泡，从中间880px处向左边移到贴子左边缘10px处。。。
使用时间8秒。
运行6次

相关代码设置如下：
animation: rot 8s linear 6; /* 时长为8秒  匀速   运行6次 */

@keyframes rot {
    from { left: 880px; } /* 从 左距880px开始 */
    to { left: 10px; }  /* 到 左距10px结束 */
}

青石板

哇，泡泡真的在动，太好玩了。
童真有趣的图图，码字精彩，很赞

青石板

问好静亲，作图辛苦

青石板

问好静亲，作图辛苦了

青石板

问好静亲，作图辛苦了

花简静

青石板 发表于 2024-7-25 18:49
哇，泡泡真的在动，太好玩了。
童真有趣的图图，码字精彩，很赞

青青复制一下代码，换张自己的图，也可以玩一下的哦。

花简静

青石板 发表于 2024-7-25 18:50
问好静亲，作图辛苦了

哈哈，因为是代码作业，我做图又极慢。就找得现成的图

花简静

青石板 发表于 2024-7-25 18:49
哇，泡泡真的在动，太好玩了。
童真有趣的图图，码字精彩，很赞

这里用的是小和尚提供的千山LOGO图片，我直接放上去了。
已传到素材版，有需要可以去取哈。