svg变形过渡动画效果-html代码-BFW代码库

svg变形过渡动画效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>women-fashion-loader</title>

    <style>
        body {
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
            line-height: 1.5;
        }

        .container {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            width: 100vw;
            height: 100vh;
            background-color: #1e1f26;
        }
        h2 {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 28px;
            font-weight: 600;
            margin: 30px 0 150px 0;
            color: #e0245e;
            text-shadow: 2px 2px 4px rgba(0,0,0,1);
            text-align: center;
        }
        svg {
            visibility: hidden;
            width: 150px;
            height: 150px;
        }

        .dress, .mexi, .skirt {
            visibility: hidden;
        }
    </style>
    <script>
        window.console = window.console || function(t) {};
    </script>
    <script>
        if (document.location.search.match(/type=embed/gi)) {
            window.parent.postMessage("resize", "*");
        }
    </script>
</head>
<body translate="no">

    <div class="container">
        <h2>Women Fasion Store loader</h2>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78.5 121">
            <circle class="outer-circle" cx="39.25" stroke="#e0245e" cy="60.5" r="45" fill="none" stroke-width="2.5" />
            <path class="frok" fill="#239f95" d="M479.14,539.25a3.4,3.4,0,0,1,2.35-.69,1.17,1.17,0,0,0,1.28-1.34c0-.89,1.52-.06,1-1.27s-2.28-4.65-3.3-7.64-2.48-8.85-3.68-11.72-7.95-14.64-9-17.25S469.2,492,469.2,492s.8-4.44.94-5c.05-.2-.12-.42-.37-.62a1.07,1.07,0,0,0,.53-.91,1.13,1.13,0,0,0-.1-.44,1.08,1.08,0,0,0,.23-.63h0c.85,0,.54-.38,1.69-1s.1-.52.2-1.29-.43-.86-.77-1.19-.71.38-.71.38c-2-.1-.34,1.48-1.29,1.34-.45-.07-.57.33-.47.77a1.08,1.08,0,0,0-.84,1,1.05,1.05,0,0,0,.1.44,1,1,0,0,0-.23.63v0c-.25,0-.51.08-.65.54a.67.67,0,0,0-1,.37s-1.05-.05-1.21.87c0,0-2.9-.06-3.5.75-.61-.81-3.5-.75-3.5-.75-.16-.93-1.21-.88-1.21-.88a.67.67,0,0,0-1.05-.37c-.14-.46-.4-.56-.65-.54v0a1.08,1.08,0,0,0-.23-.63,1.05,1.05,0,0,0,.1-.44,1.08,1.08,0,0,0-.84-1c.11-.44,0-.83-.46-.77-1,.14.66-1.43-1.29-1.34,0,0-.38-.72-.72-.38s-.86.43-.76,1.19-1,.57.19,1.29.84,1,1.7,1h0a1.08,1.08,0,0,0,.23.63,1.13,1.13,0,0,0-.1.44,1.09,1.09,0,0,0,.52.91c-.24.2-.41.42-.36.62.14.55.93,5,.93,5s2.38,4.72,1.36,7.32-7.78,14.38-9,17.25-2.68,8.71-3.69,11.71-2.81,6.42-3.32,7.63,1,.38,1,1.28.44,1.33,1.27,1.33a3.41,3.41,0,0,1,2.35.7,3.23,3.23,0,0,0,2.61,1c1-.19,4.9.9,5.22,1.66s3.5,2.67,5,1.47c1.27-1,4-1.33,4.67-1.39s3.41.35,4.68,1.4c1.46,1.2,4.65-.7,5-1.47s4.2-1.84,5.22-1.65A3.26,3.26,0,0,0,479.14,539.25Zm-10-55.57a1.22,1.22,0,0,0,.93.73v0a.72.72,0,0,1-.1.36,1,1,0,0,0-1.43-.17.58.58,0,0,1,0-.19A.77.77,0,0,1,469.18,483.68Zm.63,1.36a.74.74,0,0,1-1.09-.14.77.77,0,0,1,.48-.18A.75.75,0,0,1,469.81,485Zm-1.29.1a1.08,1.08,0,0,0,.81.38,1,1,0,0,0,.62-.21,1.62,1.62,0,0,1,0,.19.79.79,0,0,1-.48.72,6.41,6.41,0,0,0-.78-.44,1.84,1.84,0,0,0-.29-.17.43.43,0,0,1,0-.11A.75.75,0,0,1,468.52,485.14Zm-15.24-.72s0,0,0,0a1.22,1.22,0,0,0,.93-.73.77.77,0,0,1,.63.75.58.58,0,0,1,0,.19,1,1,0,0,0-1.43.17A.84.84,0,0,1,453.28,484.42Zm1.4.47a.74.74,0,0,1-1.09.14.76.76,0,0,1,.61-.32A.77.77,0,0,1,454.68,484.89Zm.28.71a1.82,1.82,0,0,0-.3.18,6.38,6.38,0,0,0-.78.43.8.8,0,0,1-.47-.72,1.62,1.62,0,0,1,0-.19,1,1,0,0,0,.61.22,1.09,1.09,0,0,0,.82-.39.76.76,0,0,1,.1.37S455,485.57,455,485.6Z" transform="translate(-424.5 -451..........完整代码请登录后点击上方下载按钮下载查看