<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
            <span class="token selector">.color-box</span> <span class="token punctuation">{</span>
                <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px #444<span class="token punctuation">;</span>
                <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
                <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
                <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
                <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
                <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
                <span class="token property">background-color</span><span class="token punctuation">:</span> #22aa55<span class="token punctuation">;</span>
                <span class="token property">transition</span><span class="token punctuation">:</span> background-color 300ms ease<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">.color-box:hover</span> <span class="token punctuation">{</span>
                <span class="token property">background-color</span><span class="token punctuation">:</span> #aa4433<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">.moving-box</span> <span class="token punctuation">{</span>
                <span class="token property">transition</span><span class="token punctuation">:</span> transform 1s ease-in-out<span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token selector">:checked + .moving-box</span> <span class="token punctuation">{</span>
                <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>500px<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>moving-box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Check the box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>