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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: ;
  9.                 padding: ;
  10.             }
  11.             #test{
  12.                 width: 600px;
  13.                 height: 200px;
  14.                 border: 1px solid;
  15.                 margin:  auto;
  16.                 /*background-image:linear-gradient(90deg,red 100px,yellow 110px) ;*/
  17.                 background-image:linear-gradient(90deg,rgba(,,,) 100px,rgba(,,,) 300px) ;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div id="test">
  23.  
  24.         </div>
  25.     </body>
  26. </html>

发廊灯

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: ;
  9.                 padding: ;
  10.             }
  11.  
  12.             html,body{
  13.                 height: %;
  14.                 overflow: hidden;
  15.             }
  16.  
  17.             #wrap{
  18.                 width: 40px;
  19.                 height: 300px;
  20.                 border: 1px solid;
  21.                 margin: 100px auto;
  22.                 overflow: hidden;
  23.             }
  24.             #wrap > .inner{
  25.                 height: 600px;
  26.                 background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
  27.             }
  28.  
  29.         </style>
  30.     </head>
  31.     <body>
  32.         <div id="wrap">
  33.             <div class="inner"></div>
  34.         </div>
  35.     </body>
  36.     <script type="text/javascript">
  37.         var inner = document.querySelector("#wrap > .inner");
  38.         var flag =;
  39.  
  40.         setInterval(function(){
  41.             flag++;
  42.             if(flag==){
  43.                 flag=;
  44.             }
  45.             inner.style.marginTop = -flag+"px";
  46.         },/)
  47.  
  48.     </script>
  49. </html>

光斑动画

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: ;
  9.                 padding: ;
  10.             }
  11.  
  12.             html,body{
  13.                 height: %;
  14.                 overflow: hidden;
  15.                 background: black;
  16.                 text-align: center;
  17.             }
  18.  
  19.             h1{
  20.                 /*transition: 3s;*/
  21.                 margin-top: 50px;
  22.                 display: inline-block;
  23.                 color: rgba(, , ,.);
  24.                 font:bold 80px "微软雅黑";
  25.                 background: linear-gradient(120deg,rgba(,,,) 100px ,rgba(,,,) 180px ,rgba(,,,) 260px);
  26.                 background-repeat:no-repeat ;
  27.                 -webkit-background-clip: text ;
  28.             }
  29.  
  30.             /*h1:hover{
  31.                 background-position: 500px 0;
  32.             }*/
  33.         </style>
  34.     </head>
  35.     <body>
  36.         <h1>atguigu尚硅谷</h1>
  37.     </body>
  38.     <script type="text/javascript">
  39.         var h1 = document.querySelector("h1");
  40.         var flag =-;
  41.  
  42.         setInterval(function(){
  43.             flag+=;
  44.             if(flag==){
  45.                 flag=-;
  46.             }
  47.             h1.style.backgroundPosition = flag+"px";
  48.         },)
  49.  
  50.     </script>
  51. </html>

径向渐变

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: ;
  9.                 padding: ;
  10.             }
  11.             #test{
  12.                 width: 400px;
  13.                 height: 300px;
  14.                 border: 1px solid;
  15.                 margin:  auto;
  16.                 background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green %,pink) ;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div id="test">
  22.  
  23.         </div>
  24.     </body>
  25. </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. 【非官方方式】获取Disconf动态更新的配置文件的值

    disconf可以配置reload,当更改配置时自动刷新classpath下的配置文件.然而获取最新的值官方说明是加@DisconfFileItem注解放在属性的方法上,底层通过拦截器获取的. 但是每 ...

  2. gitnore文件修改生效方法

        本文首发于cartoon的博客     转载请注明出处:https://cartoonyu.github.io/cartoon-blog 当修改gitnore文件后,常常出现文件不生效的情况, ...

  3. 关于VS的第一次使用

    参考链接:https://blog.csdn.net/qq_36556893/article/details/88605617

  4. 47-Ubuntu-系统信息-2-df和du查看磁盘和目录空间占用

    序号 命令 作用 01 df -h disk free 显示磁盘剩余空间;-h以人性化的方式显示文件大小 02 du -h [目录名] disk usage 显示目录下的文件大小 注:显示磁盘信息的时 ...

  5. useradd -帐号建立或更新新使用者的资讯

    总览 SYNOPSIS useradd [-c comment] [-d home_dir] [-e expire_date] [-f inactive_time] [-g initial_group ...

  6. mount 挂载

    mount 挂载出现 这是咋回事.找了找度娘,说是磁盘没有格式化.好吧,mkfs ext4 /dev/sda4 ,提示 没有有效的快给格式化,好奇怪啊,昨天明明分号区了,我记错了. fdisk看一下, ...

  7. 【学术篇】luogu3768 简单的数学题（纯口胡无代码）

    真是一道"简单"的数学题呢~ 反演题, 化式子. \[ ans=\sum_{i=1}^n\sum_{j=1}^nijgcd(i,j) \\ =\sum_{i=1}^n\sum_{j ...

  8. (PASS)java中nextInt()函数

    一:获取随机数的函数: package test; import java.util.Random; /** * * @ClassName: NextIntDemo * @Description: n ...

  9. 关于元素的offsetHeight、line-htight

    最近在做一个自适应高度的加载时的瀑布效果,使用加载完毕后为其一个A容器设置style的高度的方式完成(原高度为0且超出部分裁剪),使用offsetHeight获取其子元素高度(所有子元素高度均相等), ...

  10. Java——包装类（Wrapper）

    2.7包装类(Wrapper) 基本数据类型由于不是类,不能够使用java类库里提供的大量的方法.所有在设计上,我们让每一个基本数据类型都对应一个类,同时数据存储的范围还不变.此时相当于基本数据类型就 ...