6个非常喜庆的SVG图标悬停变幻动效

有揭开、放大、缩小、旋转以及复合效果。红底图标设计非常喜气。适合节假日通告、营销类页面。

svg, logo，动画图标

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: black;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.rollovers {
    overflow: hidden;
    list-style-type: none;
    margin: 0;
    padding: 1em;
    text-align: center;
}
.rollovers li {
    position: relative;
    display: inline-block;
    width: 13em;
}
.rollovers li a {
    position: relative;
    z-index: 1;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 1.25em;
    text-decoration: none;
    color: #000;
    padding: 4.7em 1em 1em;
}
.icon_contain {
    position: absolute;
    top: 3em;
    left: 50%;
    width: 4.375em;
    height: 4.375em;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.icon_contain .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    fill: #fff;
    width: 35%;
    height: 35%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: fill 1s ease;
    transition: fill 1s ease;
}
.logo {
    position: absolute;
    width: 4.375em;
    height: 4.375em;
    top: 3em;
    left: 50%;
    fill: #eb3f32;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.icon_contain::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 73%;
    height: 73%;
    opacity: 1;
    background: #eb3f32;
    border-radius: 0.125em;
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}
.logo_reveal .icon_contain::before {
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease;
}
.logo_reveal:hover .icon_contain .icon {
    fill: #eb3f32;
}
.logo_reveal:hover .icon_contain::before {
    opacity: 0;
}
.logo_grow .logo {
    -webkit-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}
.logo_grow .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
}
.logo_grow:hover .logo {
    -webkit-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
}
.logo_grow:hover .icon_contain .icon {
    fill: #eb3f32;
}
.logo_grow:hover .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
}
.logo_grow_alt .logo {
    -webkit-animation: grow_alt 1s reverse;
    animation: grow_alt 1s reverse;
    -webkit-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
}
.logo_grow_alt .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
}
.logo_grow_alt:hover .logo {
    -webkit-animation: grow_alt 0.7s ease-out;
    animation: grow_alt 0.7s ease-out;
    -webkit-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
}
.logo_grow_alt:hover .icon_contain .icon {
    fill: #eb3f32;
}
.logo_grow_alt:hover .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
}
@-webkit-keyframes grow_alt {
    0% {
        -webkit-transform: translateX(-50%) scale(0);
        transform: translateX(-50%) scale(0);
    }
    80% {
        -webkit-transform: translateX(-50%) scale(1.2);
        transform: translateX(-50%) scale(1.2);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}
@keyframes grow_alt {
    0% {
        -webkit-transform: translateX(-50%) scale(0);
        transform: translateX(-50%) scale(0);
    }
    80% {
        -webkit-transform: translateX(-50%) scale(1.2);
        transform: translateX(-50%) scale(1.2);
    }
    100% {
        -webkit-transform: translateX(-50%) scale(1);
        transform: translateX(-50%) scale(1);
    }
}
.logo_rotate .logo {
    -webkit-transform: translateX(-50%) rotate(90deg);
    -ms-transform: translateX(-50%) rotate(90deg);
    transform: translateX(-50%) rotate(90deg);
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}
.logo_rotate .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.logo_rotate:hover .logo {
    -webkit-transform: translateX(-50%) rotate(0);
    -ms-transform: translateX(-50%) rotate(0);
    transform: translateX(-50%) rotate(0);
}
.logo_rotate:hover .icon_contain .icon {
    fill: #eb3f32;
}
.logo_rotate:hover .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    -ms-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(135deg);
    opacity: 0;
}
.logo_rotate_alt .logo {
    -webkit-animation: rotate_alt 1s reverse;
    animation: rotate_alt 1s reverse;
    -webkit-transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
}
.logo_rotate_alt .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
}
.logo_rotate_alt:hover .logo {
    -webkit-animation: rotate_alt 0.7s ease-out;
    animation: rotate_alt 0.7s ease-out;
    -webkit-transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
}
.logo_rotate_alt:hover .icon_contain .icon {
    fill: #eb3f32;
}
.logo_rotate_alt:hover .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(135deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(135deg) scale(0);
    transform: translate(-50%, -50%) rotate(135deg) scale(0);
    opacity: 0;
}
@-webkit-keyframes rotate_alt {
    0% {
        -webkit-transform: translateX(-50%) rotate(90deg) scale(0);
        transform: translateX(-50%) rotate(90deg) scale(0);
    }
    80% {
        -webkit-transform: translateX(-50%) rotate(-15deg) scale(1.2);
        transform: translateX(-50%) rotate(-15deg) scale(1.2);
    }
    100% {
        -webkit-transform: translateX(-50%) rotate(0) scale(1);
        transform: translateX(-50%) rotate(0) scale(1);
    }
}
@keyframes rotate_alt {
    0% {
        -webkit-transform: translateX(-50%) rotate(90deg) scale(0);
        transform: translateX(-50%) rotate(90deg) scale(0);
    }
    80% {
        -webkit-transform: translateX(-50%) rotate(-15deg) scale(1.2);
        transform: translateX(-50%) rotate(-15deg) scale(1.2);
    }
    100% {
        -webkit-transform: translateX(-50%) rotate(0) scale(1);
        transform: translateX(-50%) rotate(0) scale(1);
    }
}
.logo_grow_rotate .logo {
    -webkit-transform: translateX(-50%) rotate(90deg) scale(0);
    -ms-transform: translateX(-50%) rotate(90deg) scale(0);
    transform: translateX(-50%) rotate(90deg) scale(0);
    -webkit-transition: -webkit-transform 1s ease;
    transition: transform 1s ease;
}
.logo_grow_rotate .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -ms-transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
    transition: opacity 1s ease, transform 1s ease;
}
.logo_grow_rotate:hover .logo {
    -webkit-transform: translateX(-50%) rotate(0) scale(1);
    -ms-transform: translateX(-50%) rotate(0) scale(1);
    transform: translateX(-50%) rotate(0) scale(1);
}
.logo_grow_rotate:hover .icon_contain .icon {
    fill: #eb3f32;
}
.logo_grow_rotate:hover .icon_contain::before {
    -webkit-transform: translate(-50%, -50%) rotate(135deg) scale(0);
    -ms-transform: translate(-50%, -50%) rotate(135deg) scale(0);
    transform: translate(-50%, -50%) rotate(135deg) scale(0);
    opacity: 0;
}
.grid li {
    width: 50%;
    padding: 3em 0;
    float: left;
    border-right: 1px solid rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}
.grid li:nth-child(2n) {
    border-right: none;
}
.grid li:last-child {
    border-bottom: none;
}
.grid li:nth-last-child(2) {
    border-bottom: none;
}
@media (min-width: 45em) {
    .grid li {
        width: 33.33333%;
    }
    .grid li:nth-child(2n) {
        border-right: 1px solid rgba(0, 0, 0, 0.25);
    }
    .grid li:nth-child(3) {
        border-right: none;
    }
    .grid li:last-child {
        border-right: none;
        border-bottom: none;
    }
    .grid li:nth-last-child(2),
    .grid li:nth-last-child(3) {
        border-bottom: none;
    }
}

HTML

<ul class="rollovers grid">
    <li class="logo_reveal">
        <svg class="logo" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70">
            <path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"
            />
        </svg>
        <span class="icon_contain">
      <svg class="icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
    </span>
        <a href="#">Logo Reveal</a>
    </li>
    <li class="logo_grow">
        <svg class="logo" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70">
            <path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"
            />
        </svg>
        <span class="icon_contain">
      <svg class="icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
    </span>
        <a href="#">Logo Grow</a>
    </li>
    <li class="logo_grow_alt">
        <svg class="logo" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70">
            <path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"
            />
        </svg>
        <span class="icon_contain">
      <svg class="icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
    </span>
        <a href="#">Logo Grow Alt</a>
    </li>
    <li class="logo_rotate">
        <svg class="logo" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70">
            <path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"
            />
        </svg>
        <span class="icon_contain">
      <svg class="icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
    </span>
        <a href="#">Logo Rotate</a>
    </li>
    <li class="logo_rotate_alt">
        <svg class="logo" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70">
            <path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"
            />
        </svg>
        <span class="icon_contain">
      <svg class="icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
    </span>
        <a href="#">Logo Rotate Alt</a>
    </li>
    <li class="logo_grow_rotate">
        <svg class="logo" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 70 70" enable-background="new 0 0 70 70">
            <path d="M36.4 61.2c-.7.7-1.9.7-2.7 0l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.4c-.7.7-.7 1.9 0 2.7l4.2 4.2c.7.7 1.9 1.9 2.7 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7 1.9-1.9 2.7-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2zM61.2 33.8c.7.7.7 1.9 0 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.2-4.2c.7-.7 1.9-1.9 2.7-2.7l1.4-1.4c.7-.7.7-1.9 0-2.7l-1.4-1.5c-.7-.7-1.9-1.9-2.7-2.7l-4.2-4.2c-.7-.7-1.9-.7-2.7 0l-1.4 1.5c-.7.7-.7 1.9 0 2.7l4.2 4.2zM33.6 8.8c.7-.7 1.9-.7 2.7 0l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.2c-.7-.7-1.9-1.9-2.7-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-1.5 1.4c-.7.7-1.9 1.9-2.7 2.7l-4.2 4.2c-.7.7-.7 1.9 0 2.7l1.4 1.4c.7.7 1.9.7 2.7 0l4.3-4.2zM8.8 36.2c-.7-.7-.7-1.9 0-2.7l4.2-4.2c.7-.7.7-1.9 0-2.7l-1.4-1.4c-.7-.7-1.9-.7-2.7 0l-4.2 4.2c-.7.7-1.9 1.9-2.7 2.7l-1.4 1.4c-.7.7-.7 1.9 0 2.7l1.4 1.5c.7.7 1.9 1.9 2.7 2.7l4.2 4.2c.7.7 1.9.7 2.7 0l1.4-1.4c.7-.7.7-1.9 0-2.7l-4.2-4.3z"
            />
        </svg>
        <span class="icon_contain">
      <svg class="icon" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 50 50" enable-background="new 0 0 50 50"><g><circle cx="4.7" cy="9.4" r="4.7"/><circle cx="4.7" cy="25" r="4.7"/><circle cx="4.7" cy="40.6" r="4.7"/><path d="M18.8 12.5h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.3 3.1 3.1 3.1zM46.9 21.9h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1zM46.9 37.5h-28.1c-1.7 0-3.1 1.4-3.1 3.1s1.4 3.1 3.1 3.1h28.1c1.7 0 3.1-1.4 3.1-3.1s-1.4-3.1-3.1-3.1z"/></g></svg>
    </span>
        <a href="#">Logo Grow Rotate</a>
    </li>
</ul>

有揭开、放大、缩小、旋转以及复合效果。红底图标设计非常喜气。适合节假日通告、营销类页面。

svg, logo，动画图标

编辑器支持Emmet

快捷键

有揭开、放大、缩小、旋转以及复合效果。红底图标设计非常喜气。适合节假日通告、营销类页面。

svg, logo，动画图标

鼠标悬停时浮起的渐变色SVG动态网格

6个带简单交互动画的SVG图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：