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

最新推荐文章于 2021-06-03 03:30:51 发布

最新推荐文章于 2021-06-03 03:30:51 发布 · 349 阅读

文章标签：

#html #css #html5 #css3 #query

Html&CSS 专栏收录该内容

29 篇文章

订阅专栏

本文将指导您如何创建一个动态的HTML和CSS导航栏，包括如何使用radio按钮实现面板切换，以及如何添加平滑过渡效果以提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建一个百分百的 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 -->

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

源码下载