...简单的Css3动画...
简单的CSS3动画…
开发工具与关键技术：DW CSS3
作者：盘俊良
撰写时间：2019.1.18
动画这个东西 其实也不过是在几个变量之间加了一个过渡的效果…
这个东西…说简单又不简单…说难又不难…
就像每个人都会写字一样…但不是每个人都能写出一篇好的文章…
简单的介绍一下：
这是一个球
如果我要让这个球慢慢的来回滚动…
就要先规定一个动画…并且给它起个名字… 然后设置你要它到达的位置…
最后使用animation调用…并设置它的运动时间等等…
一个动画效果就完成了(在我看来.会动的都是动画效果) …
↓图中ease代表的是运动效果…不是速度
效果图：脑补…
这种是它自己执行的 如果你给它的运动次数设置了循环…只要你的页面不关闭…它就不会停下…这种东西…第一次接触确实挺好玩的…但是转的多了久了…看的头晕… 所以我还是比较推荐用伪类或者JS来调用它…
下面介绍一下用伪类调用它…
先介绍一下hover伪类…它的作用就是在鼠标移入元素上为元素添加样式…
然后…还是这个球…
如果我想要我的鼠标移到球上的时候…它就会慢慢的滚到右边去…移开又慢慢的滚回来…
效果图：脑补…
唯一要注意的是过渡效果的代码别直接放到伪类下面…
效果图：脑补…
如果这样放的话…那个球只会慢慢的过去…不会慢慢的回来…
额 里面所用的各种属性…W3C都有很详细的介绍…