用css3属性写进度条

最新推荐文章于 2024-03-11 15:59:42 发布
最新推荐文章于 2024-03-11 15:59:42 发布
阅读量536 收藏 1
点赞数
分类专栏： css 文章标签： css3

1.linear-gradient基础：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .box {  
  8.             margin: 200px 0 0 200px;  
  9.             width: 200px;  
  10.             height: 200px;  
  11.             background-color: orange;  
  12.   
  13.             /*基本用法*/  
  14.             background-image: linear-gradient(red, yellow, blue, green);  
  15.             background-image: linear-gradient(rgba(255, 0, 0, .2), yellow, blue, green);  
  16.   
  17.             /*控制颜色渐变的方向  
  18.   
  19.                 to right -- 从左向右  
  20.                 to top -- 从下到上  
  21.                 to left -- 从右到左  
  22.                 to bottom --- 从上到下（默认值）  
  23.   
  24.             */  
  25.             background-image: linear-gradient(to right, red, yellow, blue, green);  
  26.             background-image: linear-gradient(to top, red, yellow, blue, green);  
  27.             background-image: linear-gradient(to left, red, yellow, blue, green);  
  28.             background-image: linear-gradient(to bottom, red, yellow, blue, green);  
  29.   
  30.   
  31.             /*0deg = to top -- 从下到上*/  
  32.             background-image: linear-gradient(0deg, red, yellow, blue, green);  
  33.             /*基于0度顺时针旋转45deg*/  
  34.             background-image: linear-gradient(45deg, red, yellow, blue, green);  
  35.             /*基于0度逆时针旋转45deg*/  
  36.             background-image: linear-gradient(-45deg, red, yellow, blue, green);  
  37.   
  38.   
  39.             /*设置过渡颜色的起始位置*/  
  40.             /*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果*/  
  41.             background-image: linear-gradient(to right, red 50px, yellow, blue, green);  
  42.             background-image: linear-gradient(to right, red 50px, yellow 50px, blue, green);  
  43.             background-image: linear-gradient(to right, red 50px, yellow 50px, yellow 100px, blue, green);  
  44.   
  45.   
  46.   
  47.         }  
  48.   
  49.         .box:hover {  
  50.   
  51.         }  
  52.     </style>  
  53. </head>  
  54. <body>  
  55.   
  56. <div class="box"></div>  
  57.   
  58. <script type="text/javascript">  
  59. </script>  
  60. </body>  
  61. </html>  

2.重复线性渐变：repeating-linear-gradient

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .box {  
  8.             margin: 200px 0 0 200px;  
  9.             width: 1200px;  
  10.             height: 200px;  
  11.             background-color: orange;  
  12.       
  13.             background-image: linear-gradient(to right  
  14.             , red 0  
  15.             , red 50px  
  16.             , yellow 50px  
  17.             , yellow 100px  
  18.             , red 100px  
  19.             , red 150px  
  20.             , yellow 150px  
  21.             , yellow 200px);  
  22.             /**与上面重复写渐变有相同的效果*/  
  23.             background-image: repeating-linear-gradient(  
  24.                     to right  
  25.                     , red 0  
  26.                     , red 50px  
  27.                     , yellow 50px  
  28.                     , yellow 100px  
  29.             );  
  30.   
  31.   
  32.   
  33.         }  
  34.   
  35.         .box:hover {  
  36.   
  37.         }  
  38.     </style>  
  39. </head>  
  40. <body>  
  41.   
  42. <div class="box"></div>  
  43.   
  44. <script type="text/javascript">  
  45. </script>  
  46. </body>  
  47. </html>  

3.记事本制作：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .box {  
  8.             margin: 0 auto;  
  9.             width: 800px;  
  10.             height: 500px;  
  11.             background-color: orange;  
  12.             border: 1px solid;  
  13.   
  14.             background-image: repeating-linear-gradient(  
  15.                      #fff 0  
  16.                     , #fff 50px  
  17.                     , #999 50px  
  18.                     , #999 51px  
  19.             );  
  20.         }  
  21.   
  22.         .box:hover {  
  23.   
  24.         }  
  25.     </style>  
  26. </head>  
  27. <body>  
  28.   
  29. <div class="box"></div>  
  30.   
  31. <script type="text/javascript">  
  32. </script>  
  33. </body>  
  34. </html>  
效果：

4.帆布背景制作：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .box {  
  8.             margin: 0 auto;  
  9.             width: 800px;  
  10.             height: 500px;  
  11.             /*background-color: orange;*/  
  12.             border: 1px solid;  
  13.   
  14.             background-image: repeating-linear-gradient(  
  15.                      rgba(255, 0, 0, .3) 0  
  16.                     ,  rgba(255, 0, 0, .3) 20px  
  17.                     , rgba(255, 255, 0, .3)  20px  
  18.                     , rgba(255, 255, 0, .3)  40px  
  19.             ), repeating-linear-gradient( to right,  
  20.                     rgba(255, 0, 0, .3) 0  
  21.                     ,  rgba(255, 0, 0, .3) 20px  
  22.                     , rgba(255, 255, 0, .3)  20px  
  23.                     , rgba(255, 255, 0, .3)  40px  
  24.             );  
  25.   
  26.   
  27.             background-image: repeating-linear-gradient(45deg,  
  28.                     rgba(255, 0, 0, .3) 0  
  29.                     ,  rgba(255, 0, 0, .3) 20px  
  30.                     , rgba(255, 255, 0, .3)  20px  
  31.                     , rgba(255, 255, 0, .3)  40px  
  32.             ), repeating-linear-gradient( -45deg,  
  33.                     rgba(255, 0, 0, .3) 0  
  34.                     ,  rgba(255, 0, 0, .3) 20px  
  35.                     , rgba(255, 255, 0, .3)  20px  
  36.                     , rgba(255, 255, 0, .3)  40px  
  37.             );  
  38.   
  39.   
  40.   
  41.         }  
  42.   
  43.         .box:hover {  
  44.   
  45.         }  
  46.     </style>  
  47. </head>  
  48. <body>  
  49.   
  50. <div class="box"></div>  
  51.   
  52. <script type="text/javascript">  
  53. </script>  
  54. </body>  
  55. </html>  

效果如下：


5.进度条效果：原理重复线性渐变，移动背景图.

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         .box {  
  8.             margin: 100px 0 0 100px;  
  9.             width: 800px;  
  10.             height: 80px;  
  11.   
  12.             /*渐变图形的大小*/  
  13.             background-image: repeating-linear-gradient(  
  14.                 45deg,  
  15.                 green 0px,  
  16.                 green 10px,  
  17.                 #fff 10px,  
  18.                 #fff 20px  
  19.             );  
  20.   
  21.             background-size: 12000px 80px;  
  22.         }  
  23.   
  24.         /*鼠标悬浮，改变背景图位置*/  
  25.         .box:hover{  
  26.             background-position: -500px 0;  
  27.             transition: 10s;  
  28.         }  
  29.   
  30.   
  31.     </style>  
  32. </head>  
  33. <body>  
  34.   
  35. <div class="box"></div>  
  36.   
  37. <script type="text/javascript">  
  38. </script>  
  39. </body>  
  40. </html>  

效果：



Djj_Alice
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯css3渐变进度条动画特效
07-24
纯css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效。
css3 clip实现圆环进度条的示例代码
01-19
CSS中有一个属性叫做clip，为修剪，剪裁之意。 clip 属性剪裁绝对定位元素。这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。 环形进度条.gif 怎么实现这样一个圆环进度条的效果呢，可以使用canvas、svg、GIF等等方式，今天我们来说下使用css3怎么来实现。 实现思路 圆环很简单，一行cssborder-radius:50%即可实现，而且没有兼容性问题，什么，你说IE，让它滚… 我们这里需要三个圆环，一个整的，两个半的。大概画了下图 这里半圆环我使用了clip进行裁剪，主要代码如下,
纯css进度条，简单美观实用。
最新发布
qq_34716929的博客
03-11 393
html：在style里给 “–precent”赋值，就能显示对应百分比。
CSS3评分分段进度条特效代码
03-20
CSS3评分分段进度条代码是一款基于js跟css3属性制作的商品点评打分五种分段进度条ui交互特效。
CSS3评分分段进度条代码
04-06
CSS3评分分段进度条代码是一款基于js跟css3属性制作的商品点评打分五种分段进度条ui交互特效。
html进度条实现原理,HTML5+CSS3从入门到精通 CSS3动画实现各种进度条详解
weixin_35907524的博客
05-30 376
本篇教程探讨了CSS3动画实现各种进度条，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。1.旋转进度条.loader-1{width: 35px;height: 35px;}/*设置loader-1的宽和高，设置border-radius，使其显示为圆形*/.loader-1i{width: 100%;height: 100%;border-radius: 5...
CSS实现动态进度条
weixin_43923808的博客
08-15 1350
目标动态进度条
css实现 进度条
weixin_41815063的博客
05-31 926
<div class="container"> <div class="progress" :style="{ width: (0.5 / item.max) * 100 + '%' }" ></div> </div> %progress { height: 3.5px; border-radius...
css实现进度条
weixin_63681863的博客
11-09 946
【代码】css实现进度条。
css实现进度条并用百分比展示进度
qq_52222760的博客
06-14 1298
前端自主展示一个进度条动画；根据后端传来的实时百分比展示进度
CSS3技巧32：CSS3制作经典进度条
九天翔龙的技术博客
01-20 1680
放假了，不想到处走亲戚。 窝在家里 coding 玩儿~ 看到一个很不错的进度条效果，很简单，但是很好看，就写写练练手。
（常用代码）CSS3 进度条效果的实现
01-30
（常用代码）CSS3 进度条效果的实现（常用代码）CSS3 进度条效果的实现
HTML5 CSS3 ： 进度条的实现实例源码
07-12
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/34825865 有问题，博客中留言
CSS3实现动态进度条
foreverling_ling的博客
08-19 5484
CSS3的线性渐变使制造动态进度条成为可能。现在就来一步一步讲解如何创建动态进度条吧。以Chrome浏览器webkit内核为例。目标： 单个矩形条背景目标进度条，背景是淡蓝色，上面平铺了一层倾斜的深蓝色条状矩形。我们可以这样写：.box{ width:200px; height:30px; background: -webkit-l
用CSS3实现动画进度条
www_tobesky_com的专栏
09-17 718
CSS3的新特性为我们实现漂亮的进度条扫清了障碍，我们可以完全不需要任何图片和简单的Javascript代码就可以构建。 一、第一个例子     效果图：     Demo地址：http://namepk.sinaapp.com/demo/progress.html。 1、  基本的HTML     HTML代码非常简单： [c-sharp] view plaincopy
HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
weixin_30559481的博客
06-26 1127
今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务，网页加载等；如果有使用html5为手机布局的，也可以用于手机中~ 效果图： 1、html结构： <div id="loadBar01" class="loadBar"&...
用css写进度条
酱子
12-20 6820
用css写进度条 我们平时写进度条一般是一个父div包裹一个子div，用js控制子div的宽度 实现进度条，我们现在可以用css简单实现进度条了。 代码如下： 在vue项目里咱们只需要控制数字就行了，非常简单方便 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
原生 css 实现进度条
逆风优雅的博客
04-07 3994
方案一：通过data控制它的样式 方案二：通过js控制进度条
CSS实现进度条和订单进度条---竖向
zyf_smile的博客
06-28 1724
之前做了一个横向订单进度条，手机访问显示很难兼容样式，下面做一个竖向的，再结合情况微调一下，方便去兼容手机。
用css3写一个环形进度条
05-26
可以使用CSS3的`transform`和`animation`属性来实现环形进度条，以下是一个示例代码： HTML代码： ```html <div class="progress-bar"></div> ``` CSS代码： ```css .progress-ring { position: relative; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值