使用SVG实现的LOGO流水背景动画

fluid water of logo background

css, svg, logo, fluid

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2385
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {

var momentumRoot;
    var momentumEls;

// Page and element location and dimentions
    function momentumInit() {
        momentumRoot.setProperty('--viewportwidth', window.innerWidth);
        momentumRoot.setProperty('--viewportheight', window.innerHeight);

var widthValue = document.getElementById('widthValue');
        widthValue.innerHTML = window.innerWidth + 'px';
        for (i = 0; i < momentumEls.length; i++) {
            var e = momentumEls[i];
            e.style.setProperty('--height', e.offsetHeight);
            e.style.setProperty('--top', e.offsetTop);
        }
    };

// When the DOM is loaded
    document.addEventListener('DOMContentLoaded', function() {
        momentumRoot = document.body.style;
        momentumEls = document.querySelectorAll('.momentumcss');
        filter();

// Initialize variables
        momentumRoot.setProperty('--scrolly', window.scrollY);

// Scroll events
        window.addEventListener('scroll', momentumScroll, false);

function momentumScroll() {
            momentumRoot.setProperty('--scrolly', window.scrollY);
        }

momentumInit();
    }, false);

// When the page has fully loaded
    window.onload = function() {
        momentumInit();
    };
    window.addEventListener('resize', momentumInit);
})();

function navtoggle() {
    document.getElementById('nav').classList.toggle('active');
}

编译

CSS

@charset "UTF-8";
body {
    --color: #04BAAC;
    --color-2: #FF8564;
    --text: rgb(23, 24, 24);
    --link: rgb(11, 85, 79);
    --bkg: #fff;
    --bkg-alt: rgb(242, 245, 245);
    --tt-ease: linear;
    --tt-key: body;
    --tt-max: 1600;
    --tt-bind: var(--viewportwidth);
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: 'Foreday', system-ui, sans-serif;
    font-variation-settings: "wght" 80, "SERI" 3;
    font-size: 20px;
    line-height: 1.7;
}
* {
    --tt-key: none;
    -webkit-animation: var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;
    animation: var(--tt-key) 1s var(--tt-ease) 1 calc(-1s*var(--tt-bind)/var(--tt-max)) paused;
    font-weight: normal;
}
code {
    background-color: #ebf9f7;
    color: #004d47;
    border-radius: 3px;
    padding: .25em .4em;
    font-size: .9em;
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
}
.flexwrap {
    display: flex;
    justify-content: space-around;
}
nav {
    position: fixed;
    top: 1.6rem;
    right: 2rem;
    transition: opacity .5s ease;
    z-index: 9;
    color: var(--color);
}
.partbar {
    position: relative;
    height: 2px;
    background-color: currentColor;
    margin-bottom: 2px;
    width: 12px;
    box-shadow: 0 0 0 2px var(--bkg);
}
.partbar.active {
    width: 18px;
}
.navparts {
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s ease;
}
nav.active {
    color: #fff;
}
nav.active .partbar {
    box-shadow: none;
}
nav.active .navparts {
    visibility: visible;
    opacity: 1;
}
.navparts a {
    display: block;
    margin: 3em 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    transition: none;
}
nav.active .navparts a {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    transition: all .5s ease;
}
nav.active .navparts a:nth-child(2) {
    transition-delay: 0.1s;
}
nav.active .navparts a:nth-child(3) {
    transition-delay: 0.2s;
}
nav.active .navparts a:nth-child(4) {
    transition-delay: 0.3s;
}
nav.active .navparts a:nth-child(5) {
    transition-delay: 0.4s;
}
.navtoggle {
    position: fixed;
    z-index: 9;
}
.navtoggle_label {
    opacity: 0;
    position: absolute;
    left: 2rem;
    top: 0;
    line-height: 1.1;
    color: currentColor;
    white-space: nowrap;
}
a:-moz-focusring .navtoggle_label,
a:focus-visible .navtoggle_label {
    opacity: 1;
}
.navparts {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color);
    color: var(--bkg);
    padding: 3vw;
    overflow: auto;
}
nav a {
    color: inherit;
    display: block;
    max-width: 800px;
}
nav.active a {
    color: inherit;
    text-decoration: inherit;
    color: rgba(255, 255, 255, 0.5);
}
nav.active a:link {
    opacity: 1;
    color: #fff;
}
nav .part {
    text-transform: uppercase;
    display: block;
    font-variation-settings: "wght" 80, "SERI" 10;
    line-height: 1;
    letter-spacing: .2em;
}
nav .title {
    font-variation-settings: "wght" 160, "SERI" 1;
    font-size: 4em;
    line-height: 1;
    font-style: italic;
    --tt-key: navtitle;
}
article a {
    color: inherit;
    text-decoration: none;
    transition: all .3s ease;
    background-image: linear-gradient(transparent, transparent 47%, var(--color-2) 47%, var(--color-2) 95%, transparent 95%);
    background-size: 1px 200%;
}
article a:hover {
    background-position-y: 25%;
    color: #000;
}
#filters {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
}
article {
    padding: 5%;
}
.lede {
    font-size: 1.1em;
}
.byline {
    grid-area: byline;
    font-style: italic;
    font-variation-settings: "wght" 60, "SERI" 1;
    position: relative;
    color: rgba(0, 0, 0, 0.6);
    --tt-key: byline;
    font-size: .9rem;
}
.hed {
    grid-area: hed;
}
.article {
    grid-area: article;
    max-width: 34em;
    margin: auto;
    position: relative;
}
.width-value {
    grid-row-start: 4;
    grid-column-start: 1;
    grid-column-end: 3;
    line-height: 1;
    margin-top: -.5em;
    margin-right: 6vw;
    opacity: .3;
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    display: none;
    font-size: 12px;
}
.meta {
    grid-area: meta;
    font-size: 6rem;
    line-height: 1;
    margin: 0 0 2rem 0;
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
    color: #222;
    --tt-key: meta;
    justify-self: center;
    display: flex;
    align-items: center;
    mix-blend-mode: multiply;
}
.date {
    font-size: 1rem;
    margin: 0 0 0 1em;
    line-height: inherit;
    text-transform: uppercase;
    letter-spacing: .2em;
    opacity: .5;
    transition: opacity .5s;
}
.date:hover {
    opacity: 1;
}
.logo {
    display: inline-block;
}
.logo:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    background: var(--color);
    border-radius: 50%;
    z-index: -1;
    -webkit-transform: scale(8);
    transform: scale(8);
}
.logo svg {
    fill: #fff;
    width: 1em;
    height: 1em;
    display: block;
}
h1 {
    font-variation-settings: "wght" 100, "SERI" 1;
    font-style: normal;
    line-height: 1;
    color: var(--color);
    font-size: 4rem;
    margin: 1em 0 .1em;
    --tt-key: h1;
}
.hed {
    font-variation-settings: "wght" 170, "SERI" 1;
    --tt-key: hed;
    font-size: 7.5rem;
    mix-blend-mode: multiply;
    max-width: 14em;
    margin: 0 0 .2em 0;
}
h2 {
    font-variation-settings: "wght" 60, "SERI" 10;
    font-size: 2rem;
    line-height: 1;
    font-style: italic;
    transition: font-variation-settings 1s ease;
    margin: 0;
    --tt-key: h1;
}
h2:hover {
    font-variation-settings: "wght" 180, "SERI" 1;
}
footer {
    display: flex;
    align-items: stretch;
    margin-top: 10vw;
    overflow: hidden;
    padding-top: 1rem;
}
.footer-typetura svg {
    fill: currentColor;
    width: 30%;
    display: block;
    margin: auto;
}
footer a {
    font-variation-settings: "wght" 100, "SERI" 1;
    color: var(--color);
    transition: all .5s ease;
    flex: 1;
    box-sizing: border-box;
    text-decoration: none;
    padding: 5vw 3vw calc(5vw + 1rem);
    -webkit-transform: translateY(1rem);
    transform: translateY(1rem);
}
footer a:hover {
    background-color: var(--color);
    color: var(--bkg);
    -webkit-transform: none;
    transform: none;
    z-index: 1;
}
.footer-nextpart {
    background-color: var(--bkg-alt);
    letter-spacing: .2em;
    text-transform: uppercase;
    position: relative;
    padding-right: 9vw;
}
.footer-nextpart svg {
    stroke: var(--bkg-alt);
    stroke-miterlimit: 10;
    stroke-width: 1px;
    position: absolute;
    width: 6vw;
    height: 6vw;
    right: 3vw;
    top: 50%;
    transition: all .5s ease-out;
    -webkit-transform: translateY(-50%) translateX(-6vw);
    transform: translateY(-50%) translateX(-6vw);
    fill: none;
    opacity: 0;
}
.footer-nextpart:hover svg {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
}
.footer-nextpart h1 {
    color: inherit;
    margin: 0;
    --tt-key: nextparth1;
    text-transform: none;
    letter-spacing: 0;
}
.footer-typetura {
    text-align: center;
    font-style: italic;
    max-width: calc(20vw + 1em);
    display: none;
}
/* figures */

figure {
    max-width: 400px;
    margin: 2rem auto;
    padding: 0;
    position: relative;
    text-align: center;
}
.fluidpage,
.fluidtype {
    font-size: 10px;
    width: 50%;
    background-color: var(--bkg-alt);
    padding: .4em;
    height: 140px;
    overflow: hidden;
    box-sizing: border-box;
    text-align: left;
}
figure:hover .fluidpage {
    -webkit-animation: fluidpage 10s alternate infinite ease-in-out;
    animation: fluidpage 10s alternate infinite ease-in-out;
}
figure:hover .fluidtype {
    -webkit-animation: fluidtype 10s alternate infinite ease-in-out;
    animation: fluidtype 10s alternate infinite ease-in-out;
}
.img {
    width: 50%;
    height: 0;
    margin: 0 .3em .3em 0;
    padding: 0 0 50%;
    float: left;
    background-color: var(--color);
}
.word {
    display: inline-block;
    background-color: var(--color);
    width: 4em;
    height: 1em;
}
.word:nth-child(3n-1) {
    width: 1em;
}
.word:nth-child(5n-2) {
    width: 2em;
}
.word:nth-child(7n-4) {
    width: 3em;
}
.word:nth-child(11n-6) {
    width: 6em;
}
.variable-a {
    font-style: italic;
}
figure:hover .variable-a {
    -webkit-animation: variable-a 5s infinite;
    animation: variable-a 5s infinite;
}
figcaption {
    clear: both;
    font-size: .8rem;
    font-style: italic;
    font-variation-settings: "wght" 90, "SERI" 10;
    line-height: 1.2;
    margin: .8em 0 0;
    opacity: .8;
}
.detail {
    position: absolute;
}
.detail.ellipsis {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-2);
    left: -4em;
    -webkit-transform: translateY(calc(var(--scrolly) * .05px - var(--top) * .05px));
    transform: translateY(calc(var(--scrolly) * .05px - var(--top) * .05px));
    box-shadow: 0 1.5rem 0 var(--color-2), 0 3rem 0 var(--color-2);
}
.detail.spot {
    width: 4em;
    height: 4em;
    border-radius: 50%;
    right: 0;
    background: var(--bkg-alt);
    z-index: -1;
    -webkit-transform: scale(5) translateX(10%) translateY(calc(var(--scrolly) * .03px - var(--top) * .03px));
    transform: scale(5) translateX(10%) translateY(calc(var(--scrolly) * .03px - var(--top) * .03px));
    display: none;
}
/* Breakpoints */

@media (min-width: 260px) {
    .logo:after {
        -webkit-transform: scale(10) rotate(20deg);
        transform: scale(10) rotate(20deg);
        -webkit-filter: url(#fluid);
        filter: url(#fluid);
    }
    .safari .logo:after {
        -webkit-filter: none;
        filter: none;
    }
}
@media (max-width: 300px) {
    .date {
        display: none;
    }
}
@media (min-width: 700px) {
    body {
        border-left: 0.5vw solid var(--color-2);
    }
    nav {
        top: 1rem;
        left: calc(.5vw + 1rem);
    }
    .navparts {
        padding-left: calc(20vw + 1em);
    }
    article {
        display: grid;
        padding: 1em;
        grid-template-areas: "meta lede" "meta byline" "hed hed" "hed hed" "article article";
        grid-template-columns: 20vw auto;
        grid-template-rows: auto auto 1fr 1fr auto;
    }
    .lede {
        grid-area: lede;
        max-width: 40em;
        --tt-key: lede;
        padding: 6em 4vw 4vw 4vw;
        position: relative;
    }
    .lede:before {
        content: '';
        position: absolute;
        width: 1px;
        height: 4em;
        top: -1em;
        left: 4vw;
        background-color: var(--bkg-alt);
        mix-blend-mode: multiply;
    }
    .lede p:first-child {
        margin-top: 0;
    }
    .bkg {
        background-color: var(--bkg-alt);
        grid-row-start: 1;
        grid-row-end: 4;
        grid-column-start: 2;
        grid-column-end: 3;
        z-index: -1;
        position: relative;
        display: block;
        top: 0;
        left: 0;
    }
    .bkg:after,
    .footer-nextpart:after {
        content: '';
        width: 2vw;
        height: 2vw;
        background-color: var(--color-2);
        position: absolute;
        bottom: -1vw;
        right: 1vw;
        border-radius: 50%;
        mix-blend-mode: multiply;
    }
    .footer-nextpart:after {
        top: -1vw;
        right: calc(1vw + 1rem);
    }
    .width-value {
        display: block;
        text-align: right;
    }
    .meta {
        color: #777;
        margin: .5em 0 0 0;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        -webkit-transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.03px));
        transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.03px));
    }
    .date {
        margin: 1em 0 0;
    }
    .logo {
        position: relative;
    }
    .logo:after {
        -webkit-transform: rotate(20deg);
        transform: rotate(20deg);
    }
    .hed {
        margin: .3em 1em .3em 1rem;
        -webkit-transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.033px));
        transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.033px));
    }
    .detail.spot {
        display: block;
    }
    .footer-typetura {
        display: block;
    }
    .footer-nextpart svg {
        stroke-width: .5px;
    }
}
@media (min-width: 700px) and (max-width: 999px) {
    .byline {
        padding-left: 4vw;
    }
}
@media (min-width: 1000px) {
    article {
        grid-template-areas: "margin meta lede" "margin meta byline" "margin hed hed" "margin hed hed" "margin article article";
        grid-template-columns: 20vw 20vw auto;
        grid-template-rows: auto auto 1fr 1fr auto;
    }
    .lede {
        padding: 6em 4vw 0 0;
    }
    .lede:before {
        left: 0;
    }
    .bkg {
        grid-column-start: 2;
        grid-column-end: 4;
    }
    .article {
        margin: 0;
    }
    .width-value {
        text-align: left;
    }
    .meta {
        -webkit-transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.03px)) translateX(-50%);
        transform: translateY(calc(var(--scrolly)*-.1px - var(--top)*-.03px)) translateX(-50%);
        justify-self: left;
    }
    .hed {
        margin: .3em 1em .3em -8vw;
    }
}
/* Keyframes */

@-webkit-keyframes body {
    0% {
        font-size: 8px;
        line-height: 1.3;
        font-variation-settings: "wght" 80, "SERI" 10;
    }
    20% {
        font-size: 16px;
        line-height: 1.6;
    }
}
@keyframes body {
    0% {
        font-size: 8px;
        line-height: 1.3;
        font-variation-settings: "wght" 80, "SERI" 10;
    }
    20% {
        font-size: 16px;
        line-height: 1.6;
    }
}
@-webkit-keyframes navtitle {
    0% {
        font-size: 1.1rem;
    }
}
@keyframes navtitle {
    0% {
        font-size: 1.1rem;
    }
}
@-webkit-keyframes lede {
    0% {
        padding-top: 2em;
    }
}
@keyframes lede {
    0% {
        padding-top: 2em;
    }
}
@-webkit-keyframes byline {
    0% {
        font-size: .6rem;
    }
    20% {
        font-size: .9rem;
    }
}
@keyframes byline {
    0% {
        font-size: .6rem;
    }
    20% {
        font-size: .9rem;
    }
}
@-webkit-keyframes meta {
    0% {
        font-size: 1rem;
        line-height: 1rem;
    }
}
@keyframes meta {
    0% {
        font-size: 1rem;
        line-height: 1rem;
    }
}
@-webkit-keyframes h1 {
    0% {
        font-size: 1rem;
        line-height: 1.2;
        color: var(--text);
        font-variation-settings: "wght" 150, "SERI" 6;
    }
    40% {
        color: var(--color);
    }
    70% {
        font-size: 4rem;
    }
}
@keyframes h1 {
    0% {
        font-size: 1rem;
        line-height: 1.2;
        color: var(--text);
        font-variation-settings: "wght" 150, "SERI" 6;
    }
    40% {
        color: var(--color);
    }
    70% {
        font-size: 4rem;
    }
}
@-webkit-keyframes hed {
    0% {
        font-size: 1rem;
        line-height: 1.2;
        color: var(--text);
        font-variation-settings: "wght" 140, "SERI" 5;
    }
    45% {
        font-size: 4rem;
        color: var(--color);
    }
    55% {
        font-size: 4rem;
        font-variation-settings: "wght" 160, "SERI" 1;
    }
}
@keyframes hed {
    0% {
        font-size: 1rem;
        line-height: 1.2;
        color: var(--text);
        font-variation-settings: "wght" 140, "SERI" 5;
    }
    45% {
        font-size: 4rem;
        color: var(--color);
    }
    55% {
        font-size: 4rem;
        font-variation-settings: "wght" 160, "SERI" 1;
    }
}
@-webkit-keyframes h2 {
    0% {
        font-size: 1.1rem;
        line-height: 1.2;
    }
}
@keyframes h2 {
    0% {
        font-size: 1.1rem;
        line-height: 1.2;
    }
}
@-webkit-keyframes nextparth1 {
    0% {
        font-size: 1.4rem;
    }
}
@keyframes nextparth1 {
    0% {
        font-size: 1.4rem;
    }
}
@-webkit-keyframes fluidpage {
    to {
        width: 30%;
    }
}
@keyframes fluidpage {
    to {
        width: 30%;
    }
}
@-webkit-keyframes fluidtype {
    to {
        width: 30%;
        font-size: 6px;
        line-height: 1.5;
    }
}
@keyframes fluidtype {
    to {
        width: 30%;
        font-size: 6px;
        line-height: 1.5;
    }
}
@-webkit-keyframes variable-a {
    0%, 100% {
        font-variation-settings: "wght" 60, "SERI" 1;
    }
    25% {
        font-variation-settings: "wght" 180, "SERI" 1;
    }
    50% {
        font-variation-settings: "wght" 180, "SERI" 10;
    }
    75% {
        font-variation-settings: "wght" 60, "SERI" 10;
    }
}
@keyframes variable-a {
    0%, 100% {
        font-variation-settings: "wght" 60, "SERI" 1;
    }
    25% {
        font-variation-settings: "wght" 180, "SERI" 1;
    }
    50% {
        font-variation-settings: "wght" 180, "SERI" 10;
    }
    75% {
        font-variation-settings: "wght" 60, "SERI" 10;
    }
}

HTML

<nav id="nav">
<a href="javascript:navtoggle()" class="navtoggle">
    <span class="navtoggle_label">Toggle nav</span>
    <div class="partbar active"></div>
    <div class="partbar"></div>
    <div class="partbar"></div>
    <div class="partbar"></div>
    <div class="partbar"></div>
</a>
<div class="navparts">
    <a href="#part1" class="current">
        <span class="part">Part 1</span>
        <span class="title">Fluid Typography and the Creation of Typetura</span>
    </a>
    <a>
        <span class="part">Part 2</span>
        <span class="title">Getting started with Typetura.com</span>
    </a>
    <a>
        <span class="part">Part 3</span>
        <span class="title">Unlocking the potential of Typetura.js</span>
    </a>
    <a>
        <span class="part">Part 4</span>
        <span class="title">Building Typetrura.com</span>
    </a>
    <a>
        <span class="part">Part 5</span>
        <span class="title">The future of Typetura</span>
    </a>
</div>
</nav>

<div class="meta momentumcss">
    <div class="logo">
        <svg version="1.1" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M256.3,123h42.1l-14.2,64h62.7l-6.4,42.9h-66.5l-23.2,97.4l1.3,2.6l64-18l6.4,5.6
    c-16.3,32.6-58.8,66.1-85.8,66.1c-12.4,0-49.8-20.2-48.9-25.3l23.2-124.5L173,226l4.3-23.2l48.1-21L256.3,123z" />
        </svg>
    </div><span class="date">January 31, 2019</span>
</div>

<h1 class="hed momentumcss">Fluid typography and&nbsp;the creation of&nbsp;Typetura</h1>
<div class="byline">by <a href="https://scottkellum.com">Scott Kellum</a> and <a href="https://clickclickonsal.com/">Sal Hernandez</a>. Edited by <a href="https://anamonroe.com/">Ana Monroe</a>.</div>
<section class="lede">
    <p>
        The web is an inherently fluid platform. To design for it effectively, a fluid typographic system is necessary. Over the past decade fluid and responsive layouts have evolved significantly. However, the text that flows through them has not. While images
        and boxes shrink and expand relative to their context, text occupies a static volume. In his 2015 essay, <a href="https://frankchimero.com/writing/the-webs-grain/"><em>‘The Webs Grain’</em></a>, Frank Chimero refers to
        this issue as “the primary visual challenge of responsive design”. Fluid typography answers this problem, and typetura answers fluid typography.
    </p>
</section>

fluid water of logo background

css, svg, logo, fluid

编辑器支持Emmet

快捷键

fluid water of logo background

css, svg, logo, fluid

使用SVG+CSS3实现带旋转星辰背景的动画图标

使用CSS3 SVG和JS实现的交互式火球动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：