首先创建一个百分百的 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); }
源码 下载
相关推荐
这是一款4种效果非常炫酷的纯CSS3页面切换过渡动画特效。该CSS3页面过渡动画使用CSS keyframes制作而成,所有的动画效果和延时都是使用CSS属性,没有任何的javascript timeout()代码。
CSS Flexible Box弹性布局模块切换效果是一款利用纯css3 Flexbox布局模块(国内很多人称为弹性布局),它是CSS3新增的一种布局模式。
css3实现平滑过渡效果
用纯CSS3技术编写的页面平滑过渡
4种纯CSS3超酷页面切换过渡动画特效
12种炫酷CSS3图片切换过渡效果
纯CSS写的TAB切换源代码,没JS。效果很棒!
首先真的非常感谢世界上有了CSS3这么个东西,它使得很多网页特效不再需要依赖javascript脚本代码,使得浏览器执行起来更加方便快捷。但有一点我们得注意,因为目前绝大多数浏览器还是比较“旧”的版本,还不支持CSS3...
此代码仅利用CSS3实现页面间的平滑过渡。来源于iMooc网老师讲解内容,由于老师没有提供源码,现Code出来与大家分享、学习和交流。 没有积分的可以来这里:https://irebel.github.io/
最近我们分享过很多款富有创意的CSS3开关切换按钮,比如这款漂亮的纯CSS3开关切换按钮动画和这款纯CSS3可爱笑脸开关切换按钮,这次我们要给大家带来的这款开关切换按钮同样也很富有创意,它是纯CSS3实现的表情样式,...
纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效
纯css3实现的tab标签切换效果
纯CSS实现的tab标签切换代码,其实是由六个html文件组成,相互切换的效果。懒人之家推荐下载
css3效果大全,html5在线测试 CSS3html5效果
纯CSS完成tab5种不同切换对应内容效果
这是一款使用纯CSS3制作的平滑过渡的渐变背景颜色示例效果。背景渐变效果分别使用CSS3圆形渐变和线性渐变来完成。
12种炫酷CSS3图片切换过渡效果CSS3多种图片切换转场显示动画效果,这实际上是一个网页焦点图特效,但这个焦点图的图片切换效果几乎不重复,每切换一次,切换的过渡转场特效都不一样,有淡入淡出渐变,有旋转渐变,有...
纯CSS实现的图片切换 效果很不错 喜欢的可以多多学习
纯css3鼠标悬停图片文字切换动画特效