JavaScript动画1-速度动画

这篇博客介绍了JavaScript速度动画的实现,包括改变元素的left、right、width、height、opacity等属性来创建动画效果。文中给出了简单的HTML和CSS结构示例,并展示了如何在鼠标经过时,使用定时器实现元素平滑移动和透明度变化的动画。下一部分将讨论缓冲运动的效果。
摘要由CSDN通过智能技术生成

动画实际上就是在一定时间内,改变一个元素的某些属性。

这里简单实现一个JavaScript运动的框架。主要包括:
1. 速度动画(改变left、right、width、height、opacity)
2. 缓冲运动
3. 多物体运动
4. 任意属性值改变
5. 链式运动
6. 多属性同时变化

速度动画

速度动画就是通过改变left、right、width、height、opacity的值来达到动画效果。我们先写一个简单的HTML结构:

<div id="div1">
    <span id="share">分享</span>
</div>

具体CSS样式效果如下图:

JS动画演示1

这里,我用CSS将div的left值设置为-200px,使其移除浏览器窗口:

JS动画演示2

具体CSS参考如下:

body {
    font-family: "SF UI Text", serif, sans-serif;
    font-size: 12px;
}
* {
    margin: 0;
    padding: 0;
}
#div1 {
    width: 200px;
    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值