css实现减色和加色对比效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现减色和加色对比效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .wrapper { display: flex; flex-direction: column; } @media (min-width: 1200px) { .wrapper { flex-direction: row; flex-wrap: nowrap; min-height: calc(100vh - 58px); } } .colorsContainer { position: relative; width: 100%; aspect-ratio: 1/1; } .materialsColors { background: #eee; color: #111; } .materialsColors .colorBox { mix-blend-mode: multiply; } .lightsColors { background: #111; color: #eee; } .lightsColors .colorBox { mix-blend-mode: screen; } .colorBox { position: absolute; top: 50%; left: 50%; width: 40%; aspect-ratio: 1/1; margin: -20%; border-radius: 50%; } .colorBox:nth-child(0n+1) { transform: rotate(0deg) translateY(-45%) rotate(0deg); } .lightsColors .colorBox:nth-child(0n+1) { background-color: #330000; } .materialsColors .colorBox:nth-child(0n+1) { background-color: #ffcccc; } .colorBox:nth-child(1n+2) { transform: rotate(9deg) translateY(-45%) rotate(-9deg); } .lightsColors .colorBox:nth-child(1n+2) { background-color: #330800; } .materialsColors .colorBox:nth-child(1n+2) { background-color: #ffd4cc; } .colorBox:nth-child(2n+3) { transform: rotate(18deg) translateY(-45%) rotate(-18deg); } .lightsColors .colorBox:nth-child(2n+3) { background-color: #330f00; } .materialsColors .colorBox:nth-child(2n+3) { background-color: #ffdbcc; } .colorBox:nth-child(3n+4) { transform: rotate(27deg) translateY(-45%) rotate(-27deg); } .lightsColors .colorBox:nth-child(3n+4) { background-color: #331700; } .materialsColors .colorBox:nth-child(3n+4) { background-color: #ffe3cc; } .colorBox:nth-child(4n+5) { transform: rotate(36deg) translateY(-45%) rotate(-36deg); } .lightsColors .colorBox:nth-child(4n+5) { background-color: #331f00; } .materialsColors .colorBox:nth-child(4n+5) { background-color: #ffebcc; } .colorBox:nth-child(5n+6) { transform: rotate(45deg) translateY(-45%) rotate(-45deg); } .lightsColors .colorBox:nth-child(5n+6) { background-color: #332600; } .materialsColors .colorBox:nth-child(5n+6) { background-color: #fff2cc; } .colorBox:nth-child(6n+7) { transform: rotate(54deg) translateY(-45%) rotate(-54deg); } .lightsColors .colorBox:nth-child(6n+7) { background-color: #332e00; } .materialsColors .colorBox:nth-child(6n+7) { background-color: #fffacc; } .colorBox:nth-child(7n+8) { transform: rotate(63deg) translateY(-45%) rotate(-63deg); } .lightsColors .colorBox:nth-child(7n+8) { background-color: #303300; } .materialsColors .colorBox:nth-child(7n+8) { background-color: #fcffcc; } .colorBox:nth-child(8n+9) { transform: rotate(72deg) translateY(-45%) rotate(-72deg); } .lightsColors .colorBox:nth-child(8n+9) { background-color: #293300; } .materialsColors .colorBox:nth-child(8n+9) { background-color: #f5ffcc; } .colorBox:nth-child(9n+10) { transform: rotate(81deg) translateY(-45%) rotate(-81deg); } .lightsColors .colorBox:nth-child(9n+10) { background-color: #213300; } .materialsColors .colorBox:nth-child(9n+10) { background-color: #edffcc; } .colorBox:nth-child(10n+11) { transform: rotate(90deg) translateY(-45%) rotate(-90deg); } .lightsColors .colorBox:nth-child(10n+11) { background-color: #1a3300; } .materialsColors .colorBox:nth-child(10n+11) { background-color: #e6ffcc; } .colorBox:nth-child(11n+12) { transform: rotate(99deg) translateY(-45%) rotate(-99deg); } .lightsColors .colorBox:nth-child(11n+12) { background-color: #123300; } .materialsColors .colorBox:nth-child(11n+12) { background-color: #deffcc; } .colorBox:nth-child(12n+13) { transform: rotate(108deg) translateY(-45%) rotate(-108deg); } .lightsColors .colorBox:nth-child(12n+13) { background-color: #0a3300; } .materialsColors .colorBox:nth-child(12n+13) { background-color: #d6ffcc; } .colorBox:nth-child(13n+14) { transform: rotate(117deg) translateY(-45%) rotate(-117deg); } .lightsColors .colorBox:nth-child(13n+14) { background-color: #033300; } .materialsColors .colorBox:nth-child(13n+14) { background-color: #cfffcc; } .colorBox:nth-child(14n+15) { transform: rotate(126deg) translateY(-45%) rotate(-126deg); } .lightsColors .colorBox:nth-child(14n+15) { background-color: #003305; } .materialsColors .colorBox:nth-child(14n+15) { background-color: #ccffd1; } .colorBox:nth-child(15n+16) { transform: rotate(135deg) translateY(-45%) rotate(-135deg); } .lightsColors .colorBox:nth-child(15n+16) { background-color: #00330d; } .materialsColors .colorBox:nth-child(15n+16) { background-color: #ccffd9; } .colorBox:nth-child(16n+17) { transform: rotate(144deg) translateY(-45%) rotate(-144deg); } .lightsColors .colorBox:nth-child(16n+17) { background-color: #003314; } .materialsColors .colorBox:nth-child(16n+17) { background-color: #ccffe0; } .colorBox:nth-child(17n+18) { transform: rotate(153deg) translateY(-45%) rotate(-153deg); } .lightsColors .colorBox:nth-child(17n+18) { background-color: #00331c; } .materialsColors .colorBox:nth-child(17n+18) { background-color: #ccffe8; } .colorBox:nth-child(18n+19) { transform: rotate(162deg) translateY(-45%) rotate(-162deg); } .lightsColors .colorBox:nth-child(18n+19) { background-color: #003324; } .materialsColors .colorBox:nth-child(18n+19) { background-color: #ccfff0; } .colorBox:nth-child(19n+20) { transform: rotate(171deg) translateY(-45%) rotate(-171deg); } .lightsColors .colorBox:nth-child(19n+20) { background-color: #00332b; } .materialsColors .colorBox:nth-child(19n+20) { background-color: #ccfff7; } .colorBox:nth-child(20n+21) { transform: rotate(180deg) translateY(-45%) rotate(-180deg); } .lightsColors .colorBox:nth-child(20n+21) { background-color: #003333; } .materialsColors .colorBox:nth-child(20n+21) { background-color: #ccffff; } .colorBox:nth-child(21n+22) { transform: rotate(189deg) translateY(-45%) rotate(-189deg); } .lightsColors .colorBox:nth-child(21n+22) { background-color: #002b33; } .materialsColors .colorBox:nth-child(21n+22) { background-color: #ccf7ff; } .colorBox:nth-child(22n+23) { transform: rotate(198deg) translateY(-45%) rotate(-198deg); } .lightsColors .colorBox:nth-child(22n+23) { background-color: #002433; } .materialsColors .colorBox:nth-child(22n+23) { background-color: #c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0