使用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结构性伪类选择器九种写法
Apr 18 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
h5封装下拉刷新
Aug 25 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
中国收音机工业发展史
2021/03/02 无线电
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP自定义函数实现格式化秒的方法
2016/09/14 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
微信小程序-小说阅读小程序实例(demo)
2017/01/12 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
Python通过属性手段实现只允许调用一次的示例讲解
2018/04/21 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
环境工程大学生自荐信
2013/10/21 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
庆祝教师节标语
2014/10/09 职场文书
结婚仪式主持词
2015/06/29 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL