精华内容
下载资源
问答
  • // 炫酷渐变色背景粒子线条折线连接canvas动画 export const canvas = (val) => { var requestAnimationFrame = window.requestAnimationFrame || function (callback) { window.setTimeout(callback, ...

    博客地址:http://www.globm.top/blog/1/detail/34
    效果图:
    在这里插入图片描述
    1.新建canvas.js

    
    // 炫酷渐变色背景粒子线条折线连接canvas动画
    export const canvas = (val) => {
      var requestAnimationFrame = window.requestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60)
      }
    
      // var canvas = document.getElementsByTagName("canvas")[0];
      let canvas = val
      let ctx = canvas.getContext('2d')
      let maximumPossibleDistance
      let mousePositionX
      let mousePositionY
      let mouseElement
      let lines = 0
      let objects = []
      var initAnimation = function () {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        maximumPossibleDistance = Math.round(Math.sqrt((canvas.width * canvas.width) + (canvas.height * canvas.height)))
        Math.floor(canvas.width / 2)
        Math.floor(canvas.height / 2)
        objects.length = 0
        clearCanvas()
        createParticles()
      }
      window.addEventListener('resize', function () { initAnimation() }, false)
      // 线条参数配置
      var options = {
        // 初始线条数量
        particlesNumber: 80,
        // 圆点大小
        initialSize: 3,
        moveLimit: 50,
        durationMin: 50,
        durationMax: 300,
        drawConnections: true,
        mouseInteractionDistance: 150,
        mouseGravity: true,
        drawMouseConnections: true,
        // 图标色彩
        red: 25,
        green: 200,
        blue: 255,
        opacity: 1,
        // 已连接线条
        connectionRed: 255,
        connectionGreen: 255,
        connectionBlue: 255,
        connectionOpacity: 0.2,
        // 鼠标移动线条
        mouseConnectionRed: 255,
        mouseConnectionGreen: 255,
        mouseConnectionBlue: 255,
        mouseConnectionOpacity: 0.2
    
      }
      var getRandomBetween = function (a, b) {
        return Math.floor(Math.random() * b) + a
      }
      var getDistance = function (element1, element2) {
        var difX = Math.round(Math.abs(element1.positionX - element2.positionX))
        var difY = Math.round(Math.abs(element1.positionY - element2.positionY))
    
        return Math.round(Math.sqrt((difX * difX) + (difY * difY)))
      }
      function Particle (positionX, positionY, size, red, green, blue, opacity) {
        this.positionX = positionX
        this.positionY = positionY
        this.size = size
    
        this.duration = getRandomBetween(options.durationMin, options.durationMax)
        this.limit = options.moveLimit
        this.timer = 0
    
        this.red = red
        this.green = green
        this.blue = blue
        this.opacity = opacity
    
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      function MouseParticle (positionX, positionY, size, red, green, blue, opacity) {
        this.positionX = mousePositionX
        this.positionY = mousePositionY
        this.size = size
    
        this.red = red
        this.green = green
        this.blue = blue
        this.opacity = opacity
    
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      Particle.prototype.animateTo = function (newX, newY) {
        var duration = this.duration
    
        var animatePosition = function (newPosition, currentPosition) {
          if (newPosition > currentPosition) {
            var step = (newPosition - currentPosition) / duration
            newPosition = currentPosition + step
          } else {
            step = (currentPosition - newPosition) / duration
            newPosition = currentPosition - step
          }
    
          return newPosition
        }
    
        this.positionX = animatePosition(newX, this.positionX)
        this.positionY = animatePosition(newY, this.positionY)
    
        // generate new vector
    
        if (this.timer === this.duration) {
          this.calculateVector()
          this.timer = 0
        } else {
          this.timer++
        }
      }
      Particle.prototype.updateColor = function () {
        this.color = 'rgba(' + this.red + ',' + this.green + ',' + this.blue + ',+' + this.opacity + ')'
      }
      Particle.prototype.calculateVector = function () {
        var distance
        var newPosition = {}
        var particle = this
    
        var getCoordinates = function () {
          newPosition.positionX = getRandomBetween(0, window.innerWidth)
          newPosition.positionY = getRandomBetween(0, window.innerHeight)
    
          distance = getDistance(particle, newPosition)
        }
    
        // eslint-disable-next-line no-unmodified-loop-condition
        while ((typeof distance === 'undefined') || (distance > this.limit)) {
          getCoordinates()
        }
    
        this.vectorX = newPosition.positionX
        this.vectorY = newPosition.positionY
      }
      Particle.prototype.testInteraction = function () {
        if (!options.drawConnections) return
        var closestElement
        var distanceToClosestElement = maximumPossibleDistance
        for (var x = 0; x < objects.length; x++) {
          var testedObject = objects[x]
          var distance = getDistance(this, testedObject)
          if ((distance < distanceToClosestElement) && (testedObject !== this)) {
            distanceToClosestElement = distance
            closestElement = testedObject
          }
        }
        if (closestElement) {
          ctx.beginPath()
          ctx.moveTo(this.positionX + this.size / 2, this.positionY + this.size / 2)
          ctx.lineTo(closestElement.positionX + closestElement.size * 0.5, closestElement.positionY + closestElement.size * 0.5)
          ctx.strokeStyle = 'rgba(' + options.connectionRed + ',' + options.connectionGreen + ',' + options.connectionBlue + ',' + options.connectionOpacity + ')'
          ctx.stroke()
          lines++
        }
      }
      MouseParticle.prototype.testInteraction = function () {
        if (options.mouseInteractionDistance === 0) return
    
        var closestElements = []
        // var distanceToClosestElement = maximumPossibleDistance;
    
        for (var x = 0; x < objects.length; x++) {
          var testedObject = objects[x]
          var distance = getDistance(this, testedObject)
    
          if ((distance < options.mouseInteractionDistance) && (testedObject !== this)) {
            closestElements.push(objects[x])
          }
        }
    
        for (var i = 0; i < closestElements.length; i++) {
          if (options.drawMouseConnections) {
            var element = closestElements[i]
            ctx.beginPath()
            ctx.moveTo(this.positionX, this.positionY)
            ctx.lineTo(element.positionX + element.size * 0.5, element.positionY + element.size * 0.5)
            ctx.strokeStyle = 'rgba(' + options.mouseConnectionRed + ',' + options.mouseConnectionGreen + ',' + options.mouseConnectionBlue + ',' + options.mouseConnectionOpacity + ')'
            ctx.stroke()
            lines++
          }
          if (options.mouseGravity) {
            closestElements[i].vectorX = this.positionX
            closestElements[i].vectorY = this.positionY
          }
        }
      }
      Particle.prototype.updateAnimation = function () {
        this.animateTo(this.vectorX, this.vectorY)
        this.testInteraction()
        ctx.fillStyle = this.color
        ctx.fillRect(this.positionX, this.positionY, this.size, this.size)
      }
      MouseParticle.prototype.updateAnimation = function () {
        this.positionX = mousePositionX
        this.positionY = mousePositionY
        this.testInteraction()
      }
      var createParticles = function () {
        // create mouse particle
        mouseElement = new MouseParticle(0, 0, options.initialSize, 255, 255, 255)
        for (var x = 0; x < options.particlesNumber; x++) {
          var randomX = Math.floor((Math.random() * window.innerWidth) + 1)
          var randomY = Math.floor((Math.random() * window.innerHeight) + 1)
          var particle = new Particle(randomX, randomY, options.initialSize, options.red, options.green, options.blue, options.opacity)
          particle.calculateVector()
          objects.push(particle)
        }
      }
      var updatePosition = function () {
        for (var x = 0; x < objects.length; x++) {
          objects[x].updateAnimation()
        }
        // handle mouse
        mouseElement.updateAnimation()
      }
      window.onmousemove = function (e) {
        mousePositionX = e.clientX
        mousePositionY = e.clientY
      }
      var clearCanvas = function () {
        ctx.clearRect(0, 0, window.innerWidth, window.innerHeight)
      }
      var lastCalledTime
      var fps
      var averageFps
      var averageFpsTemp = 0
      var averageFpsCounter = 0
    
      function requestFps () {
        if (!lastCalledTime) {
          lastCalledTime = Date.now()
          fps = 0
          return
        }
        var delta = (new Date().getTime() - lastCalledTime) / 1000
        lastCalledTime = Date.now()
        fps = Math.floor(1 / delta)
    
        averageFpsTemp = averageFpsTemp + fps
        averageFpsCounter++
        if (averageFpsCounter === 5) {
          averageFps = Math.floor(averageFpsTemp / 5)
          averageFpsCounter = 0
          averageFpsTemp = 0
        }
        if (!averageFps) {
    
        } else if (averageFps < 10) {
    
        }
      }
      var loop = function () {
        clearCanvas()
        updatePosition()
        ctx.fillStyle = '#fff'
        // ctx.fillText("FPS: " + fps + " lines: " + lines + " Average FPS: " + averageFps , 10, 20);
        lines = 0
        requestAnimationFrame(loop)
        requestFps()
      }
      initAnimation()
      loop()
      return lines
    }
    
    

    2.引入canvas.js,实现效果

    <template>
      <div class="canvas-page">
        <canvas></canvas>
      </div>
    </template>
    <script>
    import { canvas } from '../plugins/canvas'
    export default {
      name: 'CanvasPage',
      mounted () {
        canvas(document.getElementsByTagName('canvas')[0])
      }
    }
    </script>
    <style lang="less" scoped>
    .canvas-page {
      height: 100vh;
      width: 100vw;
      background-size: cover;
      position: relative;
      background-color: #474747;
      background-image: radial-gradient(circle at 2% 60%, #27278f, transparent 100%),
        radial-gradient(circle at 98% 70%, #000c91, transparent 100%),
        radial-gradient(circle at 50% 50%, #ed68ed, transparent 100%);
      canvas {
        position: absolute;
        left: 0;
        top: 0;
        background: transparent;
        z-index: 15;
      }
    }
    </style>
    
    

    附:canvas速查表 http://canvas.migong.org/html5-canvas

    展开全文
  • 渐变:线性渐变、径向渐变

    千次阅读 2017-10-18 13:18:37
    渐变:CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 分为线性渐变(linear-gradient)、径向渐变(radial-gradient) 线性渐变(linear-gradient): 为了创建一个线性渐变,必须至少...

    渐变:

    CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
    分为线性渐变(linear-gradient)、径向渐变(radial-gradient)

    线性渐变(linear-gradient):

    为了创建一个线性渐变,必须至少定义两种颜色。这个颜色就是你想呈现的平稳过渡的颜色,同时也可以设置一个起点和一个方向(或一个角度)。
    语法:background:linear-gradient(direction,color1,color2……)
    1、线性渐变—从上到下(默认情况下)
    下面的实例演示了从顶部开始的线性渐变。起点是热粉色,慢慢过渡到深天蓝:
    注:适配所有浏览器,需要加各大浏览器的前缀。下同,不会再赘述。
    div{
    background:linear-gradient(hotpink,deepskyblue);/标准的语法/
    background:-webkit-linear-gradient(hotpink,deepskyblue);/谷歌,Safari/
    background:-o-linear-gradient(hotpink,deepskyblue);/Opera/
    background:-moz-linear-gradient(hotpink,deepskyblue);/Firefox/background:-ms-linear-gradient(hotpink,deepskyblue);/IE/
    }
    效果如下图:
    这里写图片描述


    2、线性渐变—从右到左
    下面的实例演示了从右边开始的线性渐变。起点是红色,慢慢过渡到粉色,再到天蓝色:
    div{
    background:linear-gradient(to left,red,pink,shyblue);/*–
    webkit前缀的浏览器要注意一下,假如默认情况下是to left,
    如果想要达到相同的效果,这里需要写right,否则渐变方向相反
    下面的其他效果也是一样,请多加注意!!!
    –*/
    background:-webkit-linear-gradient(right,red,pink,shyblue);
    background:-o-linear-gradient(left,red,pink,shyblue);
    background:-moz-linear-gradient(left,red,pink,shyblue);background:-ms-linear-gradient(left,red,pink,shyblue);
    }
    另外需要注意的是:默认写法方向需要加to,而加浏览器前缀后,不需要加to
    效果图如下:
    这里写图片描述


    3、线性渐变—对角/角度
    3.1对角,你可以通过指定水平和垂直的起始位置来制作一个对角渐变。下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到粉色,再到天蓝色:div{
    background:linear-gradient(to right bottom,red,pink,skyblue);background:-webkit-linear-gradient(left top,red,pink,skyblue);/这里右下对应左上/background:-o-linear-gradient(right bottom,red,pink,skyblue);background:-moz-linear-gradient(right bottom,red,pink,skyblue);background:-ms-linear-gradient(right bottom,red,pink,skyblue);

    }
    效果图如下:
    这里写图片描述

    3.2角度,使用角度可以达到同样的效果:
    角度:正值逆时针,赋值顺时针
    div{
    background:linear-gradient(45deg,red,pink,skyblue);
    background:-webkit-linear-gradient(45deg,red,pink,skyblue);/角度不用相对/
    background:-o-linear-gradient(45deg,red,pink,skyblue);
    background:-moz-linear-gradient(45deg,red,pink,skyblue);
    background:-ms-linear-gradient(45deg,red,pink,skyblue);
    }
    给了一个45deg,就和上面那个从左上到右下的效果一样,当然了,角度可以随意调整,这里只是为了说明这两个可以达到同样的效果。
    效果图如下:
    这里写图片描述


    4、线性渐变—平铺/重复
    repeating-linear-gradient() 函数用于重复线性渐变:
    取值单位可以是px也可以使百分比
    注:平铺/重复的角度webkit和默认写法也有一些区别:默认写法的0deg是从上到下的,但是webkit的需要旋转90deg才是
    下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到粉色,再到天蓝色:
    div{
    background:repeating-linear-gradient(0deg,pink20px,skyblue40px);
    background:-webkit-repeating-linear-gradient(90deg,pink20px,skyblue40px);
    background:-o-repeating-linear-gradient(0deg,pink20px,skyblue40px);
    background:-moz-repeating-linear-gradient(0deg,pink20px,skyblue40px);
    background:-ms-repeating-linear-gradient(0deg,pink 20px,skyblue 40px);
    }
    注:这个平铺个数的算法是(div的总高度/40-20)
    我这里div的高度是200px,所以平铺的个数为200/20=10个
    效果图如下:
    这里写图片描述


    5、线性渐变—控制渐变的区域范围
    下面的实例演示了从80px开始到120px的线性渐变,渐变区域是120-80=40px,这里用了颜色明显的红色和蓝色,以突出渐变的那40px:
    div{
    background:linear-gradient(red 80px,blue120px);
    background:-webkit-linear-gradient(red 80px,blue120px);
    background:-o-linear-gradient(red80px,blue120px);
    background:-moz-linear-gradient(red80px,blue120px);
    background:-ms-linear-gradient(red 80px,blue 120px);
    }
    效果图如下:
    这里写图片描述


    6、线性渐变—透明度的使用
    CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。
    为了添加透明度,我们使用 rgba() 函数来定义颜色结点。
    rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
    下面的实例演示了从左边开始的线性渐变。起点是完全透明,慢慢过渡到完全不透明的红色:
    div{
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -ms-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    }
    效果图如下:
    这里写图片描述


    范例:
    用线性渐变写绿草的范例:.item11{
    width:900px;height:50px;background-image:linear-gradient(45deg,blue40px,transparent40px);/跟背景图设置似的/background-size:30px50px;
    }
    效果图如下:
    这里写图片描述



    径向渐变(radial-gradient)

    径向渐变由它的中心定义。
    为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。
    同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。
    默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
    不能指定角度,可以给方向
    1、径向渐变—默认、渐变中心、渐变大小
    下面的实例演示了从中心开始的径向渐变。起点是黑色,终点是红色:
    div{
    background: radial-gradient(black,red);
    background: -webkit-radial-gradient(black,red);
    background: -o-radial-gradient(black,red);
    background: -moz-radial-gradient(black,red);
    background: -ms-radial-gradient(black,red);
    }
    添加了px区域的
    div{
    background: radial-gradient(black 100px,red 100px);
    background: -webkit-radial-gradient(black 100px,red 100px);
    background: -o-radial-gradient(black 100px,red 100px);
    background: -moz-radial-gradient(black 100px,red 100px);
    background: -ms-radial-gradient(black 100px,red 100px);
    }
    改变了渐变方向的:
    div{
    background: radial-gradient(right,black 100px,red 100px);
    background: -webkit-radial-gradient(right,black 100px,red 100px);
    background: -webkit-radial-gradient(right,black 100px,red 100px);
    background: -webkit-radial-gradient(right,black 100px,red 100px);
    background: -webkit-radial-gradient(right,black 100px,red 100px);
    }
    效果图如下:
    这里写图片描述

    添加了px的:
    这里写图片描述
    改变了渐变方向的:
    这里写图片描述


    2、径向渐变—平铺
    原理与线性渐变平铺一样,不再赘述。
    下面的实例演示了从中心开始的径向渐变。起点是黑色,重点是红色,然后平铺渐变区域:
    div{
    background: repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black 50px,red 70px);
    }
    效果图如下:有点像玫瑰花哦,哈哈哈~
    这里写图片描述


    3.径向渐变—渐变形状/重复
    如果是长方形就拉伸为椭圆,想让显示为圆形的话,可以加一个circle在red前面(circle圆形,ellipse默认,椭圆),这时候方向写在最前面。
    上面的例子是在正方形(200*200)里的模样,默认为圆形,在长方形(400*200)里就是椭圆形
    div{
    width:400px;
    background: repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(black50px,red70px);
    background: -webkit-repeating-radial-gradient(black50px,red70px);
    }
    效果图如下:
    这里写图片描述
    加上圆形circle就可以变成圆形:
    div{
    width:400px;
    background: repeating-radial-gradient(circle,black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
    background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px);
    }
    效果图如下:
    这里写图片描述
    径向渐变可以和线性渐变混合使用:
    div{
    width: 400px;
    background: -webkit-repeating-radial-gradient(circle,black 50px,red 70px),-webkit-repeating-linear-gradient(green 60px,purple 70px);
    background-blend-mode:exclusion;
    }
    /这里只写webkit前缀的,其他浏览器也可以同样使用/
    效果图如下:
    这里写图片描述

    展开全文
  • CSS 渐变

    千次阅读 2021-03-20 08:48:07
    CSS 渐变CSS 渐变CSS 线性渐变语法线性渐变 - 从上到下(默认)实例线性渐变 - 从左到右实例线性渐变 - 对角线实例使用角度语法实例使用多个色标实例实例使用透明度实例重复线性渐变实例CSS 径向渐变语法径向渐变-...


    CSS 渐变

    CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。

    CSS 定义了两种渐变类型:

    • 线性渐变(向下/向上/向左/向右/对角线)
    • 径向渐变(由其中心定义)

    CSS 线性渐变

    如需创建线性渐变,您必须定义至少两个色标。色标是您要呈现平滑过渡的颜色。您还可以设置起点和方向(或角度)以及渐变效果。

    语法

    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
    
    线性渐变 - 从上到下(默认)

    下面的例子显示了从顶部开始的线性渐变。它从红色开始,过渡到黄色:
    在这里插入图片描述

    实例
    #grad {
      background-image: linear-gradient(red, yellow);
    }
    

    线性渐变 - 从左到右

    下面的例子展示了从左开始的线性渐变。它从红色开始,过渡到黄色:
    在这里插入图片描述

    实例
    #grad {
      background-image: linear-gradient(to right, red , yellow);
    }
    

    线性渐变 - 对角线

    下面的例子展示了从左开始的线性渐变。它从红色开始,过渡到黄色:
    在这里插入图片描述

    实例
    #grad {
      background-image: linear-gradient(to bottom right, red, yellow);
    }
    

    使用角度

    如果希望对渐变角度做更多的控制,您可以定义一个角度,来取代预定义的方向(向下、向上、向右、向左、向右下等等)。值 0deg 等于向上(to top)。值 90deg 等于向右(to right)。值 180deg 等于向下(to bottom)。
    在这里插入图片描述

    语法
    background-image: linear-gradient(angle, color-stop1, color-stop2);
    

    这个角度指定水平线和渐变线之间的角度。
    下面的例子展示了如何在线性渐变上使用角度:

    实例
    #grad {
      background-image: linear-gradient(-90deg, red, yellow);
    }
    

    使用多个色标

    下面的例子展示了带有多个色标的线性渐变(从上到下):
    在这里插入图片描述

    实例
    #grad {
      background-image: linear-gradient(red, yellow, green);
    }
    

    下面的例子展示了如何使用彩虹色和一些文本创建线性渐变(从左到右):
    在这里插入图片描述

    实例
    #grad {
      background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
    }
    

    使用透明度

    CSS 渐变还支持透明度,也可用于创建渐变效果。

    如需添加透明度,我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值,它定义颜色的透明度:0 表示全透明,1 表示全彩色(无透明)。

    下面的例子展示了从左开始的线性渐变。它开始完全透明,然后过渡为全色红色:
    在这里插入图片描述

    实例
    #grad {
      background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
    }
    

    重复线性渐变

    repeating-linear-gradient() 函数用于重复线性渐变:
    在这里插入图片描述

    实例
    #grad {
      background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    }
    

    CSS 径向渐变

    径向渐变由其中心定义。

    如需创建径向渐变,您还必须定义至少两个色标。

    语法

    background-image: radial-gradient(shape size at position, start-color, ..., last-color);
    

    默认地,shape 为椭圆形,size 为最远角,position 为中心。

    径向渐变-均匀间隔的色标(默认)

    下面的例子展示了带有均匀间隔的色标的径向渐变:
    在这里插入图片描述

    实例
    #grad {
      background-image: radial-gradient(red, yellow, green);
    }
    

    径向渐变-不同间距的色标

    下面的例子展示了一个径向渐变,其色标之间的间隔不同:
    在这里插入图片描述

    实例
    #grad {
      background-image: radial-gradient(red 5%, yellow 15%, green 60%);
    }
    

    设置形状

    shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse(椭圆)。

    下面的例子展示了一个圆形的径向渐变:
    在这里插入图片描述

    实例
    #grad {
      background-image: radial-gradient(circle, red, yellow, green);
    }
    

    重复径向渐变

    repeating-radial-gradient() 函数用于重复径向渐变:
    在这里插入图片描述

    实例
    #grad {
      background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
    }
    
    展开全文
  • web之线性渐变,径向渐变,重复渐变 渐变能做很多炫丽的效果,减少图片的使用,有很强的适用性与扩展性。 1.线性渐变 线性渐变是指一个颜色从一个方向向另一个颜色变化,相当于从任意角度向任意角度变化(角度之间...

    web之线性渐变,径向渐变,重复渐变

    渐变能做很多炫丽的效果,减少图片的使用,有很强的适用性与扩展性。
    1.线性渐变
    线性渐变是指一个颜色从一个方向向另一个颜色变化,相当于从任意角度向任意角度变化(角度之间必须相差180°)。
    background:linear-gradient(to left,red,blue,black)
    从右到左先红,再慢慢变蓝,再慢慢变黑
    在这里插入图片描述
    2.径向渐变
    border: solid 1px #ccc;
    width: 300px;
    height: 300px;
    background: radial-gradient(red,yellow,rgba(12,22,33,0.2));
    此处:圆三色标之间是等距的 在这里插入图片描述

    border: solid 1px #ccc;
    width: 100px;
    height: 300px;
    background: radial-gradient(ellipse closest-side,red,yellow 10%,#1E90FF 50%,white);
    椭圆是使用最近端的值,从开始点到最近端来规定椭圆的尺寸在这里插入图片描述

    border: solid 1px #ccc;
    width: 100px;
    height: 300px;
    background: radial-gradient(ellipse farthest-corner,red,yellow 10%,black 50%,white);
    椭圆渐变的尺寸为盒模型中心到最远端的距离
    在这里插入图片描述

    border: solid 1px #ccc;
    width: 100px;
    height: 300px;
    background: radial-gradient(circle closest-side,red,yellow 10%,black,white);
    起始点与最近一端为圆的尺寸
    在这里插入图片描述
    3.重复渐变
    线性重复渐变:
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    background: repeating-linear-gradient(-45deg, red 0px, red 10px, white 10px, white 20px);
    从135deg指向-45deg red到red为10px white到white为10px的宽度,如此重复。
    在这里插入图片描述
    圆形重复渐变:
    width: 300px;
    height: 300px;
    border: solid 1px #ccc;
    background: repeating-radial-gradient(red,red 10px,white 10px,white 20px);
    在这里插入图片描述

    展开全文
  • 在css之前如果想要加入渐变效果,通常要通过设置背景图像来实现。css3中加入了渐变属性,通过渐变属性可以很轻松的实现渐变效果。css的渐变效果主要包括线性渐变和径向渐变。线性渐变:起始颜色沿着一条直线过渡,在...
  • css3渐变、线性渐变和径向渐变

    千次阅读 2017-12-11 19:11:16
    菜鸟教程 | Airen的博客...此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients): - 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对
  • 一、WPF线性渐变(LinearGradientBrush、GradientStop) 1)LinearGradientBrush--主要属性: StartPoint获取或设置线性渐变的二维起始坐标。 EndPoint获取或设置线性渐变的二维终止坐标。 2)GradientStop-主要...
  • Qt渐变之线性渐变

    2018-06-29 19:28:34
    我们在说到QBrush时提到画刷可以使用渐变的样式。Qt中有三种渐变,这里来聊一聊线性渐变QLinearGradient。 我对于线性渐变的理解就是指在一个方向上的渐变。使用上也很简单先看个例子。 渐变需要设置起始点和终止...
  • 1linear-gradient(线性渐变) 1.1按方向渐变 语法: background: linear-gradient(direction, color-stop1, color-stop2, ...); (1)从上到下(默认) 实现代码: background:linear-gradient(red , white)...
  • css渐变

    2019-11-01 00:39:30
    一、渐变 1、什么渐变 两种或多种颜色间平滑过渡的效果分类: (1)、线性渐变 (2)、径向渐变 (3)、重复渐变 2、渐变的组成(元素) 色标:决定了渐变的每种颜色及其出现的位置每一种渐变效果都是由多个色标组成...
  • to right,//从左往右渐变 rgba(8, 202, 210, 0) 0%, rgba(8, 202, 210, 0.5) 30%, rgba(8, 202, 210, 0.8) 50%, rgba(8, 202, 210, 0.5) 80%, rgba(8, 202, 210, 0) 100% );//第四位是透明度,后面的百分比是
  • 2、UIButton 的边框需要渐变色,背景是白色,字体也需要渐变色 需求一 : UIButton 的背景需要渐变色: 思路: 我们可以利用 CAGradientLayer 来做渐变色 然而我不是直接套在UIButton 的layer 上面进行操作。 我是...
  • 渐变是CSS3中很棒的色彩功能。 现在,我们不仅可以添加一种颜色,还可以在一个声明块中添加多种颜色组合,而无需依赖图像,这可以减少我们网站中的HTTP请求,从而使网站加载速度更快。 如果您在CSS3中使用过渐变,...
  • CSS3 定义了两种类型的渐变(gradients):- 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向- 径向渐变(Radial Gradients)- 由它们的中心定义线性渐变 - 从上到下(默认情况下)#grad { background:...
  • 渐变和canvas渐变矩形

    2018-10-30 19:35:30
    在canvas中实现渐变有2种方式 第一种:通过遍历点的值实现 第二种:创建渐变的方案——createLinearGradient 第一种: &lt;canvas width="600" height="400"&gt;&lt;/canvas&...
  • 渐变背景渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡。使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度。渐变,...
  • 渐变是两种或多种颜色之间的平滑过渡。以前,必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变...
  • CSS3中的渐变实现(线性渐变、径向渐变) CSS3中的background新增属性实现,常见页面效果。 CSS3中的图片边框的基本用法 CSS3中的transition属性,实现过渡效果。 CSS3中的transfrom属性,实现 2d变换效果。 渐变:...
  • 渐变算法

    千次阅读 2018-07-04 19:46:07
    用两种RGB颜色对矩形进行线性渐变填充时,需要合适的算法计算各点的颜色,这样才不会出现中间过渡色,或者出现渐变填充不完整。而在增加从任意角度进行渐变后,情况似乎变得更加复杂。 又比如这样: 这些都是...
  • 在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况1.直角的背景渐变 border渐变 button{ background:transparent; color:#23b7cb; font-size:15px; padding:5px...
  • 渐变?:背景色在多个颜色之间平稳过渡 线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化 线性渐变如图所示: 标准模式的语法(不添加浏览器前缀): background:linear-gradient(direction,color-...
  • 欢迎阅读Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩前言 在Unity中UGUI只为我们提供了最为基础的Image和RawImage两种可展示图片的组件,但是这两种组件要展示一些特殊效果的时候总是会依赖外界资源...
  • css3渐变SVG渐变

    千次阅读 2017-05-06 12:45:52
    css3实现的梯形渐变background:linear-gradient svg实现的梯形渐变linearGradient css .toLeft { margin-top:15px; width:300px; height: 15px; ba
  • RGB渐变色与HSL渐变

    千次阅读 2019-04-17 19:41:29
    RGB渐变色 计算渐变色时最容易想到的是根据RGB三个通道分别依次增加相应步长来实现,例如从(200,0,0)渐变到(0,200,0),共5种颜色时,结果应为(200,0,0)、(150,50,0)、(100,100,0)、(50,150,0)、(0,200...
  • 渐变字体

    2019-06-09 16:24:16
    渐变字体 打开AI,将你想做的图片导入AI,然后在工具栏里找到钢笔工具(快捷键P)关掉填充打开描边描边大小为(5)之后就细心的描一遍,如图下。 我描的有点急促,所以不太好看,在工具栏找到椭圆工具(快捷键P)画...
  • 目录结构渐变的定义渐变的分类线性渐变的使用举例示范应用提醒 渐变的定义 在两个或多个指定颜色之间显示平稳的过渡。 利用渐变可以制作出非常漂亮的颜色。 渐变的分类 css3里渐变分为线性渐变和径向渐变,本文...
  • 对于刚刚接触ai的新手用户来说,Adobe Illustratorru软件中的渐变工具如何使用并不是特别的了解,其实Adobe Illustratorru渐变工具主要为用户将图片按照设定的渐变颜色,以不同渐变颜色进而显示,通常ai的渐变工具在...
  • CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的...
  • 在前端网页开发的时候,往往会用到一些渐变色的效果,这样可以使得前端页面更加美观。那么这些渐变效果是如何用css代码实现出来的?本章就给大家带来css如何实现渐变效果?css背景色渐变与文字渐变效果的实现(代码...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,076
精华内容 15,230
关键字:

渐变