html浅绿色配色效果图大全,纯CSS3渐变色板配色代码
为了方便我写了一个页面,直接给大家页面代码,直接浏览器打开需要哪个copy使用
index.html
纯CSS3渐变色板配色代码
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;
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: '';
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- 1750px) { :root { --columns: 8; } }
@media screen and (max- 1750px) { :root { --columns: 7; } }
@media screen and (max- 1500px) { :root { --columns: 6; } }
@media screen and (max- 1250px) { :root { --columns: 5; } }
@media screen and (max- 1000px) { :root { --columns: 4; } }
@media screen and (max- 750px) { :root { --columns: 6; } }
@media screen and (max- 625px) { :root { --columns: 5; } }
@media screen and (max- 500px) { :root { --columns: 4; } }
@media screen and (max- 375px) { :root { --columns: 3; } }
@media screen and (max- 250px) { :root { --columns: 2; } }
@media screen and (max- 750px) {
ul {
margin-top: 15px;
grid-auto-rows: 190px;
font-size: 10px;
}
.gradient {
height: 125px;
}
.start-color, .end-color {
padding: 7px 0 0 10px;
}
}
---------------------
html浅绿色配色效果图大全,纯CSS3渐变色板配色代码相关推荐
- 纯CSS3渐变色板配色代码
为了方便我写了一个页面,直接给大家页面代码,直接浏览器打开需要哪个copy使用 index.html <!DOCTYPE html> <html lang="en" ...
- html页面小宠物代码大全,纯css3实现宠物小鸡实例代码
最近看了很多关于css3的知识和文章,觉得css3用起来很方便,使用css3的话,在页面布局上可以省去很多不必要的代码.所以最近用css3仿写了我每天都照顾的宠物小鸡的模样,第一次写,有些细节处理的不 ...
- html流光效果图,利用纯CSS3绘制html网页流光文字
对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.00后的请退避.你们卟懂绯紸流!因为你们毕竟是杀马特贵族!!比我们高贵. 还记得那些炫酷的签名档,或者那些炫酷的动态头像.当年可是卖到十几块钱 ...
- css3之 谜灯卡片_纯css3灯泡开关特效代码
纯CSS3和SVG鼠标滑过灯泡发光特效 相关css代码 .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: transl ...
- 纯css3流星雨js特效代码
下载地址一款逼真的流星雨特效代码,使用纯css3代码实现的流星雨特效. dd:
- 推荐10款纯css3实现的实用按钮
在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...
- 15种CSS3渐变颜色色板配色代码
下载地址 15种纯CSS3基于gradient属性制作的渐变颜色色板配色代码,带颜色参数,可在CSS样式自定义配置渐变颜色配色. dd:
- 纯CSS3文字 渐变内发光投影效果
今天群上面同志们在讨论css3内发光效果,自己也就研究一下,写了个效果出来,涉及css3投影,渐变,蒙版,伪类等知识点,现在写下设计思路,仅供参考.发个效果图大家看先: 一般我们都是用css3的box ...
- css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
- 用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构 该CS ...
最新文章
- mariadb 内存占用优化
- Unsupervised Personalized Feature Selection--阅读笔记
- 纯前端H5小应用_localStorage存储
- swift4.0 确定手势滑动方向
- elasticsearch 5.x Delete By Query API(根据条件删除)
- 【原创】user.id字段
- 理论加实践,终于把时间序列预测ARIMA模型讲明白了
- pta数据结构 彩虹瓶(c++实现)(详解)
- 麒麟810处理器_何刚口中第二颗7nm处理器麒麟810曝光:将搭载自研NPU
- 精心准备了10个行业30张大屏模板,0代码直接套用
- JEECG(三) JEECG minidao如何封装自己的 多表联合查询 分页查询
- Cross-entropy 和 Binary cross-entropy
- 腾讯云COS云存储入门(一)
- 拼多多根据关键词取商品列表
- 奥迪A6(C5)遥控器钥匙更换电池后无法使用的适配(对码)方法
- 验证码论文概述-----中文篇
- Roboware Studio下载、安装、及解决办法
- IE中不能自动选择UTF-8编码的解决办法
- 幻方问题__技巧解法
- 学习vue源码(14)深入学习diff