专栏首页小康的自留地前端课程——渐变

前端课程——渐变

渐变

什么是渐变

CSS渐变是CSS3的Image模块中新增的内容。利用CSS渐变替代在HTML页面中引入渐变效果的图片,这样减少HTML页面加载的时间,减小带宽的占用。 由于CSS渐变是由浏览器直接生成,在HTML页面缩放时的效果要比图片更好,使得可以更灵活、便捷地调整HTML页面布局。

线性渐变

线性渐变由一个轴(基准线)定义的,并且轴上每个点都具有独立的颜色。lincar-gradient()函数构建垂直于基准线的渐变效果,渐变的颜色取决于与之垂直相交的基准线上的色点。 基准线由包含渐变效果容器元素的中心点和一个角度来定义的。基准线上的颜色值则由不同的点来定义,包括起始点、终止点以及两者之间可选的中间点(中间点可以有多个) 起始点是基准线和容器元素的顶点与基准线垂直线的相交点来定义。 终止点是基准线和容器元素最近顶点与基准线垂直线的相交点来定义。 渐变的0度是从下到上的,增加角度会使渐变顺时针旋转。

CSS linear gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。具体语法结构如下: linear-gradient(<angle> | <S ide-or-corner>, <color-stop>, <color-stop> +) 上述语法的参数说明:

  • 第一个参数用于定义线性渐变的方向,并且定义渐变颜色的终止位置。
    • angle:通过角度来定义渐变的方向。0度表示渐变方向从下向上,90度表示渐变从左向右。其角度按照顺时针方向增加。
    • side- or corner:通过关键字定义渐变的方向。具有两个关键字,一个表示水平位置(left或right),一个表示垂直位置(top或bottom) 。关键字的先后顺序无影响,并且都是可选的。
  • 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        div{
            position: absolute;
            top: 10px;
            width: 200px;
            height: 200px;
            border: 1px solid gray;
        }
        /* 第一个基本渐变 */
        .box1{
            left: 10px;
            /* 
                第一个参数:设置渐变的方向
                第二个参数。第三个参数···设置渐变的颜色

             */
            background: linear-gradient(0,blue,red);
        }
        /* 第二个基本渐变 */
        .box2{
            left: 220px;
            background: linear-gradient(45deg,blue,red);
        }
        /* 第三个基本渐变 */
        .box3{
            left: 430px;
            background: linear-gradient(90deg,blue,red);
        }
        .box4{
            left: 640px;
            background: linear-gradient(90deg,blue,red,yellow);
        }
        /* 使用rgba设置 */
        .box5{
            left: 850px;
            background: linear-gradient(90deg,rgba(255,255,255,0),red,yellow);
        }
        .box6{
            left: 1060px;
            background: linear-gradient(90deg,rgba(255,255,255,0),red);
        }
        /* 关键字设置角度 */
        .box7{
            top: 220px;
            left: 10px;
            background: linear-gradient(to left,blue,red);
        }
        .box8{
            top: 220px;
            left: 220px;
            background: linear-gradient(to left bottom,blue,red);
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>
</html>

渐变兼容性问题(新的语法,因为老语法已废弃):

.box8{
    -webkit-background: linear-gradient(to left bottom,blue,red);
    -moz-background: linear-gradient(to left bottom,blue,red);
    -ms-background: linear-gradient(to left bottom,blue,red);
    -o-background: linear-gradient(to left bottom,blue,red);
}

头像滤镜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
        .box1{
            width: 200px;
            height: 200px;
            border-radius: 50%;
        }
        img{
            width: 200px;
            float: left;
            border-radius: 50%;
        }
        .lvjing{
            position: relative;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,rgba(255,154,158,.7),rgba(250,208,196,.7));
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/02/24/20200224111924.jpg" alt="">
        <div class="lvjing"></div>
    </div>
</body>
</html>

径向渐变

径向渐变由其中心点、边缘形状轮廓、位置以及颜色结束点定义的。

  • 径向渐变的中心点至边缘形状以及其延伸的部分是由连续缩放的若干同心轮廓组成的。
  • 颜色结束点用于设定虚拟渐变射线的变化方式,由中心点水平变化至右侧。颜色结束点由百分比设定,中心点为0%,終止点为100%。终止点为渐变射线与边缘形状相交点的渐变半径。
  • 边缘形状只能是圆形或者椭圆形。

语法radial-gradient(shape at position,clor-stop,color-stop+)

  • shape:表示设置的渐变形状,默认表示椭圆
  • position:表示设置起点的坐标值
    • 第一个值: 表示水平方向的值
    • 第二个值: 表示垂直方向的值
  • size: 表示设置渐变形状的大小
    • 圆形
      • 该值为原型的半径
    • 椭圆形
      • 值为段半径和长半径
  • color-stop:表示渐变的颜色,可以多个
    • 其后也可跟位置 例如 #212121 50% 50%

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }
        div {
            position: absolute;
            top: 10px;
            width: 400px;
            height: 200px;
            border: 1px solid gray;
        }
        .box1 {
            left: 10px;
            /* 
            
             */
            background: radial-gradient(blue,red);
        }
        /* 形状为圆形 */
        .box2 {
            left: 420px;
            background: radial-gradient(circle,blue,red);
        }
        .box3 {
            left: 830px;
            background: radial-gradient(ellipse,blue,red);
        }
        .box4{
            top: 220px;
            left: 10px;
            background: radial-gradient(ellipse at 0%,blue,red);
        }
        .box5{
            top: 220px;
            left: 420px;
            background: radial-gradient(ellipse at 50%,blue,red);
        }
        .box6{
            top: 220px;
            left: 830px;
            background: radial-gradient(ellipse at 100%,blue,red);
        }
        .box7{
            top: 430px;
            left: 10px;
            background: radial-gradient(ellipse at 50% 0%,blue,red);
        }
        .box8{
            top: 430px;
            left: 420px;
            background: radial-gradient(circle 215px at 50%,blue,red);
        }
        .box9{
            top: 830px;
            left: 420px;
            background: radial-gradient(ellipse 200px at 100%,blue,red);
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    <div class="box7"></div>
    <div class="box8"></div>
</body>

</html>

小球案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid gray;
            background: radial-gradient(circle at 25% 25%,#DFFFDF,#00DB00,#28ff28);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

重复渐变

repeating-linear-gradient() 函数和 repeating-radial-gradient() 函数来实现重复的渐变效果.

重复线性渐变

repeating-linear-gradient(<angle> | <side-or-corner>, <color-stop>, <color-stop> +)

  • 第一个参数用于定义线性渐变的方向,并且定义渐变颜色的终止位置。
    • auangle:通过角度来定义渐变的方向。0度表示渐变方向从下向上,90度表示渐变从左向右。其角度按照顺时针方向增加。
      • side-or-corner:通过关键字定义渐变的方向。具有两个关键字,一个表示水平位置(left或right),一个表示垂直位置(top或bottom)。关键字的先后顺序无影响,并且都是可选的。
  • 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点。
/* 一个由下至上的重复线性渐变,
   从蓝色开始,40%后变绿,
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

重复渐变须在颜色后边设置起始位置,否则与线性渐变相同。

重复径向渐变

repeating-radial-gradient([ [ <shape> ] || <extent-keyword> ] [ at <position> ]?)

上述语法的参数说明:

  • shape:用于定义径向渐变的形状,包含circle(圆形)和ellipse(椭圆形)。
  • extent-keyword:用于定义径向渐变的边缘形状的位置。
  • position:用于定义径向渐变的中心点位置。
  • color-stop:用于定义径向渐变的颜色终止点。

与重复线性渐变相似,需加上位置。也就是颜色后加上结束位置。

/* 一个由下至上的重复线性渐变,
   从蓝色开始,40%后变绿,
   最后渐变到红色 */
repeating-linear-gradient(0deg, blue, green 40%, red);

利用重复渐变实现唱片效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>重复径向渐变实现唱片效果</title>
    <style>
        .radial-gradient {
            position: relative;
            width: 262px; 
            height: 262px;
            border-radius: 50%;
            background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
            background-size: 50% 100%, 100% 50%, 100% 100%;
        }
        .radial-gradient::after {
            position: absolute;
            top: 50%; 
            left: 50%;
            margin: -35px;
            border: solid 1px #d9a388;
            width: 68px; height: 68px;
            border-radius: 50%;
            box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
            background: #b5ac9a;
            content: '';
        }
    </style>
</head>
<body>
    <div class="radial-gradient"></div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 三、jQuery属性操作

    2、如何操作属性 对象.属性名称 = 值 对象.属性名称 对象[‘属性名称’] = 值 对象[‘属性名称’] Javascript

    Dreamy.TZK
  • Hexo博客之butterfly主题优雅魔改系列(持续更新)

    相信在这之前,大家肯定看过网上的各种魔改教程。但是这些魔改教程基本上千篇一律,都是一种方式,大量修改模板(主题源文件)。这种方式的好处就是简单快速且直接,缺点就...

    Dreamy.TZK
  • 前端课程——布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta...

    Dreamy.TZK
  • Thymeleaf使用技巧:使用片段(fragment)实现母版页(Layout)功能

    网站中往往有通用的布局,比如导航、底部等等,这些页面中共用的部分,就需要放在母版页(Layout)里面。 这样每个页面只用关注本页面要完成的功能/内容即可。提高...

    KenTalk
  • python爬虫学习 爬取幽默笑话网站

    这篇文章主要介绍了python爬虫爬取幽默笑话网站,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    python学习教程
  • Python数据驱动深入实践(一)

    在做自动化测试特别是接口测试的过程中,我们经常碰到这样的例子,几个用例步骤,操作完全一样,仅仅是数据和结果不一样。常规的做法是每套数据写一个测试用例。

    iTesting
  • JVM初探 -JVM内存模型

    Tanyboye
  • PHP将数据导出Excel表中(投机型)

      因为ms word和excel的文档都支持html文本格式,因此我们可以基于这个原理采用html文本格式进行数据的输出。

    那一叶随风
  • 腾讯云发布企业级微服务中间件TSF,助企业构建亿级互联网应用架构

    1月22日,腾讯云正式发布微服务中间件TSF(Tencent Service Framework)。这个围绕应用和微服务的 PaaS 平台,将为企业解决IT系统...

    腾讯云中间件团队
  • Java-再议printf函数

    System.out.printf() 是在JDK1.5版开始引入的方法,即在JDK1.5以后的版本才可以使用此函数,printf 方法有 printf(Str...

    老九学堂-小师弟

扫码关注云+社区

领取腾讯云代金券