用css实现的进度条效果

最新推荐文章于 2024-06-05 18:34:39 发布

看淡江湖

最新推荐文章于 2024-06-05 18:34:39 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/hhy1006894859/article/details/86495749

版权

参考地址：https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100

html：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/cssgr.css">
    <title>css写的进度条</title>
</head>
<body>
<h1>css完成的进度条效果</h1>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
<p>这是文本内容</p>
</body>
</html>

css(sass):

body {
  position: relative;
  padding: 50px;
  font-size: 24px;
  line-height: 30px;
  background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
  background-size: 100% calc(100% - 100vh + 5px);
  background-repeat: no-repeat;
  z-index: 1;
}

body::after {
  content: "";
  position: fixed;
  top: 5px;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255,255,255,1);
  z-index: -1;
  border: 1px red solid;
}

看淡江湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css实现的进度条效果

参考地址：https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100html：&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport"
复制链接

扫一扫