查看: 578|回复: 22

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

[复制链接]
发表于 2024-7-25 23:28 | 显示全部楼层 |阅读模式
本帖最后由 扬帆 于 2024-7-27 01:35 编辑

评分

6

查看全部评分

点评
回复

使用道具

 楼主| 发表于 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> <div id="dwj"> <img class="mypic" alt="" src="http://qslt.net/data/attachment/forum/202407/25/220004hz6g7x7zz1sxrp7h.png.thumb.jpg" /></div>
点评
回复

使用道具

发表于 2024-7-26 10:08 | 显示全部楼层
扬童鞋最有创意和个性。看代码:
贴子名称改为:#dwj
动画名称改为:syc
小四叶草运动方式与大家不同,是上下移动
效果太好了。。

评分

1

查看全部评分

点评
回复

使用道具

发表于 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 值时,应考虑帖子容器的高度、子元素即图片的高度以及预留空间。



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

评分

2

查看全部评分

点评
回复

使用道具

发表于 2024-7-26 11:37 | 显示全部楼层
杨帆的作业很有自己的想法,欣赏问好~
点评
回复

使用道具

发表于 2024-7-26 11:38 | 显示全部楼层
问好杨帆,谢谢你分享精彩作业,祝学习愉快~
点评
回复

使用道具

发表于 2024-7-26 13:07 | 显示全部楼层
欣赏杨帆的精彩作业!
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-10 14:55

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表