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. php ZipArchive 压缩整个文件夹

    // Get real path for our folder $rootPath = realpath('folder-to-zip'); // Initialize archive object ...

  2. python调用tushare获取股票日线实时行情数据

    接口:daily 数据说明:交易日每天15点-16点之间.本接口是未复权行情,停牌期间不提供数据. 调取说明:基础积分每分钟内最多调取200次,每次4000条数据,相当于超过18年历史,具体请参阅本文 ...

  3. （数据科学学习手札57）用ggplotly()美化ggplot2图像

    一.简介 经常利用Python进行数据可视化的朋友一定用过或听说过plotly这样的神器,我在(数据科学学习手札43)Plotly基础内容介绍中也曾做过非常详细的介绍,其渲染出的图像以浏览器为载体,非 ...

  4. winform 窗体拖动

    winform 由于自带的界面太丑,有时候就想着去掉标题栏,自己写,自己做UI 但是发现没法拖动了,或者,有时候我们也想让整个窗体都能够随着鼠标进行拖动,来来来,看下面 #region 让窗口可以随意 ...

  5. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  6. Android studio的ERROR: Unable to resolve dependency for 错误

    同事拷贝一份工程给我,在我这里用AS编译的时候出现这个错误.按照网上很多的方法都不行,后来终于可以. 在AS中打开FILE->Setting->gradle->,在右边service ...

  7. userdel -删除使用者帐号及相关档案

    总览 SYNOPSIS userdel [-r] login 描述 userdel 命 令 修 改 系 统 帐 号 档 删 除 所 有 login 会 参 考 的 部 份 . 使 用 者 名 称 必 ...

  8. MonkeyTalk使用方法

    1.简单介绍 MonkeyTalk软件测试工具由两部分构成:MonkeyTalk IDE 和 MonkeyTalk Agents MonkeyTalk IDE是Eclipse平台的工具,工能是:对iO ...

  9. hadoop–JobTracker 相关

    JobTracker 内部使用三层表示: JobInProgress: 跟踪和监控作业运行状态的对象.每个Job分成了多个Task.并为每个Task创建一个TaskInProgress跟踪和监控其运行 ...

  10. Job 和 Cronjob 的使用

    Job负责处理任务,即仅执行一次的任务,它保证批处理任务的一个或多个Pod成功结束.而CronJob则就是在Job上加上了时间调度. Job 我们用Job这个资源对象来创建一个任务,我们定一个Job来 ...