使用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; }
- }
The End



大气响应式网络建站服务公司织梦模板
高端大气html5设计公司网站源码
织梦dede网页模板下载素材销售下载站平台(带会员中心带筛选)
财税代理公司注册代理记账网站织梦模板(带手机端)
成人高考自考在职研究生教育机构网站源码(带手机端)
高端HTML5响应式企业集团通用类网站织梦模板(自适应手机端)