w_l_j_ 2022-10-03 15:55 采纳率: 50%
浏览 18
已结题

在hbuilder环境中css3动画问题

问题遇到的现象和发生背景

在hbuilder环境中css3的动画

用代码块功能插入代码,请勿粘贴截图

/公用样式/
.go {
width: 100px;
height: 100px;
border-radius: 50%;
position: fixed;
top: 30px;
right: 30px;
z-index: 2001;
}
.more {
position: fixed;
right: 60px;
bottom: 85px;
z-index: 2001;
animation: more01 0.4s linear infinite alternate;
}
/内容容器/
.content {
width: 900px;
height: 600px;
background: rgba(0,0,0,.3);
position: absolute;
bottom: 0;
left: 50%;
margin-left: -450px;
}
/第一屏/
.screen01 {
background:url(../img/01-bg.png)no-repeat center bottom;
}
.screen01 .sofa {
position: absolute;
left: 230px;
top: 150px;
animation: sofa01 1s linear infinite alternate;
}
.screen01 .goods {
text-align: center;
margin-top: 230px;
}
.screen01 .fly {
position: absolute;
top: 0;
right: -50px;
animation: fly01 2s linear infinite alternate;
}
/第一屏动画/
@keyframes sofa01{
from{transform: translateY(-10px);}
to{transform: translateY(10px);}
};
@keyframes fly01{
from{transform: translateY(-40px);}
to{transform: translateY(40px);}
};
@keyframes more01{
from{transform: translateY(-10px);}
to{transform: translateY(10px);}
};

运行结果及报错内容

只有一个sofa01一个动画可以实现

我想要达到的结果

全部动画都实现

  • 写回答

1条回答 默认 最新

  • MAXLZ 2022-10-03 16:05
    关注

    @keyframes xxx{...};最后的;删除。

    @keyframes sofa01{
      from{transform: translateY(-10px);}
      to{transform: translateY(10px);}
    }
    @keyframes fly01{
      from{transform: translateY(-40px);}
      to{transform: translateY(40px);}
    }
    @keyframes more01{
      from{transform: translateY(-10px);}
      to{transform: translateY(10px);}
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 10月11日
  • 已采纳回答 10月3日
  • 创建了问题 10月3日

悬赏问题

  • ¥15 需要写计算过程,不要写代码,求解答,数据都在图上
  • ¥15 向数据表用newid方式插入GUID问题
  • ¥15 multisim电路设计
  • ¥20 用keil,写代码解决两个问题,用库函数
  • ¥50 ID中开关量采样信号通道、以及程序流程的设计
  • ¥15 U-Mamba/nnunetv2固定随机数种子
  • ¥15 C++行情软件的tick数据如何高效的合成K线
  • ¥15 vba使用jmail发送邮件正文里面怎么加图片
  • ¥15 vb6.0如何向数据库中添加自动生成的字段数据。
  • ¥20 在easyX库下编写C语言扑克游戏跑的快,能实现简单的人机对战