1. Toy模板网首页
  2. > Toy博客

微信小程序——CSS3渐变

10月前 作者：雪芽蓝域zzs 分类：Toy博客 阅读(49) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序——CSS3渐变。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

  SS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：

说明

1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向；
2、径向渐变（Radial Gradients）- 由它们的中心定义。
线性渐变
（1）从上到下渐变（默认情况）
background: linear-gradient(red, blue);
（2）从左到右渐变
background: linear-gradient(to right, red , blue);
（3）对角方向渐变
background: linear-gradient(to bottom right, red , blue);
（4）指定角度渐变
background: linear-gradient(120deg, red, blue);
（5）从上到下，带有多个颜色结点渐变
background: linear-gradient(red, green, blue);
（6）带有彩虹颜色和文本渐变
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
（7）从左至右，带有透明度
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
（8）重复线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
2.径向渐变
（1）颜色结点均匀分布
background: radial-gradient(red, green, blue);
（2）颜色结点不均匀分布
background: radial-gradient(red 5%, green 15%, blue 60%);
（3）形状为圆形渐变
background: radial-gradient(circle, red, yellow, green);
（4）重复径向渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);

实例

<view class='container'>
  <view class='demo view11'>11</view>
  <view class='demo view12'>12</view>
  <view class='demo view13'>13</view>
  <view class='demo view14'>14</view>
  <view class='demo view15'>15</view>
  <view class='demo view16'>16</view>
  <view class='demo view17'>17</view>
  <view class='demo view18'>18</view>
  <view class='demo view19'>19</view>
  <view class='demo view20'>20</view>
  <view class='demo view21'>21</view>
  <view class='demo view22'>22</view>
  <view class='demo view23'>23</view>
</view>

线性渐变：从上至下

.view11 {
   background: linear-gradient(red, blue);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：从左至右

.view11 {
   background: linear-gradient(red, blue);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：对角

.view13 {
   background: linear-gradient(to bottom right, red , blue);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：指定角度

.view14 {
   background: linear-gradient(120deg, red, blue);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：从上到下，带有多个颜色结点

.view15 {
   background: linear-gradient(red, green, blue);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：带有彩虹颜色和文本

.view16 {
   background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：从左至右，带有透明度

.view17 {
   background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

线性渐变：重复线性渐变

.view18 {
   background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

径向渐变：颜色结点均匀分布

![.view19 {
   background: radial-gradient(red, green, blue);
}](https://img-blog.csdnimg.cn/7d650c5d847c4aeea1f88312d053e68e.png)

小程序文字渐变,微信小程序,微信小程序,css3,小程序

径向渐变：颜色结点不均匀分布

.view20 {
   background: radial-gradient(red 5%, green 15%, blue 60%);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

径向渐变：圆形

.view21 {
   background: radial-gradient(circle, red, yellow, green);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序

径向渐变：重复径向渐变

.view22 {
   background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

小程序文字渐变,微信小程序,微信小程序,css3,小程序文章来源地址https://www.toymoban.com/news/detail-773217.html

到了这里，关于微信小程序——CSS3渐变的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • css3背景渐变

    css3背景渐变

    1.线性渐变  2.径向渐变 3.重复渐变 无论线性渐变，还是径向渐变，在没有发生渐变的位置，继续进行渐变，就为重复渐变。 利用重复渐变实现网格效果 代码如下：

    2024年02月13日
    浏览(46)
  • css3背景与渐变

    css3背景与渐变

    在现代网页设计中，背景与渐变是塑造用户体验和品牌形象的关键元素。这不仅仅是技术层面的问题，更是一门艺术。通过本文，我们将揭示CSS3的神奇之处，帮助你释放创意，打破设计的局限，让你的网页焕发生机。 background-color属性表示背景颜色 背景颜色可以用十六进制、

    2024年01月20日
    浏览(48)

  • 【CSS3】渐变 阴影 遮罩

    1. CSS3渐变 渐变: 有规律的渐渐变化,在前端中通常指颜色的变化的实现方式. 通常使用在所有接受图像的属性上.(替代图片),意义是创建一张图片 gradient可以应用在所有接受图像的属性上 1.1 分类: 线性渐变(linear-gradient)变化的方向是一条直线 径向渐变(radial-gradient)变化的方向是

    2024年01月17日
    浏览(56)
  • CSS3渐变属性详解

    CSS3渐变属性详解

    线性渐变 概念：线性渐变，指的是在一条直线上进行的渐变。在线性渐变过程中， 起始颜色会沿着一条直线按顺序过渡到结束颜色 语法： 渐变角度 线性渐变的“ 渐变角度 ”取值有两种： 一种是使用角度（单位为deg) 另一种是使用。 取值 属性值 对应角度 说

    2024年02月02日
    浏览(46)

  • CSS3渐变及2D转换

    持续更新哦… 1、css3渐变 概念: CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平 稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用 CSS3的渐变(gradients)即可实现。此外，渐变效果的元素在放大时 看起来效果更好，因为渐变(gradient)是由浏览器生成的

    2024年02月11日
    浏览(44)
  • 【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

    【Web前端开发基础】CSS3之Web字体、字体图标、平面转换、渐变

    1.1 Web字体概述 每种字体都对应着相应的字体文件，没有 @font-face 规则之前，客户端是否能够正确显示 fontfamily 规定的字体，是由该字体的文件是否预装在客户端决定的。而 @font-face 规则可以将字体文件存放在服务器端，渲染页面时客户端请求从服务器端下载改字体文件进行

    2024年01月25日
    浏览(63)
  • css3 实现文字横幅无缝滚动

    css3 实现文字横幅无缝滚动

    使用 css3 关键帧 @keyframes 和 animation 属性实现文字横幅无缝滚动。

    2024年02月13日
    浏览(44)
  • CSS3实现文字循环滚动播放

    CSS3实现文字循环滚动播放

    效果图： 代码： CSS3 动画 CSS3 动画文档看这里

    2024年02月02日
    浏览(76)
  • CSS3实现的4种3D文字效果

    CSS3实现的4种3D文字效果

    本文将介绍css3实现的4种3D文字效果。代码很简单，效果很震撼： 代码实现 html： css： 代码解释 1、3D文字效果运用原理就是像Photoshop一样，我们在文字的下方或上方复制了多个图层，并把每一个层向左上或右下方向移动一个1px距离，从而制作出3D效果。同时我们层数越多，其

    2024年02月11日
    浏览(78)
  • 使用css3如何实现一个文字打印效果

    使用css3如何实现一个文字打印效果

    在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 文字打印.gif 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 animation 动画通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果； 相对过渡动画， animation 动画可以

    2024年02月16日
    浏览(106)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包