html前端开发--------线性渐变gradient

郭雨婷01

已于 2022-05-04 17:36:03 修改

阅读量221

点赞数 1

文章标签： javascript 前端 html css

于 2022-04-27 20:50:10 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51272779/article/details/124459979

版权

本文介绍了HTML前端开发中的线性渐变使用，通过两个实例展示了如何创建背景颜色的线性渐变效果。案例一演示了基本的线性渐变应用，而案例二则涉及滚动效果，利用CSS的`mask-image`属性实现内容滑动时的遮罩变化，同时配合`background-image`和`background-position`实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html前端开发--------线性渐变gradient

一、思维导图

二、实例练习

1案例一

2.案例二

下面案例可供参考

一、思维导图

二、实例练习

案例一

代码如下（示例）：

.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%);

        }