css3加载图片淡入效果
生活随笔
收集整理的這篇文章主要介紹了
css3加载图片淡入效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
代碼如下:
<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"> </head> <style type="text/css">.div {position: relative;top: 20px;height: 300px;width: 200px;margin: 0 auto;/*background: blue;*/background-image: url(/home/appleyuchi/work/slide3.png);float: left;margin-left: 20px;}.div2 {position: relative;top: 30px;height: 300px;width: 200px;margin: 0 auto;/*background: red;*/background-image: url(/home/appleyuchi/work/slide2.png);float: left;margin-left: 20px;}.fadeInLeft {animation: fadeInLeft;}.fadeInDown {animation: fadeInDown;}.fadeInUp {animation: fadeInUp;}.fadeInRight {animation: fadeInRight;}.OneAnimated {animation-duration: 0.5s;animation-fill-mode: both;}.TwoAnimated {animation-duration: 1s;animation-fill-mode: both;}.ThreeAnimated {animation-duration: 1.5s;animation-fill-mode: both;}.FourAnimated {animation-duration: 2s;animation-fill-mode: both;}@keyframes fadeInDown{0% {opacity: 0;transform: translateY(-50px);}100% {opacity: 1;transform: translateY(0);}}@keyframes fadeInLeft{0% {opacity: 0;transform: translateX(-50px);}100% {opacity: 1;transform: translateX(0);}}@keyframes fadeInUp{0% {opacity: 0;transform: translateY(50px);}100% {opacity: 1;transform: translateY(0);}}@keyframes fadeInRight{0% {opacity: 0;transform: translateX(50px);}100% {opacity: 1;transform: translateX(0);}} </style> <body> </body> <div style="width:100%;height:332px;position: relative;"><div class="div fadeInRight OneAnimated"></div><div class="div fadeInRight TwoAnimated"></div><div class="div fadeInRight ThreeAnimated"></div><div class="div fadeInRight FourAnimated"></div> </div><div class="div2 fadeInRight TwoAnimated"> </div><div class="div2 fadeInUp TwoAnimated"> </div><div class="div2 fadeInDown TwoAnimated"> </div><div class="div2 fadeInLeft TwoAnimated"> </div></html>?
總結(jié)
以上是生活随笔為你收集整理的css3加载图片淡入效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django报错NameError: n
- 下一篇： Django出现UnicodeDecod