linear-gradient(90deg,red 10%,yellow 20%,green 30%)

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #test{

                width: 600px;

                height: 200px;

                border: 1px solid;

                margin:  auto;

                /*background-image:linear-gradient(90deg,red 100px,yellow 110px) ;*/

                background-image:linear-gradient(90deg,rgba(,,,) 100px,rgba(,,,) 300px) ;

            }

        </style>

    </head>

    <body>

        <div id="test">

        </div>

    </body>

</html>

发廊灯

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            html,body{

                height: %;

                overflow: hidden;

            }

            #wrap{

                width: 40px;

                height: 300px;

                border: 1px solid;

                margin: 100px auto;

                overflow: hidden;

            }

            #wrap > .inner{

                height: 600px;

                background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div class="inner"></div>

        </div>

    </body>

    <script type="text/javascript">

        var inner = document.querySelector("#wrap > .inner");

        var flag =;

        setInterval(function(){

            flag++;

            if(flag==){

                flag=;

            }

            inner.style.marginTop = -flag+"px";

        },/)

    </script>

</html>

光斑动画

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            html,body{

                height: %;

                overflow: hidden;

                background: black;

                text-align: center;

            }

            h1{

                /*transition: 3s;*/

                margin-top: 50px;

                display: inline-block;

                color: rgba(, , ,.);

                font:bold 80px "微软雅黑";

                background: linear-gradient(120deg,rgba(,,,) 100px ,rgba(,,,) 180px ,rgba(,,,) 260px);

                background-repeat:no-repeat ;

                -webkit-background-clip: text ;

            }

            /*h1:hover{

                background-position: 500px 0;

            }*/

        </style>

    </head>

    <body>

        <h1>atguigu尚硅谷</h1>

    </body>

    <script type="text/javascript">

        var h1 = document.querySelector("h1");

        var flag =-;

        setInterval(function(){

            flag+=;

            if(flag==){

                flag=-;

            }

            h1.style.backgroundPosition = flag+"px";

        },)

    </script>

</html>

径向渐变

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #test{

                width: 400px;

                height: 300px;

                border: 1px solid;

                margin:  auto;

                background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green %,pink) ;

            }

        </style>

    </head>

    <body>

        <div id="test">

        </div>

    </body>

</html>

css----7渐变的更多相关文章

  1. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  2. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  3. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  4. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  5. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  6. CSS背景色渐变

      试了下 渐变色  ,主要确定开始位置  结束位置,以及对应的color-stop;  以下是兼容不同浏览器的代码片段       代码:<style type="text/css& ...

  7. 深入理解CSS径向渐变radial-gradient

    × 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...

  8. 深入理解CSS线性渐变linear-gradient

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  9. 纯css径向渐变(CSS3--Gradient)

    渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gra ...

  10. css 颜色渐变

    .top_nav {     width: 100%;     height: 29px;            /* 如果浏览器不支持渐变,使用图像作为背景 */     background: u ...

随机推荐

  1. Win10下安装erl和RabbitMQ踩坑【版本不兼容】

    版本不兼容 erl:otp_win64_21.0.1.exe rabbitmq:rabbitmq-server-3.8.1.exe(2019.12.06时最新版) 根据官方文档的匹配表:https:/ ...

  2. c# mvc 简洁大气官网

    后台管理 https://g.alicdn.com/idleFish-F2e/app-basic/item.html?itemid=580281597427&ut_sk=1.WCB2zfWM% ...

  3. wpf mvvm datagrid 中button绑定命令方法

    <DataGridTemplateColumn Header="设备状态" IsReadOnly="True" Width="150" ...

  4. 22-3concat

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

  5. 随笔记录 误删boot恢复 2019.8.7

    系统还原: 1. 2. 3. 4. 5.进入硬盘 6.挂载光盘,安装恢复boot 7.安装grub2 8.重建grub.cfg文件  

  6. elasticsearch 父子文档(十一)

    说明 需求 一个产品多个区域销售 每个区域有自己的价格, 方式1冗余行,a 产品分别在  area1 area2 area3区域销售 a产品就会生成3条产品数据 搜索id去重就行了,但是问题就是 聚合 ...

  7. 笔记36 Spring Web Flow——配置

    Spring Web Flow是一个Web框架,它适用于元素按规定流程运行的程序.Spring Web Flow是Spring MVC的扩展,它支持开发基于流程的应用程 序.它将流程的定义与实现流程行 ...

  8. context:component-scan报错

    文件头补上 xmlns:context=”http://www.springframework.org/schema/context” xsi:schemaLocation=”http://www.s ...

  9. scala中的闭包

    scala闭包 代码示例: package test.close_pack import scala.collection.mutable.ArrayBuffer /** * AUTHOR Guozy ...

  10. 23.包、修饰符、jar

    下面都是在记事本里面写代码 1. 包的定义格式: package 包名(全小写)  例如: package a; 注意: 1)package语句必须位于java文件的第一个语句 2.编译运行 注意: ...