分享一款基于css3实现的途牛旅游网动画特效,这是一款基于CSS3实现的动态背景动画特效下载。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
1 | <div class = "f1" > <div class = "block" > <img class = "f1-yun1 lazy" src= "/static/imghw/default1.png" data-src= "images/yun1.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" > <img class = "f1-yun2 lazy" src= "/static/imghw/default1.png" data-src= "images/yun2.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" > <img class = "f1-yun3 lazy" src= "/static/imghw/default1.png" data-src= "images/yun3.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" > <img class = "f1-lu lazy" src= "/static/imghw/default1.png" data-src= "images/lu.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" > <img class = "f1-font lazy" src= "/static/imghw/default1.png" data-src= "images/font1.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" > <img class = "f1-san lazy" src= "/static/imghw/default1.png" data-src= "images/san.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" > <div class = "f1-show" > <a href= "#tejia" ><img class = "f1-tejia lazy" src= "/static/imghw/default1.png" data-src= "images/1.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" ></a> <a href= "#app" ><img class = "f1-app lazy" src= "/static/imghw/default1.png" data-src= "images/2.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" ></a> <a href= "#duoren" ><img class = "f1-duoren lazy" src= "/static/imghw/default1.png" data-src= "images/3.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" ></a> <a href= "#shuaka" ><img class = "f1-shuaka lazy" src= "/static/imghw/default1.png" data-src= "images/4.png" / alt= "基于css3实现的途牛旅游网动画特效_html/css_WEB-ITnose" ></a> </div> </div> </div>
|
登入後複製