Beer Bottle Preloader: уникальный CSS виджет загрузки

See the Pen Beer Bottle Preloader by Jon Kantner (@jkantner) on CodePen.
HTML
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>Beer Bottle Preloader</title><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css"></head><body><!-- partial:index.partial.html --><svg class="pl" viewBox="0 0 128 82" width="128px" height="82px"><symbol id="pl-bottle"><path d="m16.493,26.641c-.494-1.023-1.282-2.025-1.579-2.402-.037-.047-.064-.081-.079-.101-.008-.011-.02-.027-.036-.048-.431-.566-1.154-1.761-1.154-3.399,0-2.129-.174-6.086-.456-8.768-.118-1.127-.233-2.248-.325-3.149-.089-.867-.139-1.359-.171-1.646.192-.24.345-.489.345-.786,0-.144-.04-.358-.266-1.426-.021-.1-.045-.211-.068-.321.093-.066.171-.152.225-.251.177-.325.186-1.539-.115-2.16-.353-.73-1.14-1.184-2.054-1.184h-3.521c-.915,0-1.702.454-2.055,1.184-.302.624-.29,1.838-.112,2.162.054.098.131.183.223.249-.023.108-.046.216-.066.315-.228,1.074-.268,1.289-.268,1.434,0,.299.153.547.346.787-.029.267-.075.712-.153,1.472-.095.928-.218,2.121-.343,3.322-.281,2.693-.456,6.648-.456,8.768,0,1.638-.723,2.832-1.153,3.399-.016.021-.028.037-.036.048-.014.019-.041.053-.078.101-.297.377-1.085,1.379-1.579,2.401-.582,1.204-.512,2.868-.499,3.1.002.737.05,20.319.051,21.504-.072,2.848.333,4.272,1.399,4.911,1.262.783,5.324.844,6.541.844s5.28-.061,6.541-.845c1.066-.639,1.471-2.064,1.398-4.911,0-1.238.05-20.764.052-21.503.013-.233.084-1.897-.498-3.1Z" /></symbol><symbol id="pl-liquid"><path d="m48,56H0V0c3.926,0,4.265,1,8,1,2.016,0,4.44-1,8-1,3.465,0,5.124,1,8,1,3.766,0,4.491-1,8-1,3.601,0,4.706,1,8,1,3.731,0,4.303-1,8-1v56Z" transform="translate(0,2)" /></symbol><defs><clipPath id="pl-bottle-clip"><path d="m16.493,26.641c-.494-1.023-1.282-2.025-1.579-2.402-.037-.047-.064-.081-.079-.101-.008-.011-.02-.027-.036-.048-.431-.566-1.154-1.761-1.154-3.399,0-2.129-.174-6.086-.456-8.768-.118-1.127-.233-2.248-.325-3.149-.089-.867-.139-1.359-.171-1.646.192-.24.345-.489.345-.786,0-.144-.04-.358-.266-1.426-.021-.1-.045-.211-.068-.321.093-.066.171-.152.225-.251.177-.325.186-1.539-.115-2.16-.353-.73-1.14-1.184-2.054-1.184h-3.521c-.915,0-1.702.454-2.055,1.184-.302.624-.29,1.838-.112,2.162.054.098.131.183.223.249-.023.108-.046.216-.066.315-.228,1.074-.268,1.289-.268,1.434,0,.299.153.547.346.787-.029.267-.075.712-.153,1.472-.095.928-.218,2.121-.343,3.322-.281,2.693-.456,6.648-.456,8.768,0,1.638-.723,2.832-1.153,3.399-.016.021-.028.037-.036.048-.014.019-.041.053-.078.101-.297.377-1.085,1.379-1.579,2.401-.582,1.204-.512,2.868-.499,3.1.002.737.05,20.319.051,21.504-.072,2.848.333,4.272,1.399,4.911,1.262.783,5.324.844,6.541.844s5.28-.061,6.541-.845c1.066-.639,1.471-2.064,1.398-4.911,0-1.238.05-20.764.052-21.503.013-.233.084-1.897-.498-3.1Z" /></clipPath></defs><g class="pl__bottles" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(0,24)"><line class="pl__rod" x1="64" y1="-56" x2="64" y2="-24" /><g class="pl__bottle pl__bottle--in"><g transform="translate(-1,0)"><g clip-path="url(#pl-bottle-clip)"><use class="pl__fill pl__fill--half" href="#pl-liquid" transform="translate(0,56)" /></g><use class="pl__bottle-glass" href="#pl-bottle" /><g class="pl__bottle-glare"><line x1="10" y1="9" x2="10.5" y2="21" /><line x1="13" y1="30" x2="13" y2="52" /></g></g><rect class="pl__cap" x="3" y="-23" rx="2" ry="2" width="10" height="4" /></g><g class="pl__bottle" transform="translate(28,0)"><g transform="translate(-1,0)"><g clip-path="url(#pl-bottle-clip)"><use class="pl__fill pl__fill--full" href="#pl-liquid" transform="translate(0,32)" /></g><use class="pl__bottle-glass" href="#pl-bottle" /><g class="pl__bottle-glare"><line x1="10" y1="9" x2="10.5" y2="21" /><line x1="13" y1="30" x2="13" y2="52" /></g></g><rect class="pl__cap" x="3" y="-23" rx="2" ry="2" width="10" height="4" /></g><g class="pl__bottle pl__bottle--bounce" transform="translate(56,0)"><g transform="translate(-1,0)"><g clip-path="url(#pl-bottle-clip)"><use class="pl__fill pl__fill--startle1" href="#pl-liquid" transform="translate(0,8)" /></g><use class="pl__bottle-glass" href="#pl-bottle" /><g class="pl__bottle-glare"><line x1="10" y1="9" x2="10.5" y2="21" /><line x1="13" y1="30" x2="13" y2="52" /></g></g><rect class="pl__cap pl__cap--on" x="3" y="-23" rx="2" ry="2" width="10" height="4" /></g><g class="pl__bottle pl__bottle--out" transform="translate(84,0)"><g transform="translate(-1,0)"><g clip-path="url(#pl-bottle-clip)"><use class="pl__fill pl__fill--startle2" href="#pl-liquid" transform="translate(0,8)" /></g><use class="pl__bottle-glass" href="#pl-bottle" /><g class="pl__bottle-glare"><line x1="10" y1="9" x2="10.5" y2="21" /><line x1="13" y1="30" x2="13" y2="52" /></g></g><rect class="pl__cap" x="3" y="0" rx="2" ry="2" width="10" height="4" /></g><g class="pl__bottle" transform="translate(112,0)"><g transform="translate(-1,0)"><g clip-path="url(#pl-bottle-clip)"><use class="pl__fill" href="#pl-liquid" transform="translate(0,8)" /></g><use class="pl__bottle-glass" href="#pl-bottle" /><g class="pl__bottle-glare"><line x1="10" y1="9" x2="10.5" y2="21" /><line x1="13" y1="30" x2="13" y2="52" /></g></g><rect class="pl__cap" x="3" y="0" rx="2" ry="2" width="10" height="4" /></g></g></svg><!-- partial --></body></html>
CSS
* {border: 0;box-sizing: border-box;margin: 0;padding: 0;}:root {--hue: 223;--bg: hsl(var(--hue),10%,80%);--fg: hsl(var(--hue),10%,10%);--trans-dur: 0.3s;font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));}body {background-color: var(--bg);color: var(--fg);display: flex;font: 1em/1.5 sans-serif;height: 100vh;transition:background-color var(--trans-dur),color var(--trans-dur);}.pl {display: block;margin: auto;width: 16em;height: auto;}.pl__bottles,.pl__bottle--bounce,.pl__bottle--in,.pl__bottle--out,.pl__cap--on,.pl__fill--full,.pl__fill--half,.pl__fill--startle1,.pl__fill--startle2,.pl__rod {animation: move-right 0.6s linear infinite;}.pl__bottle {transform-origin: 8px 56px;}.pl__bottle--bounce {animation-name: bounce;}.pl__bottle--in,.pl__bottle--out {animation-name: fade-in;}.pl__bottle--in {opacity: 0;}.pl__bottle--out {animation-direction: reverse;}.pl__bottle--out ~ .pl__bottle {opacity: 0;}.pl__bottle-glass,.pl__cap,.pl__rod {stroke: hsl(var(--hue),10%,30%);}.pl__bottle-glass {fill: hsla(var(--hue),10%,30%,0.05);transition:fill var(--trans-dur),stroke var(--trans-dur);}.pl__bottle-glare {stroke: hsl(0,0%,100%);}.pl__cap,.pl__rod {transition: stroke var(--trans-dur);}.pl__cap {fill: hsl(0,0%,100%);}.pl__cap--on {animation-name: cap-on;animation-timing-function: ease-in;}.pl__fill {fill: hsla(43,90%,50%,0.8);stroke: hsl(43,90%,95%);stroke-width: 4px;}.pl__fill--full {animation-name: fill-up-full;}.pl__fill--half {animation-name: fill-up-half;}.pl__fill--startle1 {animation-name: fill-startle1;}.pl__fill--startle2 {animation-name: fill-startle2;}.pl__rod {animation-name: down-up;}/* Dark theme */@media (prefers-color-scheme: dark) {:root {--bg: hsl(var(--hue),10%,20%);--fg: hsl(var(--hue),10%,90%);}.pl__bottle-glass,.pl__cap,.pl__rod {stroke: hsl(var(--hue),10%,50%);}.pl__bottle-glass {fill: hsla(var(--hue),10%,50%,0.05);}}/* Animations */@keyframes bounce {from,50%,to {animation-timing-function: ease-out;transform: translate(56px,0) scale(1,1);}66.7% {animation-timing-function: ease-in;transform: translate(56px,0) scale(1.1,0.9);}83.3% {animation-timing-function: ease-out;transform: translate(56px,0) scale(0.95,1.05);}}@keyframes cap-on {from { transform: translate(0,0); }50%,to { transform: translate(0,23px); }}@keyframes fill-startle1 {from { transform: translate(0,8px); }to { transform: translate(-20px,8px); }}@keyframes fill-startle2 {from { transform: translate(-20px,8px); }25% { transform: translate(-30px,8px); }to { transform: translate(0,8px); }}@keyframes fill-up-half {from { transform: translate(-30px,56px); }to { transform: translate(-15px,32px); }}@keyframes fill-up-full {from { transform: translate(-15px,32px); }to { transform: translate(0,8px); }}@keyframes move-right {from { transform: translate(0,24px); }to { transform: translate(28px,24px); }}@keyframes fade-in {from { opacity: 0; }to { opacity: 1; }}@keyframes down-up {from,to {animation-timing-function: ease-in;transform: translate(0,0);}50% {animation-timing-function: ease-out;transform: translate(0,24px);}66.7% {animation-timing-function: ease-in;transform: translate(0,31px);}}
beer-bottle-preloader.zip
0
19.72 Kb
Нашли ошибку? Сообщите нам, мы исправим!
Комментариев нет
Чтобы оставить комментарий, необходимо на сайте.
Копирование запрещено!