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 {
好看的css代码--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--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-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-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); }
.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;
}
}
-
--------------------

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。