实现思路
项目中要实现一个动画效果,类似于PPT中的擦除效果,其实每个动画并不难实现,关键是要理解动画执行的逻辑,只要理解逻辑了,问题就迎刃而解。首先说下擦除效果的逻辑吧。
擦除效果就是高度从零到设置值的变化,也是宽度从零到设置值的变化,为什么这样说呢,是因为擦除效果有四个方向——上下左右,为了更好的理解,下面是PPT上面擦除效果的截图
下面我们来看下代码的实现,废话不多说,还是直接上代码
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />