【凡哥教程第五讲作业】公园一角（让元素动起来）

扬帆 · 发表于 2024-7-25 23:28

本帖最后由扬帆于 2024-7-27 01:35 编辑

扬帆 · 发表于 2024-7-25 23:30

本帖最后由扬帆于 2024-7-25 23:59 编辑

<style>

#dwj {

position: relative;

margin: 230px 0 30px calc(50% - 880px);

width:1580px;

height: 720px;

background: url('http://qslt.net/data/attachment/forum/202407/25/220805iax5eot399aepzqv.jpg.thumb.jpg') no-repeat center/cover;

}

.mypic {

position: absolute;

left: 10px;

top: 10px;

width: 177px;

height: 177px;

animation: syc 4s linear 3;

}

@keyframes syc {

from { bottom: 10px; }

to {top: 533px; }

}

</style>

花简静 · 发表于 2024-7-26 10:08

扬童鞋最有创意和个性。看代码：
贴子名称改为：#dwj
动画名称改为：syc
小四叶草运动方式与大家不同，是上下移动

效果太好了。。

清梦 · 发表于 2024-7-26 10:11

欣赏杨帆精彩作业！

清梦 · 发表于 2024-7-26 10:11

问好杨帆，祝学习愉快！

花简静 · 发表于 2024-7-26 10:22

杨帆有自己的思考，
533的计算非常棒，用720-177=543 加上预留10，所以设为533

花简静 · 发表于 2024-7-26 10:22

本帖最后由花简静于 2024-7-26 10:23 编辑

@keyframes syc {
from { bottom: 10px; }
to {top: 533px; }

但是，代码中，关键帧动画中：bottom: 10px;（下边距10）和top: 533px; （上边距533）设的是同一个位置。。
之所以你贴子里会动，是因为，四叶草原位置：
.mypic {
position: absolute;
left: 10px;
top: 10px;
width: 177px;
height: 177px;
animation: syc 4s linear 3;
}
top:10px；起了作用。（如果你删掉它，你这个四叶草是不会动的）

现在需要把动画的改为：
@keyframes syc {
from { top: 10px; }
to {top: 533px; }

依据凡哥教程原句话：
提示：使用 top 属性设计 @keyframes 动画，动画设计中不能 top 和 bottom 混用，要统一使用相同的属性，要么都是 top 要么都是 bottom；计算左下角 top 值时，应考虑帖子容器的高度、子元素即图片的高度以及预留空间。

以上建议是个人的一点想法，如有异议一起讨论哈。。

碧海 · 发表于 2024-7-26 11:37

杨帆的作业很有自己的想法，欣赏问好~

碧海 · 发表于 2024-7-26 11:38

问好杨帆，谢谢你分享精彩作业，祝学习愉快~

柒玥 · 发表于 2024-7-26 13:07

欣赏杨帆的精彩作业！

[活动] 【凡哥教程第五讲作业】公园一角（让元素动起来）

评分

评分

评分