线性渐变：linear-gradient
站长
· 阅读数 20
1. linear-gradient基础：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: green;
/* 基本用法 */
background-image: linear-gradient(red, yellow, green, blue);
background-image: linear-gradient(rgba(255,0,0,.2), yellow, green, blue);
/* 控制颜色渐变的方向
to right 从左到右
to left 从右到左
to buttom 从上到下
to top 从下到上
*/
background-image: linear-gradient(to right，red, yellow, green, blue);
/* 0deg = to top --从下到上 */
background-image: linear-gradient(0deg，red, yellow, green, blue);
/* 基于0度顺时针旋转45deg */
background-image: linear-gradient(45deg，red, yellow, green, blue);
/* 基于0度逆时针旋转45deg */
background-image: linear-gradient(-45deg，red, yellow, green, blue);
/* 设置过渡颜色的起始位置 */
/* 从过渡起始位置50px开始让红色和黄色之间产生渐变效果 */
background-image: linear-gradient(to right,red 50px, yellow, green, blue);
background-image: linear-gradient(to right,red 50px, yellow 50px, green, blue);
background-image: linear-gradient(to right,red 50px, yellow 50px, yellow 100px, green, blue);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
补充：
background-image 和 background-image：
多个线性渐变同时出现，效果总会被最后一个覆盖。
background 和 background-image：
background的效果不会受background-color影响；
background-color和background-image一起用时需注意blog.csdn.net/qq_44744279…
2. 重复线性渐变：repeating-linear-gradient
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: orange;
background-image: linear-gradient(to right, red 0, red 50px, yellow 50px , yellow 100px
, red 100px, red 150px, yellow 150px ,yellow 200px);
/* 具有相同的渐变效果 */
background-image: repeating-linear-gradient(to right, red 0, red 50px,yellow 50px ,yellow 100px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3. 记事本效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 500px;
background-color: orange;
border: 1px solid;
background-image: repeating-linear-gradient(#FFF 0, #FFF 50px,#999 50px ,#999 51px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
补充：
border: 1px solid； solid--边框线的类型（实线）
4. 叠加效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 800px;
height: 500px;
border: 1px solid lightsalmon;
background-image: repeating-linear-gradient(
rgba(0,128,0,.3) 0, rgba(0,128,0,.3) 20px,
rgba(255,128,0,.3) 20px,rgba(255,128,0,.3) 40px
),repeating-linear-gradient(to right,
rgba(0,128,0,.3) 0, rgba(0,128,0,.3) 20px,
rgba(255,128,0,.3) 20px,rgba(255,128,0,.3) 40px
);
background-image: repeating-linear-gradient(45deg,
rgba(0,128,0,.3) 0, rgba(0,128,0,.3) 20px,
rgba(255,128,0,.3) 20px,rgba(255,128,0,.3) 40px
),repeating-linear-gradient(-45deg,
rgba(0,128,0,.3) 0, rgba(0,128,0,.3) 20px,
rgba(255,128,0,.3) 20px,rgba(255,128,0,.3) 40px
);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5. 进度条效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 效果1 */
.box{
width: 500px;
height: 50px;
background-image: repeating-linear-gradient(-45deg, hotpink 0, hotpink 10px, white 10px, white 20px);
/* 渐变图形的大小，宽度应超过容器宽度，实现视觉移动效果 */
background-size: 800px 50px;
}
.box:hover{
background-position: -300px 0; /*这里起始位置的绝对值和容器宽度之和等于渐变图形宽度*/
transition: 8s;
}
/* 效果2 */
.box{
width: 500px;
height: 50px;
background-image: repeating-linear-gradient(-45deg, hotpink 0, hotpink 10px, white 10px, white 20px);
}
.box:hover{
width: 1000px;
transition: 5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
补充：
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property ----------规定设置过渡效果的 CSS 属性的名称
- transition-duration-----------规定完成过渡效果需要多少秒或毫秒
- transition-timing-function---规定速度效果的速度曲线
- transition-delay--------------定义过渡效果何时开始 默认值： all 0 ease 0
注：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。