家电板块中的小效果的实现要点

原创2019-01-26 22:20:2996
摘要:小效果制作的要点: 1、享八折小方块的定位 用绝对定位的方法来实现,方法:position:absolute;top: left:, 注意绝对定位的元素父元素一定要做相对定位,position:relative; 2、家电板块中的每个小块有一个橙色矩形在鼠标指针指上时有个上升出现的动画效果,用css3来实现,方法是: 01 先在 style 样式中定义一个功
小效果制作的要点:
1、享八折小方块的定位
用绝对定位的方法来实现,方法:position:absolute;top: left:,
注意绝对定位的元素父元素一定要做相对定位,position:relative;
2、家电板块中的每个小块有一个橙色矩形在鼠标指针指上时有个上升出现的动画效果,用css3来实现,方法是:
01 先在 style 样式中定义一个功能
@keyframes move{
                   From{}
                   To{}
}
02 让相应的元素调用该动画功能,从而实现动画
Div{
                   Animation: move 1s......
}
01 @keyframes 是 C3 中提供的定义动画功能的关键字。
02 move 是我们自已定义的动画名称
03 from 里设置的是该动画的开始状态,to 里设置的是该动画的目标状态。

代码太长就不贴上了


批改老师:天蓬老师批改时间:2019-01-27 09:04:01
老师总结:对定位的元素父元素一定要做相对定位,position:relative;, 其实父级块用绝对定位也是可以的, 只要有定位属性就可以

发布手记

热门词条