使用CSS实现阅读进度条


Posted in HTML / CSS onFebruary 27, 2017

不用JavaScript也能实现阅读进度条

看图说话

使用CSS实现阅读进度条

直接上代码

<style>
        html,body{margin:0;}
        header{
            position: fixed;
            top:0;
            height: 125px;
            width: 100%;
            background: white;
        }
        main{
            margin-top: 128px;
        }
        @supports (height: 100vh) { 
            body{   
                background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
                background-size: 100% calc(100% - 100vh + 129px);
                background-repeat: no-repeat;
            }
            body:before{
                content:'';
                position: fixed;
                top: 128px;
                bottom: 0;
                width: 100%;
                z-index: -1;
                background: white;
            }
        }
     </style>
    <header>
        <h1>Scroll Indicator</h1>
    </header>
    <main>
        <h2>I was interested to see if I could make a scroll indicator  with just CSS.</h2>
        <p>You can! But maybe you shouldn't. This is an interesting consequence of a bunch of hacks held together with duct tape. It uses z-index hacks, gradient hacks and tricks with calc and viewport units.</p>
        <p>Having said that, hacks are not always bad. I love hacks and many of us have made quite a good living selling floats and clearfixes.</p>
        <p>The techniques used here are well supported, if not conventional. If you can read the CSS, understand how it works, and how to change it, and you think this works better for you than JavaScript, feel free to implement it. Just be aware of the z-index behaviour and possible conflict with other CSS using negative z-index.</p>
        <hr>
        <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
        <h3>Tristique Aenean Etiam Cras</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
        <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <ul>
            <li>Ullamcorper Aenean Ornare</li>
            <li>Ridiculus Lorem Malesuada Consectetur</li>
            <li>Aenean Tristique Sit Lorem Purus</li>
            <li>Vehicula Egestas Mollis Cursus Nibh</li>
        </ul>
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
        <h3>Bibendum Aenean Dapibus Tristique</h3>
        <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
        <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
        <ul>
            <li>Ullamcorper Aenean Ornare</li>
            <li>Ridiculus Lorem Malesuada Consectetur</li>
            <li>Aenean Tristique Sit Lorem Purus</li>
            <li>Vehicula Egestas Mollis Cursus Nibh</li>
        </ul>
        <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
        <h2>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</h2>
        <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
    </main>

以上所述是小编给大家介绍的使用CSS实现阅读进度条,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
Html5插件教程之添加浏览器放大镜效果的商品橱窗
Jan 07 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 #HTML / CSS
纯CSS3实现Material Design效果
Mar 09 #HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 #HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
手把手教你用纯css3实现轮播图效果实例
May 04 #HTML / CSS
使用HTML5和CSS3表单验证功能
May 05 #HTML / CSS
CSS3实现任意图片lowpoly动画效果实例
May 11 #HTML / CSS
You might like
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php实现socket推送技术的示例
2017/12/20 PHP
Js+Jq获取URL参数的集中方法示例代码
2014/05/20 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
用headjs来管理和加载js 提高网站加载速度
2016/11/29 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
js实现漂亮的星空背景
2019/11/01 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
详解Python验证码识别
2016/01/25 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python的setattr函数实例用法
2020/12/16 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
初中生个人学习的自我评价
2013/12/04 职场文书
服务生自我鉴定
2014/01/22 职场文书
借款协议书
2014/04/12 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
市场部经理岗位职责
2015/02/02 职场文书
干部外出学习心得体会
2016/01/18 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Python Django模型详解
2021/10/05 Python