网页特效练习(1)

1.手风琴相册

elong.jpg

知识点1：a标签的伪类选择器

:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式

知识点2：过渡三要素

1.1必须要有属性发生变化
1.2必须告诉系统哪个属性需要执行过渡效果
1.3必须告诉系统过渡效果持续时长

原理

利用动画效果修改鼠标悬停在a标签上状态下的样式
鼠标未悬停a标签时：单个li标签的宽度=ul总宽度/li标签个数
鼠标悬停a标签时：悬停li标签的宽度=图片的宽度
鼠标悬停a标签时：未悬停li标签的宽度=(ul总宽度-图片的宽度)/(li标签个数-1)

网页布局

特点

1.li标签包裹了一个遮罩层，增加了动画效果
2.分别给li标签增加了标题和描述，增加可访问性
3.通过背景图片定位实现图片居中

        

            

                

                    
                        

                            
园林酒店
                        

                        
有谁不爱泡温泉？浸入雾气蒸腾的泉水之中，把身体泡成一片茶叶，舒展轻盈。有比这更美妙的感觉吗？
                    
                
                

                    
                        

                            
情侣酒店
                        

                        
浪漫，是香闺围笼里的暧昧，是灯火迷离，泪眼婆裟的唯美，是杨柳岸、晓风残月中的无语凝噎……
                    
                
                

                    
                        

                            
设计师酒店
                        

                        
前卫的酒店设计理念，独具魅力的风格，优美的自然风光才能有这样顶级的酒店。
                    
                
                

                    
                        

                            
青年旅舍
                        

                        
我为你煮一杯温茶，斟一杯美酒。让我们席地而坐，听你的梦想。用你的只言片语装点我们的梦想博物馆。
                    
                
                

                    
                        

                            
特色客栈
                        

                        
在这里，你可以静静发呆，而不被人打扰，只用细细品味它的美好；在这里，你能看见最美好的星星，能让你找到最深的感动。
                    
                
                

                    
                        

                            
海岛酒店
                        

                        
不想过冬，厌倦沉重，就飞去热带的岛屿游泳，卸下包袱，放下压力，让自己的身与心，在这碧海蓝天之中，享受一次超自然的洗礼。
                    
                
                

                    
                        

                            
海外温泉
                        

                        
因地形地质的区别，世界各地的温泉也千差万别，选择一处适合自己的温泉，5分钟后，你会忘记自己，20分钟后，你会忘记世界。
                    
                
            
        
    

CSS样式

    /*=============================  Reset start ====================================*/

    *{
        margin: 0;
        padding: 0;
    }

    body {
        font-size: 12px;
        font-family: arial, Verdana, Geneva, Helvetica;
        color: #555;
        line-height: 20px;   
    }

    ul {
        list-style: none;
    }

    /*=============================  Reset end ====================================*/
    .mb20 {
        margin-bottom: 20px;
    }

    .mt20 {
        margin-top: 20px;
    }

    /*fold*/
    .fold_wrap {
        width: 1120px;
        overflow: hidden;
        margin: 0 auto;
    }

    .fold_wrap ul {
        width: 1120px;
        height: 260px;
        margin: 0 auto;
        overflow: hidden;
    }

    .fold_wrap ul li {
        float: left;
        width: 160px;
        height: 260px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.5s;
    }

    .fold_wrap ul li .mask_b {
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .3);
    }
    
    .fold_wrap ul:hover li{
        width: 120px;
    }
    .fold_wrap ul li:hover{
        width: 400px;
    }
    .fold_wrap ul:hover .mask_b{
        display: block;
    }
    .fold_wrap ul li:hover .mask_b{
        display: none;
    }
 
    .fold_wrap ul li .mask_b h4 {
        color: #fff;
        width: 30px;
        margin: 0 auto;
        display: block;
        font: 30px/30px Microsoft Yahei;
        position: relative;
        padding: 30px 0 0 0;
    }

    .fold_wrap ul li .adv_intro {
        width: 92%;
        height: 40px;
        padding: 5px 4%;
        position: absolute;
        left: 0;
        bottom: -50px;
        background: #37D;
        color: #FFF;
        overflow: hidden;
    }

    .pic_auto {
        width: 100%;
        height: 100%;
    }

    .pic_auto1 {
        background: url(images/20150422_ifold1.jpg) no-repeat center 0;
    }

    .pic_auto2 {
        background: url(images/20150120_ifold2.jpg) no-repeat center 0;
    }

    .pic_auto3 {
        background: url(images/20150120_ifold3.jpg) no-repeat center 0;
    }

    .pic_auto4 {
        background: url(images/20150120_ifold4.jpg) no-repeat center 0;
    }

    .pic_auto5 {
        background: url(images/20150120_ifold5.jpg) no-repeat center 0;
    }

    .pic_auto6 {
        background: url(images/20150120_ifold6.jpg) no-repeat center 0;
    }

    .pic_auto7 {
        background: url(images/20150120_ifold7.jpg) no-repeat center 0;
    }

用JS实现

---

2.星星海

3.照片墙

照片墙.png

4.天猫弹性导航

天猫弹性导航.png

    
    
    



    
    

        
双11狂欢
        
服装会场
        
数码家电
        
家具建材
        
母婴童装
        
手机会场
        
美妆会场
        
进口会场
        
飞猪旅行
    

5.放大镜效果

6.进度条

    
    
    


    

        

            

            
        
        
0%
    

7.商品展示

商品展示.png