使用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实现任意图片lowpoly动画效果实例
May 11 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5边玩边学(1)画布实现方法
Sep 21 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
HTML5标签大全
Nov 23 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
Apr 24 HTML / CSS
web前端之css水平居中代码解析
May 20 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
curl和libcurl的区别简介
2015/07/01 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
2014/07/29 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
jQuery实现本地存储
2020/12/22 jQuery
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Django 视图层(view)的使用
2018/11/09 Python
python实现一个简单的ping工具方法
2019/01/31 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
Flask-WTF表单的使用方法
2019/07/12 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
七年级地理教学反思
2014/01/26 职场文书
安全标准化汇报材料
2014/02/03 职场文书
表演方阵解说词
2014/02/08 职场文书
给孩子的新年寄语
2014/04/08 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
药店促销活动总结
2014/07/10 职场文书
英语课外活动总结
2014/08/27 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
结婚典礼主持词
2015/06/29 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
素质教育学习心得体会
2016/01/19 职场文书
剧场版《转生恶役只好拔除破灭旗标》公开最新视觉图 2023年上映
2022/04/02 日漫