纯css 应用使得网站各个模块切换 平滑过渡

阅读更多

首先创建一个百分百的 layout 然后创建各个panel layout

然后应用按钮加上平滑过渡效果 这样会使得网页更加丰富生动

 

             
    
    Serendipity
     
    
    Happiness
     
    
    Tranquillity
     
    
    Positivity
     
    
    Passion
     
    

 
        

            

            
Serendipity
            
Banksy adipisicing eiusmod banh mi sed...
        
         
        

            
        
         
        
 
    

     

 

 

 

body {
    overflow: auto;
}
.st-container > input{
    display: none;
}
@media screen and (max-width: 520px) {
    .st-panel h2 {
        font-size: 42px;
    }
     
    .st-panel p {
        width: 90%;
        left: 5%;
        margin-top: 0;
    }
     
    .st-container > a {
        font-size: 13px;
    }
}
 
@media screen and (max-width: 360px) {
    .st-container > a {
        font-size: 10px;
    }
     
    .st-deco{
        width: 120px;
        height: 120px;
        margin-left: -60px;
    }
     
    [data-icon]:after {
        font-size: 60px;
        transform: rotate(-45deg) translateY(15%);
    }
}
.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
.st-container > input,
.st-container > a {
    position: fixed;
    bottom: 0px;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}
 
.st-container > input {
    opacity: 0;
    z-index: 1000;
}
 
.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #e23a6e;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

 

 

源码 下载

 

• 
• 大小: 104.2 KB

• SmoothTransitions.zip (124.9 KB)
• 下载次数: 91

• 查看图片附件