準備做一個動畫
Re: 準備做一個動畫
代码： 全选
<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480" rfm="repeat"> <defs mode="0" rotatestep="0" rotatestart="0" stepvalue="60" snapto="0" displaywait="1"> <g id="tile0" frontfill="#ca5326" backfill="#2691c0"><path fill="none" stroke="none" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<circle opacity="0.7" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g><g id="tile1" fill="none" stroke="none" frontfill="#ca5326" backfill="#2691c0"><path d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<circle opacity="0.7" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g></defs> <g class="etdrop" transform="translate(48,48) scale(0.8)" stroke="#777" stroke-width="2" stroke-linejoin="round" id="etanidrop"><g class="etboard">
</g><use href="#tile0" fill="#ca5326" transform="translate(240,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(132,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(348,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(78,146.469) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(186,146.469) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(294,146.469) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(402,146.469) scale(1,1) rotate(-151.318)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(348,240) scale(1,1) rotate(-151.318)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(456,240) scale(1,1) rotate(-151.318)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(132,240) scale(1,1) rotate(-151.318)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(186,333.531) scale(1,1) rotate(-151.318)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(294,333.531) scale(1,1) rotate(123.038)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(24,240) scale(1,1) rotate(-12.203)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(78,333.531) scale(1,1) rotate(-12.203)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(132,427.061) scale(1,1) rotate(-12.203)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(402,333.531) scale(1,1) rotate(-12.203)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(348,427.061) scale(1,1) rotate(-12.203)" class="tiledropped"/><use href="#tile0" fill="#ca5326" transform="translate(240,427.061) scale(1,1) rotate(-12.203)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(240,132) scale(1,1) rotate(36.179)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(240,24) scale(1,1) rotate(4.394)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(146.469,78) scale(1,1) rotate(4.394)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(333.531,78) scale(1,1) rotate(-68.94)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(427.061,132) scale(1,1) rotate(-68.94)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(333.531,186) scale(1,1) rotate(-68.94)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(146.469,186) scale(1,1) rotate(-68.94)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(52.939,132) scale(1,1) rotate(-68.94)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(52.939,240) scale(1,1) rotate(-68.94)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(52.939,348) scale(1,1) rotate(-102.52)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(146.469,294) scale(1,1) rotate(-102.52)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(146.469,402) scale(1,1) rotate(-102.52)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(240,348) scale(1,1) rotate(-102.52)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(240,456) scale(1,1) rotate(-117.436)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(333.531,402) scale(1,1) rotate(-117.436)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(427.061,348) scale(1,1) rotate(-117.436)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(333.531,294) scale(1,1) rotate(-117.436)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(427.061,240) scale(1,1) rotate(-117.436)" class="tiledropped"/></g></svg>
暫時先做成這樣。需要重新再做一個。
上次由 ejsoon 在 2025年 12月 7日 09:45，总共编辑 1 次。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做一個動畫
代码： 全选
<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480" rfm="repeat"> <defs mode="0" rotatestep="0" rotatestart="0" stepvalue="60" snapto="0" displaywait="1"> <g id="tile0" frontfill="#ca5326" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.5" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g><g id="tile1" frontfill="#ca5326" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.5" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g><g id="tile2" frontfill="#ca5326" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="-93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="-93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.5" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g>
<g id="tile3" frontfill="#ca5326" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.5" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g><g id="tile4" frontfill="#ca5326" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.5" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g><g id="tile5" frontfill="#ca5326" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="-93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="-93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.5" fill="lightblue" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g></defs>
<g class="etdrop" transform="translate(48,48) scale(0.8,0.8)" stroke="#777" stroke-width="2" stroke-linejoin="round" id="etanidrop">
<g class="etboard">
<g id="theunit">
<use href="#tile0" fill="#ca5326" transform="translate(240,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile1" fill="#ca5326" transform="translate(132,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile2" fill="#ca5326" transform="translate(186,146.46) scale(1,1) rotate(0)" class="tiledropped"/>
</g>
<use href="#theunit" transform="rotate(60,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(120,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(180,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(240,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(300,240,240)" class="tiledropped"/>
<g id="theunit2" transform="rotate(30,240,240)">
<use href="#tile3" fill="#ca5326" transform="translate(240,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile4" fill="#ca5326" transform="translate(132,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile5" fill="#ca5326" transform="translate(186,146.46) scale(1,1) rotate(0)" class="tiledropped"/>
</g>
<use href="#theunit2" transform="rotate(60,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(120,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(180,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(240,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(300,240,240)" class="tiledropped"/>
</g>
<use href="#tile2" fill="#ca5326" transform="translate(240,240) scale(1,1) rotate(0)" class="tiledropped"/>
<use href="#tile5" fill="#ca5326" transform="translate(240,240) scale(1,1) rotate(30)" class="tiledropped"/></g></svg>於是我做好了。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做一個動畫
填入兩個色值A和B，得出色值C和一個透明度，當C在白底及這個透明度時是色值A，當兩個C在白底及這種透明度疊加時是色值B。
A和B是用「#fc87de」或rbg()的格式輸入，C要用「#fc87de，0.7」和rbga()兩種格式給出，
全部代碼都要使用英文。
grok4.1
代码： 全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Opacity Calculator: Single layer = A, Double layer = B on White</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 40px auto;
padding: 20px;
background: #f5f5f5;
color: #333;
}
h1 {
text-align: center;
color: #444;
}
.container {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
label {
display: block;
margin-top: 20px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-family: monospace;
font-size: 16px;
}
.preview {
margin-top: 30px;
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.box {
width: 120px;
height: 120px;
border: 2px solid #ddd;
border-radius: 8px;
position: relative;
}
.label {
text-align: center;
margin-top: 8px;
font-size: 14px;
color: #555;
}
.result {
margin-top: 30px;
padding: 20px;
background: #f0f8ff;
border-radius: 8px;
font-family: monospace;
font-size: 18px;
line-height: 2;
}
.note {
font-size: 14px;
color: #666;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Opacity Calculator<br><small>One layer on white → Color A<br>Two layers on white → Color B</small></h1>
<label for="colorA">Color A (visible when one layer is on white background)</label>
<input type="text" id="colorA" value="#fc87de" placeholder="#fc87de or rgb(252,135,222)">
<label for="colorB">Color B (visible when two identical layers are stacked on white)</label>
<input type="text" id="colorB" value="#ff4dd2" placeholder="#ff4dd2 or rgb(255,77,210)">
<div class="preview">
<div>
<div class="box" style="background:white;"></div>
<div class="label">White background</div>
</div>
<div>
<div class="box" id="singleLayer"></div>
<div class="label">One layer<br>(should match A)</div>
</div>
<div>
<div class="box" id="doubleLayer"></div>
<div class="label">Two layers stacked<br>(should match B)</div>
</div>
<div>
<div class="box" id="targetColor"></div>
<div class="label">Result Color C<br>with calculated opacity</div>
</div>
</div>
<div class="result" id="result">
Please enter valid colors above.
</div>
<div class="note">
This tool calculates the base color C and opacity α such that:<br>
• White + one layer of C(α) = Color A<br>
• White + two layers of C(α) = Color B
</div>
</div>
<script>
// Helper: convert any valid color to {r,g,b} (0-255)
function parseColor(colorStr) {
const div = document.createElement('div');
div.style.color = colorStr;
document.body.appendChild(div);
const computed = window.getComputedStyle(div).color;
document.body.removeChild(div);
const match = computed.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
if (match) {
return {
r: parseInt(match[1]),
g: parseInt(match[2]),
b: parseInt(match[3])
};
}
return null;
}
// Helper: convert {r,g,b} to hex
function rgbToHex(r, g, b) {
return "#" + [r,g,b].map(x => {
const hex = Math.round(x).toString(16);
return hex.length === 1 ? "0" + hex : hex;
}).join('');
}
// Main calculation
function calculate() {
const aInput = document.getElementById('colorA').value.trim();
const bInput = document.getElementById('colorB').value.trim();
const colA = parseColor(aInput);
const colB = parseColor(bInput);
if (!colA || !colB) {
document.getElementById('result').textContent = "Please enter two valid colors (hex or rgb).";
return;
}
// White = 255,255,255
const W = 255;
// Equations:
// (1 - α) * W + α * C = A → for each channel
// (1 - α) * W + α * ((1 - α) * W + α * C) = B
// Simplify second equation:
// (1 - α)^2 * W + 2*α*(1 - α)*C + α²*C = B → but easier to solve step by step
// From first layer: A = (1-α)W + αC → C = (A - (1-α)W) / α
// Plug into second equation, or better: compute ratio
// Actually the cleanest way:
// Let X = color after first layer = A
// Let Y = color after second layer = B
// Then: Y = (1-α) * X + α * C
// But from first: C = (X - (1-α)W) / α
// Substitute:
// Y = (1-α)X + α * (X - (1-α)W)/α
// Y = (1-α)X + (X - (1-α)W)
// Y = X + (1-α)(X - W)
// Then solve for α:
// Y - X = (1-α)(X - W)
// α = 1 - (Y - X) / (X - W) (for each channel, should be same)
let alpha = null;
let C = {r:0, g:0, b:0};
for (const channel of ['r','g','b']) {
const X = colA[channel]; // A
const Y = colB[channel]; // B
if (Math.abs(X - W) < 0.01) {
// If A is white, impossible unless B is also white
document.getElementById('result').textContent = "Error: Color A cannot be pure white.";
return;
}
const num = Y - X;
const den = X - W;
const a = 1 - num / den;
if (alpha === null) {
alpha = a;
} else if (Math.abs(alpha - a) > 0.001) {
document.getElementById('result').textContent = "Error: No consistent opacity exists for these two colors.";
return;
}
}
if (alpha <= 0 || alpha >= 1) {
document.getElementById('result').textContent = `Error: Opacity α = ${alpha.toFixed(4)} is out of valid range (0 < α < 1).`;
return;
}
// Now compute base color C from first equation
for (const channel of ['r','g','b']) {
const A = colA[channel];
C[channel] = (A - (1 - alpha) * W) / alpha;
// Clamp just in case of floating point issues
C[channel] = Math.max(0, Math.min(255, C[channel]));
}
const hex = rgbToHex(C.r, C.g, C.b);
const opacity = alpha.toFixed(4).replace(/0+$/,'').replace(/\.$/,'') || '0';
// Display results
document.getElementById('result').innerHTML = `
<strong>Result Color C with opacity:</strong><br>
Hex + opacity: <code>${hex}, ${opacity}</code><br>
rgba: <code>rgba(${Math.round(C.r)}, ${Math.round(C.g)}, ${Math.round(C.b)}, ${opacity})</code>
`;
// Update preview boxes
document.getElementById('singleLayer').style.background = `rgba(${C.r},${C.g},${C.b},${alpha})`;
document.getElementById('doubleLayer').style.background =
`linear-gradient(to bottom, rgba(${C.r},${C.g},${C.b},${alpha}) 0%, rgba(${C.r},${C.g},${C.b},${alpha}) 100%),
rgba(${C.r},${C.g},${C.b},${alpha})`; // simulate two layers
document.getElementById('doubleLayer').style.backgroundColor = 'white';
document.getElementById('doubleLayer').style.backgroundBlendMode = 'normal';
// Actually better: two real divs would be perfect, but for simplicity:
document.getElementById('doubleLayer').style.background =
`rgba(${C.r},${C.g},${C.b},${alpha})`;
document.getElementById('doubleLayer').style.backgroundImage =
`linear-gradient(rgba(${C.r},${C.g},${C.b},${alpha}), rgba(${C.r},${C.g},${C.b},${alpha}))`;
document.getElementById('doubleLayer').style.backgroundColor = 'white';
// Correct way: use multiple background
document.getElementById('doubleLayer').style.background =
`rgba(${C.r},${C.g},${C.b},${alpha}), rgba(${C.r},${C.g},${C.b},${alpha}), white`;
document.getElementById('targetColor').style.background = hex;
}
// Initial calculation + live update
document.getElementById('colorA').addEventListener('input', calculate);
document.getElementById('colorB').addEventListener('input', calculate);
window.addEventListener('load', calculate);
</script>
</body>
</html>代码： 全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Layer Calculator</title>
<style>
:root {
--bg-color: #f4f4f9;
--card-bg: #ffffff;
--primary: #6c5ce7;
--text: #2d3436;
--border: #dfe6e9;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-color);
color: var(--text);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: var(--card-bg);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
width: 100%;
max-width: 500px;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--primary);
}
.input-group {
margin-bottom: 1.2rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
}
.input-wrapper {
display: flex;
gap: 10px;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 1px solid var(--border);
border-radius: 6px;
font-family: monospace;
font-size: 1rem;
}
input[type="color"] {
width: 50px;
height: 42px;
border: none;
background: none;
cursor: pointer;
}
button {
width: 100%;
padding: 12px;
background-color: var(--primary);
color: white;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
margin-top: 1rem;
}
button:hover {
background-color: #5b4cc4;
}
.result-section {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 2px dashed var(--border);
display: none; /* Hidden by default */
}
.result-row {
margin-bottom: 1rem;
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
border-left: 4px solid var(--primary);
}
.result-label {
font-size: 0.8rem;
color: #636e72;
margin-bottom: 4px;
display: block;
}
.code-block {
font-family: monospace;
font-size: 1.1rem;
word-break: break-all;
user-select: all;
}
/* Visualization Styles */
.visual-check {
margin-top: 1.5rem;
}
.visual-title {
font-size: 0.9rem;
font-weight: bold;
text-align: center;
margin-bottom: 10px;
}
.comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.comp-box {
display: flex;
flex-direction: column;
align-items: center;
}
.swatch-container {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #ddd;
position: relative;
overflow: hidden;
background-color: white; /* Important: Base is white */
margin-bottom: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.swatch-label {
font-size: 0.75rem;
text-align: center;
color: #636e72;
}
/* Classes for dynamic coloring */
.layer {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.error-msg {
color: #d63031;
text-align: center;
margin-top: 1rem;
font-size: 0.9rem;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>Opacity Layer Calculator</h1>
<div class="input-group">
<label>Color A (1 Layer Result)</label>
<div class="input-wrapper">
<input type="text" id="inputA" placeholder="#fc87de or rgb(252, 135, 222)" value="#fc87de">
<input type="color" id="pickerA" value="#fc87de">
</div>
</div>
<div class="input-group">
<label>Color B (2 Layers Result)</label>
<div class="input-wrapper">
<input type="text" id="inputB" placeholder="#e050b0" value="#e050b0">
<input type="color" id="pickerB" value="#e050b0">
</div>
</div>
<button onclick="calculate()">Calculate Color C</button>
<p id="errorMsg" class="error-msg"></p>
<div class="result-section" id="resultSection">
<h3>Calculated Color C</h3>
<div class="result-row">
<span class="result-label">Format 1 (Hex + Opacity)</span>
<div class="code-block" id="resHex"></div>
</div>
<div class="result-row">
<span class="result-label">Format 2 (RGBA)</span>
<div class="code-block" id="resRgba"></div>
</div>
<div class="visual-check">
<div class="visual-title">Visual Verification (on White BG)</div>
<div class="comparison-grid">
<div class="comp-box">
<div class="swatch-container">
<div class="layer" style="background: linear-gradient(90deg, var(--color-a) 50%, transparent 50%); z-index: 2;"></div>
<div class="layer" style="background-color: var(--color-c); opacity: var(--opacity-val); left: 50%;"></div>
</div>
<div class="swatch-label">Target A vs.<br>1 Layer C</div>
</div>
<div class="comp-box">
<div class="swatch-container">
<div class="layer" style="background: linear-gradient(90deg, var(--color-b) 50%, transparent 50%); z-index: 2;"></div>
<div class="layer" style="background-color: var(--color-c); opacity: var(--opacity-val); left: 50%;"></div>
<div class="layer" style="background-color: var(--color-c); opacity: var(--opacity-val); left: 50%;"></div>
</div>
<div class="swatch-label">Target B vs.<br>2 Layers C</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Sync Text inputs and Color Pickers
function syncInputs(textId, pickerId) {
const textInput = document.getElementById(textId);
const picker = document.getElementById(pickerId);
textInput.addEventListener('input', () => {
if (/^#[0-9A-F]{6}$/i.test(textInput.value)) {
picker.value = textInput.value;
}
});
picker.addEventListener('input', () => {
textInput.value = picker.value;
});
}
syncInputs('inputA', 'pickerA');
syncInputs('inputB', 'pickerB');
// Helper: Parse color string to [r, g, b]
function parseColor(str) {
const ctx = document.createElement('canvas').getContext('2d');
ctx.fillStyle = str;
const fill = ctx.fillStyle; // formatting to hex or rgb
// If browser returns hex
if (fill.startsWith('#')) {
const r = parseInt(fill.slice(1, 3), 16);
const g = parseInt(fill.slice(3, 5), 16);
const b = parseInt(fill.slice(5, 7), 16);
return [r, g, b];
}
// If browser returns rgb()
else if (fill.startsWith('rgb')) {
return fill.match(/\d+/g).map(Number);
}
return null;
}
// Helper: Convert component to Hex
function componentToHex(c) {
const hex = Math.round(c).toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function calculate() {
const strA = document.getElementById('inputA').value;
const strB = document.getElementById('inputB').value;
const errorEl = document.getElementById('errorMsg');
const resultSection = document.getElementById('resultSection');
errorEl.style.display = 'none';
resultSection.style.display = 'none';
const rgbA = parseColor(strA);
const rgbB = parseColor(strB);
if (!rgbA || !rgbB) {
errorEl.innerText = "Invalid color format. Please use Hex (#RRGGBB) or RGB (rgb(r,g,b)).";
errorEl.style.display = 'block';
return;
}
// --- MATH LOGIC ---
// Let W = 255 (White)
// Eq 1: A = C*alpha + W*(1-alpha)
// Eq 2: B = C*alpha + A*(1-alpha) (Applying C on top of A)
// From Eq 2 => B = C*alpha + A - A*alpha
// From Eq 1 => C*alpha = A - W + W*alpha
// Substitute C*alpha in Eq 2:
// B = (A - W + W*alpha) + A - A*alpha
// B = 2A - W + alpha(W - A)
// B - 2A + W = alpha(W - A)
// alpha = (W + B - 2A) / (W - A)
// We calculate alpha for R, G, and B channels.
// We select the channel with the largest difference from white (W-A) to minimize division errors.
let bestAlpha = 0;
let maxDiff = -1;
const W = 255;
for (let i = 0; i < 3; i++) {
const diff = Math.abs(W - rgbA[i]);
if (diff > maxDiff) {
maxDiff = diff;
// Avoid division by zero if color is pure white
if (diff > 0) {
const calculatedAlpha = (W + rgbB[i] - 2 * rgbA[i]) / (W - rgbA[i]);
bestAlpha = calculatedAlpha;
}
}
}
// Validation
if (maxDiff === 0) {
errorEl.innerText = "Color A cannot be pure white (result is mathematically undefined).";
errorEl.style.display = 'block';
return;
}
if (bestAlpha <= 0 || bestAlpha > 1) {
errorEl.innerText = `Mathematical impossibility with these colors. Calculated Alpha: ${bestAlpha.toFixed(2)}. (A must be lighter than B, and B must be darker than A).`;
errorEl.style.display = 'block';
return;
}
// Calculate Color C using Eq 1: C = (A - W(1-alpha)) / alpha
const rgbC = [];
for (let i = 0; i < 3; i++) {
let val = (rgbA[i] - W * (1 - bestAlpha)) / bestAlpha;
// Clamp to 0-255 to handle minor rounding errors or slight color mismatch
val = Math.max(0, Math.min(255, val));
rgbC.push(val);
}
// --- OUTPUT GENERATION ---
// 1. Hex + Opacity string
const hexC = "#" + componentToHex(rgbC[0]) + componentToHex(rgbC[1]) + componentToHex(rgbC[2]);
const roundedAlpha = parseFloat(bestAlpha.toFixed(3)); // Clean format (e.g. 0.7)
const format1 = `${hexC}, ${roundedAlpha}`;
// 2. RGBA string
const rgbaStr = `rgba(${Math.round(rgbC[0])}, ${Math.round(rgbC[1])}, ${Math.round(rgbC[2])}, ${roundedAlpha})`;
// Update UI
document.getElementById('resHex').innerText = format1;
document.getElementById('resRgba').innerText = rgbaStr;
// Update CSS Variables for visualization
const root = document.documentElement;
// Re-construct CSS acceptable strings for the visualizer
root.style.setProperty('--color-a', `rgb(${rgbA.join(',')})`);
root.style.setProperty('--color-b', `rgb(${rgbB.join(',')})`);
root.style.setProperty('--color-c', `rgb(${rgbC.join(',')})`);
root.style.setProperty('--opacity-val', roundedAlpha);
resultSection.style.display = 'block';
}
</script>
</body>
</html>https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做一個動畫
代码： 全选
<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480" rfm="repeat"> <defs mode="0" rotatestep="0" rotatestart="0" stepvalue="60" snapto="0" displaywait="1"> <g id="tile0" frontfill="#0d9bc3" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.301" fill="#0d9bc3" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g><g id="tile1" frontfill="#0d9bc3" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.301" fill="#0d9bc3" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g><g id="tile2" frontfill="#0d9bc3" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="-93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
<circle fill="black" cy="-93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.301" fill="#0d9bc3" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="62.354;62.354;33.415;33.415;62.354"/>
</circle>
</g>
<g id="tile3" frontfill="#0d9bc3" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.301" fill="#0d9bc3" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g><g id="tile4" frontfill="#0d9bc3" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.301" fill="#0d9bc3" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g><g id="tile5" frontfill="#0d9bc3" backfill="#2691c0"><path opacity="0" d="M 12,12 L -11,11 L -10,-10 L 9,-9 Z"/>
<mask id="tmmask">
<circle fill="white" cy="240" cx="240" r="1200"/>
<circle fill="black" cy="0" cx="-108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="0" cx="108" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="-93.531" cx="-54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
<circle fill="black" cy="-93.531" cx="54" r="12" stroke="none"><animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/></circle>
</mask>
<circle mask="url(#tmmask)" opacity="0.301" fill="#0d9bc3" cy="0" cx="0" r="12" stroke="none">
<animate attributeName="r" repeatCount="indefinite" dur="4s" values="33.415;33.415;62.354;62.354;33.415"/>
</circle>
</g></defs>
<g class="etdrop" transform="translate(48,48) scale(0.8,0.8)" stroke="#777" stroke-width="2" stroke-linejoin="round" id="etanidrop">
<g class="etboard">
<circle fill="white" cy="240" cx="240" r="1200"/>
<g id="theunit">
<use href="#tile0" fill="#0d9bc3" transform="translate(240,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile1" fill="#0d9bc3" transform="translate(132,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile2" fill="#0d9bc3" transform="translate(186,146.46) scale(1,1) rotate(0)" class="tiledropped"/>
</g>
<use href="#theunit" transform="rotate(60,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(120,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(180,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(240,240,240)" class="tiledropped"/>
<use href="#theunit" transform="rotate(300,240,240)" class="tiledropped"/>
<g id="theunit2" transform="rotate(30,240,240)">
<use href="#tile3" fill="#0d9bc3" transform="translate(240,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile4" fill="#0d9bc3" transform="translate(132,52.939) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile5" fill="#0d9bc3" transform="translate(186,146.46) scale(1,1) rotate(0)" class="tiledropped"/>
</g>
<use href="#theunit2" transform="rotate(60,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(120,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(180,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(240,240,240)" class="tiledropped"/>
<use href="#theunit2" transform="rotate(300,240,240)" class="tiledropped"/>
</g>
<use href="#tile2" fill="#0d9bc3" transform="translate(240,240) scale(1,1) rotate(0)" class="tiledropped"/>
<use href="#tile5" fill="#0d9bc3" transform="translate(240,240) scale(1,1) rotate(30)" class="tiledropped"/></g></svg>
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
在线用户
正浏览此版面之用户： Google [Bot] 和 10 访客