为了方便我写了一个页面，直接给大家页面代码，直接浏览器打开需要哪个copy使用

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3渐变色板配色代码</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body style="padding:0;margin:0;">

<ul>
<li class="gradient--0">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--1">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--2">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--3">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--4">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--5">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--6">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--7">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--8">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--9">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--10">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--11">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--12">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--13">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
<li class="gradient--14">
<div class="gradient"></div>
<div class="start-color"></div>
<div class="end-color"></div>
</li>
</ul>
</body>
</html>
css文件

.gradient--0 {
--gradient-start: #6DE195;
--gradient-start-text: '#6DE195';
--gradient-end: #C4E759;
--gradient-end-text: '#C4E759';
}

.gradient--1 {
--gradient-start: #41C7AF;
--gradient-start-text: '#41C7AF';
--gradient-end: #54E38E;
--gradient-end-text: '#54E38E';
}

.gradient--2 {
--gradient-start: #99E5A2;
--gradient-start-text: '#99E5A2';
--gradient-end: #D4FC78;
--gradient-end-text: '#D4FC78';
}

.gradient--3 {
--gradient-start: #ABC7FF;
--gradient-start-text: '#ABC7FF';
--gradient-end: #C1E3FF;
--gradient-end-text: '#C1E3FF';
}

.gradient--4 {
--gradient-start: #6CACFF;
--gradient-start-text: '#6CACFF';
--gradient-end: #8DEBFF;
--gradient-end-text: '#8DEBFF';
}

.gradient--5 {
--gradient-start: #5583EE;
--gradient-start-text: '#5583EE';
--gradient-end: #41D8DD;
--gradient-end-text: '#41D8DD';
}

.gradient--6 {
--gradient-start: #A16BFE;
--gradient-start-text: '#A16BFE';
--gradient-end: #DEB0DF;
--gradient-end-text: '#DEB0DF';
}

.gradient--7 {
--gradient-start: #D279EE;
--gradient-start-text: '#D279EE';
--gradient-end: #F8C390;
--gradient-end-text: '#F8C390';
}

.gradient--8 {
--gradient-start: #F78FAD;
--gradient-start-text: '#F78FAD';
--gradient-end: #FDEB82;
--gradient-end-text: '#FDEB82';
}

.gradient--9 {
--gradient-start: #BC3D2F;
--gradient-start-text: '#BC3D2F';
--gradient-end: #A16BFE;
--gradient-end-text: '#A16BFE';
}

.gradient--10 {
--gradient-start: #A43AB2;
--gradient-start-text: '#A43AB2';
--gradient-end: #E13680;
--gradient-end-text: '#E13680';
}

.gradient--11 {
--gradient-start: #9D2E7D;
--gradient-start-text: '#9D2E7D';
--gradient-end: #E16E93;
--gradient-end-text: '#E16E93';
}

.gradient--12 {
--gradient-start: #F5CCF6;
--gradient-start-text: '#F5CCF6';
--gradient-end: #F1EEF9;
--gradient-end-text: '#F1EEF9';
}

.gradient--13 {
--gradient-start: #F0EFF0;
--gradient-start-text: '#F0EFF0';
--gradient-end: #FAF8F9;
--gradient-end-text: '#FAF8F9';
}

.gradient--14 {
--gradient-start: #121317;
--gradient-start-text: '#121317';
--gradient-end: #323B42;
--gradient-end-text: '#323B42';
}

ul {
margin-top: 30px;
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
grid-auto-rows: 350px;
font-family: Geneva, Tahoma, Verdana, sans-serif;
color: #AAA;
font-size: 12px;
list-style-type:none;
}

li {
position: relative;
text-align: center;
}

.gradient {
display: inline-block;
height: 250px;
width: 80%;
background: linear-gradient(33deg, var(--gradient-start), var(--gradient-end));
border-radius: 20px;
box-shadow: 0 5px 10px #0002;
}

.start-color, .end-color {
padding: 10px 0 0 10px;
}

.start-color:before, .end-color:before {
content: '';
width: 15px;
height: 15px;
border-radius: 999px;
display: inline-block;
}

.start-color:after, .end-color:after {
padding: 0 10px;
vertical-align: 2px;
border-radius: 999px;
display: inline-block;
}

.end-color:before { background-color: var(--gradient-start); }

.end-color:after { content: var(--gradient-start-text); }

.start-color:before { background-color: var(--gradient-end); }

.start-color:after { content: var(--gradient-end-text); }

@media screen and (min-width: 1750px) { :root { --columns: 8; } }
@media screen and (max-width: 1750px) { :root { --columns: 7; } }
@media screen and (max-width: 1500px) { :root { --columns: 6; } }
@media screen and (max-width: 1250px) { :root { --columns: 5; } }
@media screen and (max-width: 1000px) { :root { --columns: 4; } }
@media screen and (max-width: 750px) { :root { --columns: 6; } }
@media screen and (max-width: 625px) { :root { --columns: 5; } }
@media screen and (max-width: 500px) { :root { --columns: 4; } }
@media screen and (max-width: 375px) { :root { --columns: 3; } }
@media screen and (max-width: 250px) { :root { --columns: 2; } }

@media screen and (max-width: 750px) {
ul {
margin-top: 15px;
grid-auto-rows: 190px;
font-size: 10px;
}
.gradient {
height: 125px;
}
.start-color, .end-color {
padding: 7px 0 0 10px;
}
}
 
---------------------

转载于:https://www.cnblogs.com/hyhy904/p/11167521.html

纯CSS3渐变色板配色代码相关推荐

  1. 15种CSS3渐变颜色色板配色代码

    下载地址 15种纯CSS3基于gradient属性制作的渐变颜色色板配色代码,带颜色参数,可在CSS样式自定义配置渐变颜色配色. dd:

  2. css3之 谜灯卡片_纯css3灯泡开关特效代码

    纯CSS3和SVG鼠标滑过灯泡发光特效 相关css代码 .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: transl ...

  3. 纯css3流星雨js特效代码

    下载地址一款逼真的流星雨特效代码,使用纯css3代码实现的流星雨特效. dd:

  4. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  5. html页面小宠物代码大全,纯css3实现宠物小鸡实例代码

    最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码.所以最近用css3仿写了我每天都照顾的宠物小鸡的模样,第一次写,有些细节处理的不 ...

  6. 纯CSS3文字 渐变内发光投影效果

    今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 一般我们都是用css3的box ...

  7. 网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图 （4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...

    使用纯CSS3代码实现简单的图片轮播 设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...

  8. html5简单动画效果代码,分享12个简洁漂亮的纯CSS3进度条特效动画代码

    进度条是很常用的一个用户体验项,用于表示事件的处理或加载状态,制作这些loading进度条我们通常会使用GIF图片来实现,但是这方法也有一些弊端,比如我要放大或改变颜色,这样就不好处理了. 要解决这些 ...

  9. html中如何设计对话框,用纯css3和html制作泡沫对话框实现代码

    现在,泡沫对话框是一种比较流行的趋势,一般都是用html和javascript,和或者图片来实现,今天用纯css3和html来实现一些基本的简单的泡沫对话框 html代码如下: 复制代码代码如下: T ...

最新文章

  1. python 实用程序代码_【转】python常用工具代码
  2. caffe apt install
  3. 启明云端分享|乐鑫 ESP-NOW 无线通信方案主要特点、应用以及NOW一对一模式下通信速率
  4. oracle能否生成mdb,oracle怎么导入.mdb文件
  5. yaesu7800 维修手册_《YAESU 八重洲 FT-7800系列 维修手册》.pdf
  6. 阶段3 1.Mybatis_11.Mybatis的缓存_8 mybatis的二级缓存
  7. Excel自定义函数
  8. iOS 16适配屏幕旋转强制转屏切换大总结
  9. 《Java SE编程365例》003： 我的电子书城
  10. 依赖倒置原则应用-司机开车案例
  11. GitHub 配置SSH Key
  12. 汉诺塔_-Chaz-_新浪博客
  13. 《时代三部曲》感悟四
  14. 新浪微博单点登陆分析
  15. 关于springboot微信点餐的错题集
  16. 孟婆汤传说！！！感人至极！
  17. 量子计算基础(学习笔记)
  18. 各种Lisp系语言大检阅
  19. 系统安全：修改十四项设置 打造安全牢靠易用电脑
  20. 大数据人工智能领域从菜鸟到高手晋级指南

热门文章

  1. 学大数据要学哪些算法_大数据学习之不得不知的八大算法
  2. python报表自动化系列 - 通过Python使用MySQL数据库
  3. 哈工大计算机非全日制调剂,哈尔滨工业大学计算学部2021年非全日制专业学位硕士调剂...
  4. AcWing 891. Nim游戏（nim博弈）
  5. 规模数据导入高效方式︱将数据快速读入R—readr和readxl包
  6. 使用 anacoda 安装scrapy
  7. sql server下载教程
  8. Proxy-Go v7.0 发布，你应该拥有的强大代理工具！
  9. Python捕捉命令输出、错误输出及赋值命令到变量的方法
  10. OpenFileDialog获取文件名和文件路径问题