Редактор переходов CSS

Бесплатная загрузка редактора переходов CSS в HTML, CSS и JavaScript

HTML:

<aside>
<form id="app">
<button type="button" id="play">Re-Play</button>
<fieldset name="demo">
<legend>CSS Transition Editor</legend>
<label>
Transition
<select>
<option value="">none</option>
<optgroup label="fade">
<option value="trs-fdd">fade-down</option>
<option value="trs-fdl">fade-down-left</option>
<option value="trs-fdr">fade-down-right</option>
<option value="trs-fal">fade-left</option>
<option value="trs-far">fade-right</option>
<option value="trs-fau">fade-up</option>
<option value="trs-ful">fade-up-left</option>
<option value="trs-fur">fade-up-right</option>
</optgroup>
<optgroup label="flip">
<option value="trs-fld">flip-down</option>
<option value="trs-fll">flip-left</option>
<option value="trs-flr">flip-right</option>
<option value="trs-flu">flip-up</option>
</optgroup>
<optgroup label="zoom">
<option value="trs-zoi">zoom-in</option>
<option value="trs-zod">zoom-in-down</option>
<option value="trs-ziu">zoom-in-up</option>
<option value="trs-zoo">zoom-out</option>
</optgroup>
</select>
</label>
<label>
Easing
<select>
<optgroup label="ease">
<option value="trstf-eas-1" selected>ease-1</option>
<option value="trstf-eas-2">ease-2</option>
<option value="trstf-eas-3">ease-3</option>
<option value="trstf-eas-4">ease-4</option>
<option value="trstf-eas-5">ease-5</option>
</optgroup>
<optgroup label="ease-in">
<option value="trstf-eai-1">ease-in-1</option>
<option value="trstf-eai-2">ease-in-2</option>
<option value="trstf-eai-3">ease-in-3</option>
<option value="trstf-eai-4">ease-in-4</option>
<option value="trstf-eai-5">ease-in-5</option>
</optgroup>
<optgroup label="ease-out">
<option value="trstf-eao-1">ease-out-1</option>
<option value="trstf-eao-2">ease-out-2</option>
<option value="trstf-eao-3">ease-out-3</option>
<option value="trstf-eao-4">ease-out-4</option>
<option value="trstf-eao-5">ease-out-5</option>
</optgroup>
<optgroup label="ease-in-out">
<option value="trstf-eio-1">ease-in-out-1</option>
<option value="trstf-eio-2">ease-in-out-2</option>
<option value="trstf-eio-3">ease-in-out-3</option>
<option value="trstf-eio-4">ease-in-out-4</option>
<option value="trstf-eio-5">ease-in-out-5</option>
</optgroup>
<optgroup label="ease-elastic">
<option value="trstf-eel-1">ease-elastic-1</option>
<option value="trstf-eel-2">ease-elastic-2</option>
<option value="trstf-eel-3">ease-elastic-3</option>
<option value="trstf-eel-4">ease-elastic-4</option>
<option value="trstf-eel-5">ease-elastic-5</option>
</optgroup>
<optgroup label="ease-squish">
<option value="trstf-esq-1">ease-squish-1</option>
<option value="trstf-esq-2">ease-squish-2</option>
<option value="trstf-esq-3">ease-squish-3</option>
<option value="trstf-esq-4">ease-squish-4</option>
<option value="trstf-esq-5">ease-squish-5</option>
</optgroup>
<option>linear</option>
</select>
</label>
<label>
Duration
<select>
<option value="trsdu-100">100ms</option>
<option value="trsdu-200">200ms</option>
<option value="trsdu-300">300ms</option>
<option value="trsdu-400" selected>400ms</option>
<option value="trsdu-500">500ms</option>
<option value="trsdu-750">750ms</option>
<option value="trsdu-1000">1000ms</option>
<option value="trsdu-1500">1500ms</option>
<option value="trsdu-2000">2000ms</option>
</select>
</label>
<label>
Delay
<select>
<option value="trsde-0" selected>0ms</option>
<option value="trsde-25">25ms</option>
<option value="trsde-50">50ms</option>
<option value="trsde-75">75ms</option>
<option value="trsde-100">100ms</option>
<option value="trsde-150">150ms</option>
<option value="trsde-250">250ms</option>
<option value="trsde-500">500ms</option>
<option value="trsde-750">750ms</option>
<option value="trsde-1000">1000ms</option>
<option value="trsde-1500">1500ms</option>
<option value="trsde-2000">2000ms</option>
</select>
</label>
</fieldset>
<fieldset name="demo1">
<legend>Child 1</legend>
<label>
Transition
<select>
<option value="">none</option>
<optgroup label="fade">
<option value="trs-fdd">fade-down</option>
<option value="trs-fdl">fade-down-left</option>
<option value="trs-fdr">fade-down-right</option>
<option value="trs-fal">fade-left</option>
<option value="trs-far">fade-right</option>
<option value="trs-fau">fade-up</option>
<option value="trs-ful">fade-up-left</option>
<option value="trs-fur">fade-up-right</option>
</optgroup>
<optgroup label="flip">
<option value="trs-fld">flip-down</option>
<option value="trs-fll">flip-left</option>
<option value="trs-flr">flip-right</option>
<option value="trs-flu">flip-up</option>
</optgroup>
<optgroup label="zoom">
<option value="trs-zoi">zoom-in</option>
<option value="trs-zod">zoom-in-down</option>
<option value="trs-ziu">zoom-in-up</option>
<option value="trs-zoo">zoom-out</option>
</optgroup>
</select>
</label>
<label>
Easing
<select>
<option value="" selected>inherit</option>
<optgroup label="ease">
<option value="trstf-eas-1">ease-1</option>
<option value="trstf-eas-2">ease-2</option>
<option value="trstf-eas-3">ease-3</option>
<option value="trstf-eas-4">ease-4</option>
<option value="trstf-eas-5">ease-5</option>
</optgroup>
<optgroup label="ease-in">
<option value="trstf-eai-1">ease-in-1</option>
<option value="trstf-eai-2">ease-in-2</option>
<option value="trstf-eai-3">ease-in-3</option>
<option value="trstf-eai-4">ease-in-4</option>
<option value="trstf-eai-5">ease-in-5</option>
</optgroup>
<optgroup label="ease-out">
<option value="trstf-eao-1">ease-out-1</option>
<option value="trstf-eao-2">ease-out-2</option>
<option value="trstf-eao-3">ease-out-3</option>
<option value="trstf-eao-4">ease-out-4</option>
<option value="trstf-eao-5">ease-out-5</option>
</optgroup>
<optgroup label="ease-in-out">
<option value="trstf-eio-1">ease-in-out-1</option>
<option value="trstf-eio-2">ease-in-out-2</option>
<option value="trstf-eio-3">ease-in-out-3</option>
<option value="trstf-eio-4">ease-in-out-4</option>
<option value="trstf-eio-5">ease-in-out-5</option>
</optgroup>
<optgroup label="ease-elastic">
<option value="trstf-eel-1">ease-elastic-1</option>
<option value="trstf-eel-2">ease-elastic-2</option>
<option value="trstf-eel-3">ease-elastic-3</option>
<option value="trstf-eel-4">ease-elastic-4</option>
<option value="trstf-eel-5">ease-elastic-5</option>
</optgroup>
<optgroup label="ease-squish">
<option value="trstf-esq-1">ease-squish-1</option>
<option value="trstf-esq-2">ease-squish-2</option>
<option value="trstf-esq-3">ease-squish-3</option>
<option value="trstf-esq-4">ease-squish-4</option>
<option value="trstf-esq-5">ease-squish-5</option>
</optgroup>
<option>linear</option>
</select>
</label>
<label>
Duration
<select>
<option value="" selected>inherit</option>
<option value="trsdu-100">100ms</option>
<option value="trsdu-200">200ms</option>
<option value="trsdu-300">300ms</option>
<option value="trsdu-400">400ms</option>
<option value="trsdu-500">500ms</option>
<option value="trsdu-750">750ms</option>
<option value="trsdu-1000">1000ms</option>
<option value="trsdu-1500">1500ms</option>
<option value="trsdu-2000">2000ms</option>
</select>
</label>
<label>
Delay
<select>
<option value="trsde-0" selected>0ms</option>
<option value="trsde-25">25ms</option>
<option value="trsde-50">50ms</option>
<option value="trsde-75">75ms</option>
<option value="trsde-100">100ms</option>
<option value="trsde-150">150ms</option>
<option value="trsde-250">250ms</option>
<option value="trsde-500">500ms</option>
<option value="trsde-750">750ms</option>
<option value="trsde-1000">1000ms</option>
<option value="trsde-1500">1500ms</option>
<option value="trsde-2000">2000ms</option>
</select>
</label>
</fieldset>
<fieldset name="demo2">
<legend>Child 2</legend>
<label>
Transition
<select>
<option value="">none</option>
<optgroup label="fade">
<option value="trs-fdd">fade-down</option>
<option value="trs-fdl">fade-down-left</option>
<option value="trs-fdr">fade-down-right</option>
<option value="trs-fal">fade-left</option>
<option value="trs-far">fade-right</option>
<option value="trs-fau">fade-up</option>
<option value="trs-ful">fade-up-left</option>
<option value="trs-fur">fade-up-right</option>
</optgroup>
<optgroup label="flip">
<option value="trs-fld">flip-down</option>
<option value="trs-fll">flip-left</option>
<option value="trs-flr">flip-right</option>
<option value="trs-flu">flip-up</option>
</optgroup>
<optgroup label="zoom">
<option value="trs-zoi">zoom-in</option>
<option value="trs-zod">zoom-in-down</option>
<option value="trs-ziu">zoom-in-up</option>
<option value="trs-zoo">zoom-out</option>
</optgroup>
</select>
</label>
<label>
Easing
<select>
<option value="" selected>inherit</option>
<optgroup label="ease">
<option value="trstf-eas-1">ease-1</option>
<option value="trstf-eas-2">ease-2</option>
<option value="trstf-eas-3">ease-3</option>
<option value="trstf-eas-4">ease-4</option>
<option value="trstf-eas-5">ease-5</option>
</optgroup>
<optgroup label="ease-in">
<option value="trstf-eai-1">ease-in-1</option>
<option value="trstf-eai-2">ease-in-2</option>
<option value="trstf-eai-3">ease-in-3</option>
<option value="trstf-eai-4">ease-in-4</option>
<option value="trstf-eai-5">ease-in-5</option>
</optgroup>
<optgroup label="ease-out">
<option value="trstf-eao-1">ease-out-1</option>
<option value="trstf-eao-2">ease-out-2</option>
<option value="trstf-eao-3">ease-out-3</option>
<option value="trstf-eao-4">ease-out-4</option>
<option value="trstf-eao-5">ease-out-5</option>
</optgroup>
<optgroup label="ease-in-out">
<option value="trstf-eio-1">ease-in-out-1</option>
<option value="trstf-eio-2">ease-in-out-2</option>
<option value="trstf-eio-3">ease-in-out-3</option>
<option value="trstf-eio-4">ease-in-out-4</option>
<option value="trstf-eio-5">ease-in-out-5</option>
</optgroup>
<optgroup label="ease-elastic">
<option value="trstf-eel-1">ease-elastic-1</option>
<option value="trstf-eel-2">ease-elastic-2</option>
<option value="trstf-eel-3">ease-elastic-3</option>
<option value="trstf-eel-4">ease-elastic-4</option>
<option value="trstf-eel-5">ease-elastic-5</option>
</optgroup>
<optgroup label="ease-squish">
<option value="trstf-esq-1">ease-squish-1</option>
<option value="trstf-esq-2">ease-squish-2</option>
<option value="trstf-esq-3">ease-squish-3</option>
<option value="trstf-esq-4">ease-squish-4</option>
<option value="trstf-esq-5">ease-squish-5</option>
</optgroup>
<option>linear</option>
</select>
</label>
<label>
Duration
<select>
<option value="" selected>inherit</option>
<option value="trsdu-100">100ms</option>
<option value="trsdu-200">200ms</option>
<option value="trsdu-300">300ms</option>
<option value="trsdu-400">400ms</option>
<option value="trsdu-500">500ms</option>
<option value="trsdu-750">750ms</option>
<option value="trsdu-1000">1000ms</option>
<option value="trsdu-1500">1500ms</option>
<option value="trsdu-2000">2000ms</option>
</select>
</label>
<label>
Delay
<select>
<option value="trsde-0" selected>0ms</option>
<option value="trsde-25">25ms</option>
<option value="trsde-50">50ms</option>
<option value="trsde-75">75ms</option>
<option value="trsde-100">100ms</option>
<option value="trsde-150">150ms</option>
<option value="trsde-250">250ms</option>
<option value="trsde-500">500ms</option>
<option value="trsde-750">750ms</option>
<option value="trsde-1000">1000ms</option>
<option value="trsde-1500">1500ms</option>
<option value="trsde-2000">2000ms</option>
</select>
</label>
</fieldset>
<fieldset name="demo3">
<legend>Child 3</legend>
<label>
Transition
<select>
<option value="">none</option>
<optgroup label="fade">
<option value="trs-fdd">fade-down</option>
<option value="trs-fdl">fade-down-left</option>
<option value="trs-fdr">fade-down-right</option>
<option value="trs-fal">fade-left</option>
<option value="trs-far">fade-right</option>
<option value="trs-fau">fade-up</option>
<option value="trs-ful">fade-up-left</option>
<option value="trs-fur">fade-up-right</option>
</optgroup>
<optgroup label="flip">
<option value="trs-fld">flip-down</option>
<option value="trs-fll">flip-left</option>
<option value="trs-flr">flip-right</option>
<option value="trs-flu">flip-up</option>
</optgroup>
<optgroup label="zoom">
<option value="trs-zoi">zoom-in</option>
<option value="trs-zod">zoom-in-down</option>
<option value="trs-ziu">zoom-in-up</option>
<option value="trs-zoo">zoom-out</option>
</optgroup>
</select>
</label>
<label>
Easing
<select>
<option value="" selected>inherit</option>
<optgroup label="ease">
<option value="trstf-eas-1">ease-1</option>
<option value="trstf-eas-2">ease-2</option>
<option value="trstf-eas-3">ease-3</option>
<option value="trstf-eas-4">ease-4</option>
<option value="trstf-eas-5">ease-5</option>
</optgroup>
<optgroup label="ease-in">
<option value="trstf-eai-1">ease-in-1</option>
<option value="trstf-eai-2">ease-in-2</option>
<option value="trstf-eai-3">ease-in-3</option>
<option value="trstf-eai-4">ease-in-4</option>
<option value="trstf-eai-5">ease-in-5</option>
</optgroup>
<optgroup label="ease-out">
<option value="trstf-eao-1">ease-out-1</option>
<option value="trstf-eao-2">ease-out-2</option>
<option value="trstf-eao-3">ease-out-3</option>
<option value="trstf-eao-4">ease-out-4</option>
<option value="trstf-eao-5">ease-out-5</option>
</optgroup>
<optgroup label="ease-in-out">
<option value="trstf-eio-1">ease-in-out-1</option>
<option value="trstf-eio-2">ease-in-out-2</option>
<option value="trstf-eio-3">ease-in-out-3</option>
<option value="trstf-eio-4">ease-in-out-4</option>
<option value="trstf-eio-5">ease-in-out-5</option>
</optgroup>
<optgroup label="ease-elastic">
<option value="trstf-eel-1">ease-elastic-1</option>
<option value="trstf-eel-2">ease-elastic-2</option>
<option value="trstf-eel-3">ease-elastic-3</option>
<option value="trstf-eel-4">ease-elastic-4</option>
<option value="trstf-eel-5">ease-elastic-5</option>
</optgroup>
<optgroup label="ease-squish">
<option value="trstf-esq-1">ease-squish-1</option>
<option value="trstf-esq-2">ease-squish-2</option>
<option value="trstf-esq-3">ease-squish-3</option>
<option value="trstf-esq-4">ease-squish-4</option>
<option value="trstf-esq-5">ease-squish-5</option>
</optgroup>
<option>linear</option>
</select>
</label>
<label>
Duration
<select>
<option value="" selected>inherit</option>
<option value="trsdu-100">100ms</option>
<option value="trsdu-200">200ms</option>
<option value="trsdu-300">300ms</option>
<option value="trsdu-400">400ms</option>
<option value="trsdu-500">500ms</option>
<option value="trsdu-750">750ms</option>
<option value="trsdu-1000">1000ms</option>
<option value="trsdu-1500">1500ms</option>
<option value="trsdu-2000">2000ms</option>
</select>
</label>
<label>
Delay
<select>
<option value="trsde-0" selected>0ms</option>
<option value="trsde-25">25ms</option>
<option value="trsde-50">50ms</option>
<option value="trsde-75">75ms</option>
<option value="trsde-100">100ms</option>
<option value="trsde-150">150ms</option>
<option value="trsde-250">250ms</option>
<option value="trsde-500">500ms</option>
<option value="trsde-750">750ms</option>
<option value="trsde-1000">1000ms</option>
<option value="trsde-1500">1500ms</option>
<option value="trsde-2000">2000ms</option>
</select>
</label>
</fieldset>
<fieldset>
<legend>Variables</legend>
<label>
Zoom-in
<input type="number" name="--zi" value="0.6" step="0.1" min="0.1" max="1" />
</label>
<label>
Zoom-out
<input type="number" name="--zo" value="1.2" step="0.1" min="1" max="5" />
</label>
<label>
Translate X
<input type="number" name="--tx" value="55" step="1" min="1" max="999" data-suffix="px" />
</label>
<label>
Translate Y
<input type="number" name="--ty" value="110" step="1" min="1" max="999" data-suffix="px" />
</label>
</fieldset>
</form>
</aside>
<main>
<div id="demo">
<div id="demo1">
<img src="https://assets.stoumann.dk/img/color.jpg" />
</div>
<div id="demo2">
<img src="https://assets.stoumann.dk/img/gallery01.jpg" />
</div>
<div id="demo3">
<img src="https://assets.stoumann.dk/img/gallery04.jpg" />
</div>
</div>
<p><strong>How to use:</strong> Select a transition for the main wrapper or one of it's child-elements. Try to play around with individual transitions, easings, durations and delays.<br />
At the bottom of the sidebar, you can edit <em>custom properties</em> for finer control of offset- and zoom-transitions.
</p>
<details>
<summary>See code</summary>
<pre id="code">Code here ...</pre>
</details>
</main>

Вас также может заинтересовать загрузка: 3D RotateText Hover menu (gsap) в HTML, CSS и JavaScript

CSS:

/**
* Transition Module
* @version 1.0.35
* @summary 09-05-2022
* @author Mads Stoumann
* @description Using `data-trs` attribute to handle transitions.
* Credits to AOS: https://michalsnik.github.io/aos/ and Open Props: https://open-props.style/
* Abbreviations:
* .trs-: transition-name
* .trsde-: transition-delay
* .trsdu-: transition-duration
* .trstf-: transition-timing-function (easing)
* To trigger a transition, add the class `trs` to the element.
* You should only add the class to the *outermost* element with a `trs-`, children will be animated automatically.
*/
@import 'https://unpkg.com/[email protected]/src/props.easing.css';
:where([class*="trs-"]) {
--dg: 100deg;
--tx: 55px;
--ty: 110px;
--zi: 0.6;
--zo: 1.2;
}
:is([class*="trs-"].trs) {
opacity: 1;
transform: translateZ(0) scale(1);
transition: all var(--duration, 400ms) var(--delay, 0ms) var(--easing, var(--ease-1, ease));
}
:is(.trs [class*="trs-"]) {
opacity: 1;
transform: translateZ(0);
transition-timing-function: var(--easing, ease-in-out);
transition-delay: var(--delay, 0ms);
transition-duration: var(--duration, 400ms);
}
/* .trs .trs-fld { transform: perspective(2500px) rotate(0deg); } */
/* TRANSITIONS */
/* FADE */
.trs-fdd { opacity: 0; transform: translate3d(0px, calc(-1 * var(--ty)), 0); }
.trs-fdl { opacity: 0; transform: translate3d(calc(-1 * var(--tx)), calc(-1 * var(--ty)), 0); }
.trs-fdr { opacity: 0; transform: translate3d(var(--tx), calc(-1 * var(--ty)), 0); }
.trs-fal { opacity: 0; transform: translate3d(calc(-1 * var(--tx)), 0px, 0); }
.trs-far { opacity: 0; transform: translate3d(var(--tx), 0px, 0); }
.trs-fau { opacity: 0; transform: translate3d(0px, var(--ty), 0); }
.trs-ful { opacity: 0; transform: translate3d(calc(-1 * var(--tx)), var(--ty), 0); }
.trs-fur { opacity: 0; transform: translate3d(var(--tx), var(--ty), 0); }
/* FLIP */
.trs-fld { backface-visibility: hidden; transform: perspective(2500px) rotateX(var(--dg)); }
.trs-fll { backface-visibility: hidden; transform: perspective(2500px) rotateY(calc(0deg - var(--dg))); }
.trs-flr { backface-visibility: hidden; transform: perspective(2500px) rotateY(var(--dg)); }
.trs-flu { backface-visibility: hidden; transform: perspective(2500px) rotateX(calc(0deg - var(--dg))); }
/* ZOOM */
.trs-zoi { opacity: 0; transform: scale(var(--zi)); }
.trs-zod { opacity: 0; transform: translate3d(0px, calc(-1 * var(--ty)), 0) scale(var(--zi)); }
.trs-ziu { opacity: 0; transform: translate3d(0px, var(--ty), 0) scale(var(--zi)); }
.trs-zoo { opacity: 0; transform: scale(var(--zo)) ; }
/* DELAYS */
.trsde-0 { --delay: 0ms; }
.trsde-25 { --delay: 25ms; }
.trsde-50 { --delay: 50ms; }
.trsde-75 { --delay: 75ms; }
.trsde-100 { --delay: 100ms; }
.trsde-150 { --delay: 150ms; }
.trsde-250 { --delay: 250ms; }
.trsde-500 { --delay: 500ms; }
.trsde-750 { --delay: 750ms; }
.trsde-1000 { --delay: 1000ms; }
.trsde-1500 { --delay: 1500ms; }
.trsde-2000 { --delay: 2000ms; }
/* DURATIONS */
.trsdu-100 { --duration: 100ms; }
.trsdu-200 { --duration: 200ms; }
.trsdu-300 { --duration: 300ms; }
.trsdu-400 { --duration: 400ms; }
.trsdu-500 { --duration: 500ms; }
.trsdu-750 { --duration: 750ms; }
.trsdu-1000 { --duration: 1000ms; }
.trsdu-1500 { --duration: 1500ms; }
.trsdu-2000 { --duration: 2000ms; }
/* TIMING FUNCTIONS */
.trstf-eas-1 { --easing: var(--ease-1); }
.trstf-eas-2 { --easing: var(--ease-2); }
.trstf-eas-3 { --easing: var(--ease-3); }
.trstf-eas-4 { --easing: var(--ease-4); }
.trstf-eas-5 { --easing: var(--ease-5); }
.trstf-eai-1 { --easing: var(--ease-in-1); }
.trstf-eai-2 { --easing: var(--ease-in-2); }
.trstf-eai-3 { --easing: var(--ease-in-3); }
.trstf-eai-4 { --easing: var(--ease-in-4); }
.trstf-eai-5 { --easing: var(--ease-in-5); }
.trstf-eao-1 { --easing: var(--ease-out-1); }
.trstf-eao-2 { --easing: var(--ease-out-2); }
.trstf-eao-3 { --easing: var(--ease-out-3); }
.trstf-eao-4 { --easing: var(--ease-out-4); }
.trstf-eao-5 { --easing: var(--ease-out-5); }
.trstf-eio-1 { --easing: var(--ease-in-out-1); }
.trstf-eio-2 { --easing: var(--ease-in-out-2); }
.trstf-eio-3 { --easing: var(--ease-in-out-3); }
.trstf-eio-4 { --easing: var(--ease-in-out-4); }
.trstf-eio-5 { --easing: var(--ease-in-out-5); }
.trstf-eel-1 { --easing: var(--ease-elastic-1); }
.trstf-eel-2 { --easing: var(--ease-elastic-2); }
.trstf-eel-3 { --easing: var(--ease-elastic-3); }
.trstf-eel-4 { --easing: var(--ease-elastic-4); }
.trstf-eel-5 { --easing: var(--ease-elastic-5); }
.trstf-esq-1 { --easing: var(--ease-squish-1); }
.trstf-esq-2 { --easing: var(--ease-squish-2); }
.trstf-esq-3 { --easing: var(--easing-squish-3); }
.trstf-esq-4 { --easing: var(--easing-squish-4); }
.trstf-esq-5 { --easing: var(--easing-squish-5); }
.trstf-lin { --easing: linear; }
/* FOR DEMO */
* {
box-sizing: border-box;
}
aside, pre {
background: hsl(210, 99%, 5%);
color: hsl(190, 10%, 90%);
overflow-x: auto;
padding: 1ch;
}
body {
block-size: 100vh;
display: grid;
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: small;
grid-template-columns: 15rem 1fr;
margin: unset;
}
button {
background-color: hsl(210, 99%, 52%);
border: 0;
border-radius: 2em;
color: hsl(210, 99%, 95%);
inline-size: 100%;
margin-block: .5em 1em;
padding: 1em 2em;
}
fieldset {
border: 0;
padding: 1em 0;
}
img {
block-size: 100%;
inset: 0;
object-fit: cover;
position: absolute;
inline-size: 100%;
}
input, select {
border: 0;
border-radius: .25em;
font-size: inherit;
inline-size: 100%;
margin-block: .25em .75em;
padding: .25em .5em;
}
legend {
border-block-end: 1px solid #FFF;
display: block;
inline-size: 100%;
padding-block: .5em;
}
main {
margin: 2em;
overflow: hidden;
}
pre {
tab-size: 2;
}
#demo {
display: grid;
gap: 1em;
}
#demo1 {
aspect-ratio: 16 / 9;
inline-size: 100%;
grid-column: 1 / span 2;
position: relative;
}
#demo2, #demo3 {
aspect-ratio: 16 / 9;
position: relative;
inline-size: 100%;
}
@media (min-width: 768px) {
#demo {
grid-template-columns: repeat(3, 1fr);
}
#demo1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
#demo2, #demo3 {
aspect-ratio: unset;
}
}

JavaScript:

const cleanIt = (code) => code.replace(/<img?.+\n\t/gi,'');
const playIt = () => { demo.classList.remove('trs'); setTimeout(() => { demo.classList.add('trs'); }, 400); code.innerText = cleanIt(demo.outerHTML); }
app.addEventListener('input', event => {
const node = event.target;
if (node.name) {
demo.style.setProperty(node.name, node.value + (node.dataset.suffix||''));
return;
}
const group = node.closest('fieldset');
document.getElementById(group.name).className = [...group.elements].map(input => input.value).join(' ').replace(/ +/g, ' ');
playIt();
})
play.addEventListener('click', () => playIt());\

Фрагменты кода HTML, CSS и JavaScript включены, AllWebCodes.com

Сделанный! И наслаждайтесь фрагментами CSS Transition Editor

Загрузить сейчас