`

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

阅读更多

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

 

 

源码 下载

 

  • 大小: 104.2 KB
1
0
分享到:
评论

相关推荐

    CSS Flexible Box弹性布局模块切换效果

    描述中的“CSS Flexible Box弹性布局模块切换效果”可能是指通过Flexbox实现的某种交互效果,例如卡片切换、轮播图或选项卡。这通常涉及以下技术: 1. **CSS伪类和动画:** - 使用`:hover`、`:active`、`:focus`等...

    纯css3经典tab选项卡动画特效

    2. 属性过渡(Transition):CSS3的transition属性允许我们定义元素在改变状态时的过渡效果,如颜色、透明度、位置等的平滑过渡。在Tab选项卡中,transition通常用于控制切换时的效果,比如淡入淡出或平滑移动。 3....

    纯CSS实现漂亮tab选项卡切换.zip

    - 使用`transition`属性添加平滑过渡效果,增强用户体验。 3. **伪类和状态选择器**: - `:target`伪类可以用来根据URL的哈希值显示特定的内容面板。当用户点击选项卡标题时,对应的哈希值会添加到URL中,从而...

    CSS3登录注册窗口界面滑动切换特效.zip

    在现代Web开发中,用户体验是至关重要的因素之一,而优雅的界面交互和动态效果能显著提升用户对网站的满意度。本资源"CSS3登录注册窗口界面滑动切换特效"正是针对这一需求设计的,它利用CSS3的强大功能,实现了登录...

    可作为Web组件的纯CSS切换Toggle按钮

    为了使Toggle按钮更具交互性和吸引力,我们可以添加过渡效果,让状态切换更加平滑。利用CSS的`transition`属性可以实现这一目标: ```css #toggle, .toggle-content { transition: all 0.3s ease; } ``` 此外,...

    CSS3相片左右飞入滑出切换

    【CSS3相片左右飞入滑出切换】是一种在网页设计中常见的动态图像展示技术,主要利用了CSS3的新特性来实现图片的平滑过渡和变换效果。这种轮播特效可以提升用户体验,使得网站或应用的视觉效果更加吸引人。下面我们将...

    纯CSS3动画属性按钮控制焦点图滑动切换效果

    在本文中,我们将深入探讨如何使用纯CSS3动画属性来创建一个由按钮控制的焦点图滑动切换效果。这种效果可以广泛应用于网站设计,为用户提供交互性和视觉吸引力。首先,让我们了解一下CSS3的关键概念和相关属性。 **...

    css 幻灯切换效果菜单

    这种效果可以应用于首页大图轮播、产品展示等区域,而将其应用到菜单中则可以创新性地展现网站的各个功能模块。 实现CSS幻灯切换效果菜单,主要涉及以下几个关键技术点: 1. **选择器与布局**:首先,需要使用CSS...

    CSS3卡通城市动画场景切换特效.zip

    在城市切换场景中,可能运用了过渡效果来实现场景之间的平滑过渡,提升用户体验。 4. **jQuery**: jQuery是一个广泛使用的JavaScript库,简化了JavaScript的DOM操作、事件处理、动画和Ajax交互。在这个项目中,...

    CSS3仿电影字幕文字动画切换特效

    2. **CSS3动画**:利用`@keyframes`规则,我们可以定义动画的关键帧,控制元素从一种状态平滑过渡到另一种状态。在这个特效中,可能会有`from`和`to`关键帧,以及中间的一些关键帧来实现文字的放大、缩小和模糊效果...

    js+css3曲线循环菜单滚动切换特效.zip

    CSS3的transition属性则可以用于在菜单项状态改变时平滑过渡,如大小变化、位置移动等。 **jQuery** jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。在这个案例中,jQuery...

    jquery+css3实现图片背景全屏左右图片切换效果

    当图片需要显示时,通过jQuery修改对应的类,CSS3会根据预设的过渡效果平滑地改变图片的样式。如果希望实现滑动切换效果,可以使用CSS3的`transform`属性,改变图片的`translateX`值,使其仿佛从一侧滑动到另一侧。 ...

    css3和js商城网站商品视图模式切换效果

    在这个案例中,CSS3被用来创建平滑的视觉转换,比如当用户从缩略图模式切换到列表模式时,商品图片和描述的布局会发生流畅的变化。例如,可以使用`transform`属性来改变元素的位置和大小,`transition`属性定义了这...

    HTML5 CSS3 全屏3D焦点图切换插件

    另外,`transition`属性可以设置元素在不同状态间过渡的时间和效果,使得切换过程平滑流畅。 在实际开发中,开发者可能会使用JavaScript或者jQuery来处理用户的交互事件,比如鼠标悬停或点击,触发3D焦点图的切换。...

    超酷3D立方体页面切换过渡动画jQuery插件

    2. **平滑过渡**:过渡动画流畅自然,确保用户在页面切换过程中不会感到任何卡顿,提供优质的浏览体验。 3. **自定义参数**:开发者可以根据需求调整动画的各个参数,如旋转速度、延迟时间、透明度变化等,以适应...

    JS三图横向平滑切换代码.rar

    2. 更新所有图片的CSS,改变其可见性和位置,以实现平滑过渡。这通常涉及`transition`属性和`left`或`transform`值的调整。 3. 如果设置了定时器,确保在一定时间间隔后自动执行下一次切换。 4. 添加事件监听器,...

    css3宽屏满屏焦点图切换特效touchSlider插件

    CSS3 的出现使得焦点图切换效果更加丰富和动态,提供了平滑过渡、动画效果以及触摸事件的支持。`touchSlider` 插件就是基于 CSS3 实现的一种宽屏满屏焦点图切换解决方案,它适用于现代浏览器,旨在为用户提供便捷、...

    网页模板——纯CSS3实现的炫酷checkbox复选框美化库checkboxes.css(含开关按钮美化样式).zip

    这个库特别关注开关按钮的美化样式,使得在网页应用中切换状态更为直观和吸引人。 CSS3是层叠样式表的最新版本,它引入了许多新的特性和功能,如过渡、动画、阴影、边框半径以及伪类选择器等,这些都极大地扩展了...

    js结合css3实现100种不同图片切换插件pageSwitch源码.zip

    在PageSwitch插件中,CSS3被用来实现图片切换的平滑过渡效果。 3. **图片切换效果**:PageSwitch提供了100种不同的图片切换方式,这包括但不限于淡入淡出、滑动、旋转、缩放、网格变换等多种效果。每种效果都通过...

Global site tag (gtag.js) - Google Analytics