• Project introduction:

This project is the website of Yinyue mall, which produces page animation effects and some interactive effects. The project content is divided into: landing page - home page - Album details - details around Yingman - purchase instructions around stars. The period includes the head and bottom of the public part

• Project content:

Head: Official Weibo and wechat QR code floating above the text

Add a mouse over effect to its label in order to display the corresponding QR code.

header{
    width: 100%;
    overflow: auto;
    background-color: #222222;
    align-items: center;
    .head_1{
        display: flex;
        justify-content: space-between;
        padding-left: 50px;
        background-color: #000;
        ul{
            li{
                display: inline-block;
                width: 150px;
                // border: 1px solid gainsboro;
                text-align: center;
                line-height: 30px;
                a{
                    color: #fff;
                    &:hover{
                        color: #222222;
                    }
                }
                img{
                    width: 130px;
                    height: 130px;
                    border: 10px solid white;
                    display: none;
                    justify-content: center;
                    position: absolute;
                    margin: 0 auto;
                }
                //Add a mouse over effect to the li tag in order to display the corresponding QR code
                &:hover img{
                    display: block;
                }
                &:hover{
                    background-color: white;
                }
                &:nth-child(3):hover{
                    background-color: #222222;
                }
                &:nth-child(3):hover a{
                    color: #fd02e4;
                }
            }
        }
    }

 <div class="head_1">
            <!-- Head label -->
            <img src="./img/head/log.png" alt="">
            <ul>
                <li><a href="#"> official Weibo</a>
                    <img src="./img/head/weibo.png" alt="">
                </li>
                <li><a href="#"> follow wechat</a>
                    <img src="./img/head/weixin.jpg" alt="">
                </li>
                <li><a href="#"> shopping instructions</a></li>
            </ul>
        </div>

Problems encountered: 1. The small details when hovering over the mouse, and the font color can only be changed when placed on the text. 2. When the mouse hovers, the picture is displayed at the top of other elements to cover other elements.

Solution: if the width of the display:black element is not set, it is 100% of its parent container (consistent with the width of the parent element), unless a width is set.

Bottom: problems encountered: placement of icons

Solution: use floating for positioning, so as to store the position

 

footer{
        width: 100%;
        .foot{
            img{
                width: 100%;
                margin: 0 auto;
            }
        }
        .di{
            margin-top: 1%;
            text-align: center;
            color: #7E7E7E;
            position: relative;
            p{
                padding-top: 0.5%;
                span{
                    #left{
                        position: absolute;
                        width: 28px;
                        padding-left: 9.5%;
                    }
                }
              
            }
            #right{
                display: inline-block;
                position: absolute;
                top: 0;
                margin-left: 41.5%;
            }
        }
    }
   
}

<div class="di">
                <p>
                    <span><img src="./img/footer/culture.png" alt="" id="left"></span>
                    Copyright ( 2009 - 2016 yinyuetaicom Radio and television program production and operation license number(Beijing xuzhai No. 1891|Jingwangwen[2014]2037-287 number|Network audio visual license No. 0110413</p>
                <p>Jinggong Anbei No. 1101050204900|Beijing CP Bei 11024134-1|Beijing ICP Certificate No. 060716|Publication business license new departure jinglingzisuichao No. 130062|Value added telecom business operation license 82-20140501</p>
                <p>Food business license s card:JY11105040485363|Former business license</p>
                <span><img src="./img/footer/biaoshi.gif" alt="" id="right"></span>
            </div>

Homepage: animation effect after mouse sliding

 

 <main>
            <section>
                <div><img src="./img/index/banner/1.jpg" alt=""></div> 
                <div><img src="./img/index/banner/2.jpg" alt=""></div>
                <div><img src="./img/index/banner/3.jpg" alt=""></div>
                <div><img src="./img/index/banner/4.jpg" alt=""></div>
            </section>
        </main>

 main {
        width: 1300px;
        height: 430px;
        overflow: hidden;
        margin: -30px auto;
        
        &:hover section {
            margin-left: -3600px;
        }
        
        section {
            width: 1300px;
            height: 500px;
            display: flex;
            transition-duration: 8s;
        
                div {
                    width: 1200px;
                    height: 500px;
                    float: left;
        
                    img {
                        width: 1200px;
                        height: 500px;
                    }
                }
            }
        }

        

Problems encountered: rotation effect of pictures

Solution: since js content is not involved, the transition in css is used to realize the effect of rotation. Add hover mouse hover effect to the element to change the picture.

The home page contains animation effects, from large to small to large, using the animation effects in css3

<div class="middle1"></div>
            <ul>
                <li>
                    <a href="#">
                        <img src="./img/index/top/a/toplist_a01.jpg" alt="">
                    </a>
                    <p>Jacky Xue</p>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/index/top/a/toplist_a01.jpg" alt="">
                    </a>
                    <p>Jacky Xue</p>
                </li>
</div>

 .middle{
        width: 90%;
        margin: 0 auto;
        // padding: 0 50px;
        .middle1{
            width: 100px;
            height: 50px;
            background: url(../img/index/title.png) 0 -55px no-repeat;
            margin-bottom: 15px;
        }
        ul{
            display: flex;
            justify-content: space-between;
            li{
                a{
                    img{
                        animation: dd 2s;
                    }
                }
                p{
                    text-align: center;
                }
            
            }
            
        }
        @keyframes dd {
            0%{
                transform: scale(0);
            }
            25%{
                transform: scale(1);
            }
            80%{
                transform: scale(0.7);
            }
            100%{
                transform: scale(1);
            }
        }
        
        
    }
   

Encountered a problem: the animation effect of the picture

This time, the animation in css is used to imitate the effect of animation. The animation attributes are used to define key frames and divide 6s equally, so the animation frames are 0%, 20%, 80%, 100%. The animation effect of each frame is to reset the background picture.

Album: location of pictures and album details

Using grid mesh layout and flex responsive layout

For the detailed information of album purchase on the far right, the grid makeup layout is used for the top, middle and bottom layout, and display:flex is used to display multiple elements in rows.

        <div class="kk">
            <h3>[Exclusive sale]Zhang Wei's 2018 new album "world's finest"</h3>
            <span>Mall price</span>
            <span><strong>￥99.9</strong></span>
            <span><del>￥198</del></span>
            <hr style="margin-top: 30px ; color: #CFCFCF;">
            <p>
                <span>weight</span>
                <span>0.33kg</span>
            </p>
            <ul >
                <li >quantity</li>
                <img src="./img/goods/num.jpg" alt="" >
            </ul>
            
            <div class="xia">
                <span class="lef"></span>
                <span class="rig"></span>
                <img src="img/goods/zpbz.png" alt="">
            </div>
        </div>

.kk{
        // border: 1px solid yellow;
        // display: flex;
        // justify-content: space-around;
        h3{
            margin-bottom: 15px;
        }
        span{
            color: #A09E9C;
            &:nth-child(3){
                font-size: 20px;
                color: #DE4767;
                margin: 0 18px;
            }
        }
        p{
            margin: 30px 0;
            span{
                &:nth-child(2){
                    margin-left:50px ;
                }
            }
        }
        ul{
            display: flex;
            color: #999;
            li{
                margin-right: 50px;
            }
            img{
                width:18%;
            }
        }
        .xia{
            margin-top:100px;
            // border: 1px solid saddlebrown;
            .lef{
                display: inline-block;
                width: 200px;
                height: 60px;
                background: url(../img/goods/btns.png) 0 0 no-repeat;
            }
            .rig{
                display: inline-block;
                width: 200px;
                height: 60px;
                background: url(../img/goods/btns.png) 0 -60px no-repeat;
            }
        }
    }

Shadow diffuse surrounding: use grid mesh layout for typesetting to make its page display more beautiful.

<div class="list_content">
            <div>
                <a href="#">
                    <img src="./img/pro/1.jpg" alt="">
                    <p>Universe girl Mini Series 5< WJPLEASE?></p>
                    <span>￥50</span>
                    <span class="jj"></span>
                    <span>564515</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="./img/pro/2.jpg" alt="">
                    <p>Universe girl Mini Series 5< WJPLEASE?></p>
                    <span>￥50</span>
                    <span class="jj"></span>
                    <span>564515</span>
                </a>
            </div>
</div>

.list_content{
        margin-top: 2%;
        display: grid;
        grid-template-columns: repeat(4,270px);
        grid-template-rows: repeat(4,350px);
        column-gap: 38px;
        row-gap: 30px;
        div{
            width: 280px;
            height: 350px;
            // border: 1px solid red;
            background-color: white;
            text-align: center;
            a{
                text-decoration: none;
                color: #9E9EA1;
                img{
                    width: 100%;
                }
                P{
                    margin-bottom: 15px;
                }
                span{
                    &:nth-child(3) {
                        color: #DE586B;
                    }
                   
                }
               .jj{
                   margin: 0 13px;
                   display: inline-block;
                   width: 12px;
                   height: 9px;
                //    border: 1px solid green;
                   background-size: 1%;
                   background: url(../img/icon/ico.png) 0 -74px no-repeat;
                   &:hover{
                    background: url(../img/icon/ico.png) -13px -74px no-repeat;
                   }
               }
            }
        }
    }

III. summary:

In the imitation of the static page project of this project, part of the effect achieved by JS was imitated through CSS, which deepened the understanding and application of CSS style attributes, and learned to consult API documents.

The next step is to slowly improve your proficiency in web layout and learn more CSS style attributes.