html前端开发--------线性渐变gradient
下面案例可供参考
一、思维导图
二、实例练习
案例一
代码如下(示例):
.ch{
width: 500px;
height: 300px;
background-image: -webkit-radial-gradient(center bottom,
transparent 30%,
rgb(210, 59, 210),
deepskyblue,
cyan,
greenyellow,
gold,
orange,
red,
transparent 50%);
}
2.案例二
有滚动效果
代码如下(示例):
.yy{
width: 384px;
height: 216px;
background-size: cover;
transition: 3s;
-webkit-mask-image: -webkit-linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
mask-image: linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
background-image: url(https://img0.baidu.com/it/u=421509740,1039018737&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
}
.yy:hover{
background-position:384px 0;
}
.bg{
width: 384px;
height: 216px;
background-image: -webkit-linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
background-image: linear-gradient(left, white 20%, transparent 20%, transparent 40%, white 40%, white 60%, transparent 60%, transparent 80%, white 80%);
}