使用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 14 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 HTML / CSS
CSS3实现可爱的小黄人动画
Jul 11 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
使用css样式设计一个简单的html登陆界面的实现
Mar 30 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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下获取客户端ip地址的函数
2010/03/15 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python函数式编程指南(四):生成器详解
2015/06/24 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
深入理解Django-Signals信号量
2019/02/19 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python函数式编程实例详解
2020/01/17 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
岗位廉洁从业承诺书
2014/03/28 职场文书
探亲假请假条
2014/04/11 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
毕业设计论文致谢词
2015/05/14 职场文书
高中信息技术教学反思
2016/02/16 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL