使用CSS3实现的不同图片加载动画效果，支持响应式，非常适合针对瀑布流布局图片动态加载特效进行增强！
HTML代码：
- <ul class="grid effect-4" id="grid">
- <li><a href="#"><img src="images/1.jpg"></a></li>
- <li><a href="#"><img src="images/2.jpg"></a></li>
- <li><a href="#"><img src="images/3.jpg"></a></li>
- <li><a href="#"><img src="images/4.png"></a></li>
- <!-- ... -->
- </ul>
CSS3样式代码：
- /* Effect 4: fall perspective */
- .grid.effect-4 {
- perspective: 1300px;
- }
- .grid.effect-4 li {
- transform-style: preserve-3d;
- }
- .grid.effect-4 li.animate {
- transform: translateZ(400px) translateY(300px) rotateX(-90deg);
- animation: fallPerspective .8s ease-in-out forwards;
- }
- @keyframes fallPerspective {
- 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
- }
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！