欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-27 18:32:56
...

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

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

 

<div class="st-container">
             
    <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
    <a href="#st-panel-1">Serendipity</a>
     
    <input type="radio" name="radio-set" id="st-control-2"/>
    <a href="#st-panel-2">Happiness</a>
     
    <input type="radio" name="radio-set" id="st-control-3"/>
    <a href="#st-panel-3">Tranquillity</a>
     
    <input type="radio" name="radio-set" id="st-control-4"/>
    <a href="#st-panel-4">Positivity</a>
     
    <input type="radio" name="radio-set" id="st-control-5"/>
    <a href="#st-panel-5">Passion</a>
     
    <div class="st-scroll">
 
        <section class="st-panel" id="st-panel-1">
            <div class="st-deco" data-icon="H"></div>
            <h2>Serendipity</h2>
            <p>Banksy adipisicing eiusmod banh mi sed...</p>
        </section>
         
        <section class="st-panel st-color" id="st-panel-2">
            <!-- ... -->
        </section>
         
        <!-- ... st-panel-3, st-panel-4, st-panel-5 -->
 
    </div><!-- // st-scroll -->
     
</div><!-- // st-container -->

 纯css 应用使得网站各个模块切换 平滑过渡
            
    
    博客分类: Html&CSS htmlcsshtml5css3query 

 

 

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);
}

 

 

源码 下载

 

  • 纯css 应用使得网站各个模块切换 平滑过渡
            
    
    博客分类: Html&CSS htmlcsshtml5css3query 
  • 大小: 104.2 KB