最新的Web开发教程
 

W3.CSS赋予生命


随着W3.CSS动画滑动可以在HTML元素褪色。








动画是乐趣!
动画是乐趣!
动画是乐趣!
动画是乐趣!
动画是乐趣!
动画是乐趣!
动画是乐趣!

滑入元素

滑动在从顶部,底部,左侧或与W3-animate- *类屏幕右侧的元素:

定义
W3-动画顶 从屏幕的顶部为0px动画元素300像素 尝试一下
W3-动画底 从屏幕底部为0px动画元素300像素 尝试一下
W3-动画左 从屏幕左侧的动画元素300像素为0px 尝试一下
W3-动画右 从屏幕为0px权以动画展示元素300像素 尝试一下

淡入元素

淡出与W3-动画不透明度类的元素:

<div class="w3-animate-opacity">..</div>
试一试»

放大元素

放大的W3-动画变焦类的元素:

<div class="w3-animate-zoom">..</div>
试一试»

旋转元素

旋转任何元素360度与W3自旋类:

<div class="w3-spin">..</div>
试一试»

衰落无限

<div class="w3-animate-fading">..</div>
试一试»

所有淡出

<img class="w3-animate-top"    src="img_01.jpg">
<img class="w3-animate-zoom"   src="img_02.jpg">
<img class="w3-animate-left"   src="img_03.jpg">
<img class="w3-animate-bottom" src="img_04.jpg">
试一试»