css 如何在2个SVG之间交替转换

j2datikz  于 12个月前  发布在  其他
关注(0)|答案(3)|浏览(96)

我想交替2 SVG之间的过渡动画。我有一个按钮，我想做一个从SVG A到SVG B的平滑动画。当你点击浮动聊天按钮时，intercom动画真的很好。第一次在聊天图标上有一个淡出，左边有一点旋转，然后十字架也出现了一点旋转。当你点击聊天按钮时，它会反转动画。把Windows关上。
我在css动画真的很糟糕，所以你能帮我创建一个动画一样，当我们点击按钮对讲机？
下面是我创建按钮的代码片段，我在按钮上放置了内部通话聊天图标和十字图标（显示：无）

.float:focus {outline:0;}
    .float{
        width:60px;
        height:60px;
        background-color:#0C9;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        cursor: pointer;
    }

    .my-float{
        margin-top:22px;
    }

    .btn-color {
        border: none;
        background: #ea5a3d; /* Old browsers */
        background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
    }

个字符

css

3条答案

按热度按时间
iecba09b

iecba09b1#

使用普通JavaScript和CSS转换：

function toggleChatButton ()
{
  // Get the button
  const btn = document.getElementById( 'btn' );
  
  // Add click event
  btn.addEventListener( 'click', function () {
    
    // Toggle button class active 
    this.classList.toggle( 'active' );
    
  });
}

// Usage example
toggleChatButton();
/* Using the button active class to transform the divs inside */

#button-logo,
#close-cross
{
  transition: all .35s ease-in-out;
}

#btn.active #button-logo
{
  transform: rotate( 90deg ) scale( 0 );
  opacity: 0;
}

#btn:not( .active ) #close-cross
{
  transform: rotate( -90deg ) scale( 0 );
  opacity: 0;
}

/* Original code */

.float:focus {outline:0;}
    .float{
        width:60px;
        height:60px;
        background-color:#0C9;
        color:#FFF;
        border-radius:50px;
        text-align:center;
        box-shadow: 2px 2px 3px #999;
        cursor: pointer;
    }

    .my-float{
        margin-top:22px;
    }

    .btn-color {
        border: none;
        background: #ea5a3d; /* Old browsers */
        background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #ea5a3d 0%,#4e5ecc 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #e65a3d 0%,#4e5ecc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc',GradientType=0 ); /* IE6-9 */
    }
<button id="btn" class="float circle btn-color">
            <div id="button-logo">
<svg viewBox="0 0 28 32" width="30" fill="white"><path d="M28,32 C28,32 23.2863266,30.1450667 19.4727818,28.6592 L3.43749107,28.6592 C1.53921989,28.6592 0,27.0272 0,25.0144 L0,3.6448 C0,1.632 1.53921989,0 3.43749107,0 L24.5615088,0 C26.45978,0 27.9989999,1.632 27.9989999,3.6448 L27.9989999,22.0490667 L28,22.0490667 L28,32 Z M23.8614088,20.0181333 C23.5309223,19.6105242 22.9540812,19.5633836 22.5692242,19.9125333 C22.5392199,19.9392 19.5537934,22.5941333 13.9989999,22.5941333 C8.51321617,22.5941333 5.48178311,19.9584 5.4277754,19.9104 C5.04295119,19.5629428 4.46760991,19.6105095 4.13759108,20.0170667 C3.97913051,20.2124916 3.9004494,20.4673395 3.91904357,20.7249415 C3.93763774,20.9825435 4.05196575,21.2215447 4.23660523,21.3888 C4.37862552,21.5168 7.77411059,24.5386667 13.9989999,24.5386667 C20.2248893,24.5386667 23.6203743,21.5168 23.7623946,21.3888 C23.9467342,21.2215726 24.0608642,20.9827905 24.0794539,20.7254507 C24.0980436,20.4681109 24.0195551,20.2135019 23.8614088,20.0181333 Z"></path></svg>
            </div>
            <div id="close-cross" style="position: absolute; top: 30px; left: 30px;">
                <svg fill="white" width="14" height="14"><path d="M13.978 12.637l-1.341 1.341L6.989 8.33l-5.648 5.648L0 12.637l5.648-5.648L0 1.341 1.341 0l5.648 5.648L12.637 0l1.341 1.341L8.33 6.989l5.648 5.648z" fill-rule="evenodd"></path></svg>
            </div>
        </button>
赞(0）分享  回复(0）举报  12个月前
fkaflof6

fkaflof62#

对我来说，它看起来像是沿着这些线条的东西，旋转和褪色的组合。

.float:focus {
  outline: 0;
}

.float {
  width: 60px;
  height: 60px;
  background-color: #0C9;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #999;
  cursor: pointer;
}

.my-float {
  margin-top: 22px;
}

.btn-color {
  border: none;
  background: #ea5a3d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ea5a3d 0%, #4e5ecc 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #e65a3d 0%, #4e5ecc 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5a3d', endColorstr='#4e5ecc', GradientType=0);
  /* IE6-9 */
}

button #button-logo{transform:rotate(0deg) scale(1);opacity: 1; transition: all 0.1s ease-in-out;}
button #close-cross{transform:rotate(-90deg);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #button-logo{transform:rotate(90deg) scale(0.7);opacity: 0; transition: all 0.1s ease-in-out;}
button:hover #close-cross{transform:rotate(0deg);opacity: 1; transition: all 0.1s ease-in-out;}

个字符

赞(0）分享  回复(0）举报  12个月前
rt4zxlrg

rt4zxlrg3#

你可以像下面的例子那样做。
bell_unfilled.svg（普通图标）：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_39_992)">
        <path d="M21.6938 16.3711L20.3911 14.2347C19.897 13.4242 19.6383 12.5008 19.6383 11.5571V8.51474C19.6412 4.36947 16.2123 1 11.9982 1C7.78411 1 4.35814 4.36947 4.35814 8.51474V11.5571C4.35814 12.5008 4.09936 13.4242 3.60531 14.2347L2.30256 16.3711C1.90556 17.0224 1.89674 17.8068 2.2761 18.4697C2.65545 19.1326 3.34653 19.5263 4.11994 19.5263H9.13391C9.09568 19.7174 9.05745 19.9084 9.05745 20.1053C9.05745 21.7003 10.3778 23 11.9982 23C13.6185 23 14.9389 21.7003 14.9389 20.1053C14.9389 19.9084 14.9007 19.7174 14.8625 19.5263H19.8765C20.6499 19.5263 21.338 19.1297 21.7203 18.4697C22.0997 17.8068 22.0908 17.0253 21.6938 16.3739V16.3711ZM13.7626 20.1053C13.7626 21.0634 12.9716 21.8421 11.9982 21.8421C11.0248 21.8421 10.2338 21.0634 10.2338 20.1053C10.2338 19.9055 10.2808 19.7116 10.3484 19.5263H13.648C13.7156 19.7116 13.7626 19.9055 13.7626 20.1053ZM20.6969 17.8995C20.5264 18.1947 20.2205 18.3684 19.8765 18.3684H4.12288C3.77882 18.3684 3.47298 18.1918 3.30242 17.8995C3.13479 17.6042 3.13774 17.2568 3.31418 16.9674L4.61693 14.8311C5.21978 13.8411 5.53738 12.7121 5.53738 11.56V8.51763C5.53738 5.0121 8.43696 2.16079 12.0011 2.16079C15.5653 2.16079 18.4649 5.0121 18.4649 8.51763V11.56C18.4649 12.7121 18.7825 13.8439 19.3853 14.8311L20.6881 16.9674C20.8645 17.2568 20.8704 17.6042 20.6999 17.8995H20.6969Z" fill="#000A1F"/>
    </g>
    <defs>
        <clipPath id="clip0_39_992">
            <rect width="20" height="22" fill="white" transform="translate(2 1)"/>
        </clipPath>
    </defs>
</svg>

字符串
bell_filled.svg（悬停图标）：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_1287_10637)">
        <path d="M9.26371 20.7436H13.7336C13.7336 21.8718 12.9318 23 11.4987 23C10.0655 23 9.26371 21.8718 9.26371 20.7436ZM20.7095 15.9769L19.4719 13.8954C19.0026 13.1056 18.7567 12.2031 18.7567 11.2864V8.32205C18.7595 4.28308 15.5021 1 11.4987 1C7.4953 1 4.24063 4.28308 4.24063 8.32205V11.2864C4.24063 12.2031 3.99478 13.1056 3.52544 13.8954L2.28783 15.9769C1.91068 16.6115 1.9023 17.3759 2.26268 18.0218C2.62307 18.6677 3.27959 19.0513 4.01434 19.0513H18.9802C19.715 19.0513 20.3687 18.6649 20.7319 18.0218C21.0923 17.3759 21.0839 16.6115 20.7067 15.9769H20.7095Z" fill="#000A1F"/>
    </g>
    <defs>
        <clipPath id="clip0_1287_10637">
            <rect width="19" height="22" fill="white" transform="translate(2 1)"/>
        </clipPath>
    </defs>
</svg>

型
您可以将这两个SVG文件合并合并到一个SGV文件中，将未填充的SVG图标的内容添加到<g class="first-icon"></g>中，将填充的SVG图标的内容添加到<g class="second-icon"></g>中，如下所示：

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="first-icon">
        <g clip-path="url(#clip0_39_992)">
            <path d="M21.6938 16.3711L20.3911 14.2347C19.897 13.4242 19.6383 12.5008 19.6383 11.5571V8.51474C19.6412 4.36947 16.2123 1 11.9982 1C7.78411 1 4.35814 4.36947 4.35814 8.51474V11.5571C4.35814 12.5008 4.09936 13.4242 3.60531 14.2347L2.30256 16.3711C1.90556 17.0224 1.89674 17.8068 2.2761 18.4697C2.65545 19.1326 3.34653 19.5263 4.11994 19.5263H9.13391C9.09568 19.7174 9.05745 19.9084 9.05745 20.1053C9.05745 21.7003 10.3778 23 11.9982 23C13.6185 23 14.9389 21.7003 14.9389 20.1053C14.9389 19.9084 14.9007 19.7174 14.8625 19.5263H19.8765C20.6499 19.5263 21.338 19.1297 21.7203 18.4697C22.0997 17.8068 22.0908 17.0253 21.6938 16.3739V16.3711ZM13.7626 20.1053C13.7626 21.0634 12.9716 21.8421 11.9982 21.8421C11.0248 21.8421 10.2338 21.0634 10.2338 20.1053C10.2338 19.9055 10.2808 19.7116 10.3484 19.5263H13.648C13.7156 19.7116 13.7626 19.9055 13.7626 20.1053ZM20.6969 17.8995C20.5264 18.1947 20.2205 18.3684 19.8765 18.3684H4.12288C3.77882 18.3684 3.47298 18.1918 3.30242 17.8995C3.13479 17.6042 3.13774 17.2568 3.31418 16.9674L4.61693 14.8311C5.21978 13.8411 5.53738 12.7121 5.53738 11.56V8.51763C5.53738 5.0121 8.43696 2.16079 12.0011 2.16079C15.5653 2.16079 18.4649 5.0121 18.4649 8.51763V11.56C18.4649 12.7121 18.7825 13.8439 19.3853 14.8311L20.6881 16.9674C20.8645 17.2568 20.8704 17.6042 20.6999 17.8995H20.6969Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_39_992">
                <rect width="20" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
    <g class="second-icon">
        <g clip-path="url(#clip0_1287_10637)">
            <path d="M9.26371 20.7436H13.7336C13.7336 21.8718 12.9318 23 11.4987 23C10.0655 23 9.26371 21.8718 9.26371 20.7436ZM20.7095 15.9769L19.4719 13.8954C19.0026 13.1056 18.7567 12.2031 18.7567 11.2864V8.32205C18.7595 4.28308 15.5021 1 11.4987 1C7.4953 1 4.24063 4.28308 4.24063 8.32205V11.2864C4.24063 12.2031 3.99478 13.1056 3.52544 13.8954L2.28783 15.9769C1.91068 16.6115 1.9023 17.3759 2.26268 18.0218C2.62307 18.6677 3.27959 19.0513 4.01434 19.0513H18.9802C19.715 19.0513 20.3687 18.6649 20.7319 18.0218C21.0923 17.3759 21.0839 16.6115 20.7067 15.9769H20.7095Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_1287_10637">
                <rect width="19" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
</svg>

型
然后你可以在你的HTML/CSS中有悬停效果，比如：

svg .first-icon{
    opacity: 1;
}
svg .second-icon{
    opacity: 0;
}
svg:hover .first-icon{
    opacity: 0;
}
svg:hover .second-icon{
    opacity: 1;
}
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g class="first-icon">
        <g clip-path="url(#clip0_39_992)">
            <path d="M21.6938 16.3711L20.3911 14.2347C19.897 13.4242 19.6383 12.5008 19.6383 11.5571V8.51474C19.6412 4.36947 16.2123 1 11.9982 1C7.78411 1 4.35814 4.36947 4.35814 8.51474V11.5571C4.35814 12.5008 4.09936 13.4242 3.60531 14.2347L2.30256 16.3711C1.90556 17.0224 1.89674 17.8068 2.2761 18.4697C2.65545 19.1326 3.34653 19.5263 4.11994 19.5263H9.13391C9.09568 19.7174 9.05745 19.9084 9.05745 20.1053C9.05745 21.7003 10.3778 23 11.9982 23C13.6185 23 14.9389 21.7003 14.9389 20.1053C14.9389 19.9084 14.9007 19.7174 14.8625 19.5263H19.8765C20.6499 19.5263 21.338 19.1297 21.7203 18.4697C22.0997 17.8068 22.0908 17.0253 21.6938 16.3739V16.3711ZM13.7626 20.1053C13.7626 21.0634 12.9716 21.8421 11.9982 21.8421C11.0248 21.8421 10.2338 21.0634 10.2338 20.1053C10.2338 19.9055 10.2808 19.7116 10.3484 19.5263H13.648C13.7156 19.7116 13.7626 19.9055 13.7626 20.1053ZM20.6969 17.8995C20.5264 18.1947 20.2205 18.3684 19.8765 18.3684H4.12288C3.77882 18.3684 3.47298 18.1918 3.30242 17.8995C3.13479 17.6042 3.13774 17.2568 3.31418 16.9674L4.61693 14.8311C5.21978 13.8411 5.53738 12.7121 5.53738 11.56V8.51763C5.53738 5.0121 8.43696 2.16079 12.0011 2.16079C15.5653 2.16079 18.4649 5.0121 18.4649 8.51763V11.56C18.4649 12.7121 18.7825 13.8439 19.3853 14.8311L20.6881 16.9674C20.8645 17.2568 20.8704 17.6042 20.6999 17.8995H20.6969Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_39_992">
                <rect width="20" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
    <g class="second-icon">
        <g clip-path="url(#clip0_1287_10637)">
            <path d="M9.26371 20.7436H13.7336C13.7336 21.8718 12.9318 23 11.4987 23C10.0655 23 9.26371 21.8718 9.26371 20.7436ZM20.7095 15.9769L19.4719 13.8954C19.0026 13.1056 18.7567 12.2031 18.7567 11.2864V8.32205C18.7595 4.28308 15.5021 1 11.4987 1C7.4953 1 4.24063 4.28308 4.24063 8.32205V11.2864C4.24063 12.2031 3.99478 13.1056 3.52544 13.8954L2.28783 15.9769C1.91068 16.6115 1.9023 17.3759 2.26268 18.0218C2.62307 18.6677 3.27959 19.0513 4.01434 19.0513H18.9802C19.715 19.0513 20.3687 18.6649 20.7319 18.0218C21.0923 17.3759 21.0839 16.6115 20.7067 15.9769H20.7095Z" fill="#000A1F"/>
        </g>
        <defs>
            <clipPath id="clip0_1287_10637">
                <rect width="19" height="22" fill="white" transform="translate(2 1)"/>
            </clipPath>
        </defs>
    </g>
</svg>

的字符串
我已经发布了an online tool that allows you to automaticaly generate combined SVG files in bulk（source code on GitHub）。

赞(0）分享  回复(0）举报  12个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com