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

SVG Icons：时钟、地图标识、卫星等。

svg, icon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700,300);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption,
th,
td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
q,
blockquote {
    quotes: none;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
    content: "";
    content: none;
}
a img {
    border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
body {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    text-align: center;
    color: #444;
    background: #d0d0d0;
}
main {
    margin-bottom: 3em;
}
header {
    margin-bottom: 2em;
}
h1 {
    font-size: 2em;
    margin: 1.4em 0 1em;
}
h2 {
    margin: 0 auto;
    width: 16em;
    line-height: 1.4em;
}
strong {
    font-weight: 700;
}
p {
    line-height: 1.5em;
    margin-bottom: 1em;
}
p:last-child {
    margin: 0;
}
div {
    position: relative;
}
[aria-hidden="true"] {
    pointer-events: none;
    position: absolute;
    z-index: 0;
    opacity: 0;
}
.flex-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.absolute {
    position: absolute;
}
[role='link'] {
    display: inline-block;
    border-radius: .1em;
    padding: 1em;
    cursor: pointer;
    -webkit-transition: all 0.3s cubic-bezier(0.46, -0.44, 0.43, 1.43);
    transition: all 0.3s cubic-bezier(0.46, -0.44, 0.43, 1.43);
}
[role='link']:hover {
    background-color: #f5f5f5;
}
g,
line,
path,
circle {
    -webkit-transition: all 0.3s cubic-bezier(0.46, -0.44, 0.43, 1.43);
    transition: all 0.3s cubic-bezier(0.46, -0.44, 0.43, 1.43);
    -webkit-transform-origin: 2em 2em;
    transform-origin: 2em 2em;
}
.icon {
    width: 4em;
    height: 4em;
    margin: .5em;
    padding: .5em;
    border-radius: .1em;
    -webkit-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.icon.huge {
    font-size: 3em;
}
.icon:hover {
    background-color: #f5f5f5;
}
.icon:hover line,
.icon:hover path,
.icon:hover circle {
    stroke: #FF389D;
}
.icon_container {
    width: 19em;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: .5em;
    margin-bottom: 2em;
    background: white;
    border-radius: .1em;
    box-shadow: 0 1em 4em -1em rgba(0, 0, 0, 0.4), 0 2em 5em -2em rgba(0, 0, 0, 0.2);
}
.icon-dial_dot:nth-child(1) {
    -webkit-transform: rotate(0deg) translateY(-1.2em);
    transform: rotate(0deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(2) {
    -webkit-transform: rotate(45deg) translateY(-1.2em);
    transform: rotate(45deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(3) {
    -webkit-transform: rotate(90deg) translateY(-1.2em);
    transform: rotate(90deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(4) {
    -webkit-transform: rotate(135deg) translateY(-1.2em);
    transform: rotate(135deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(5) {
    -webkit-transform: rotate(180deg) translateY(-1.2em);
    transform: rotate(180deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(6) {
    -webkit-transform: rotate(225deg) translateY(-1.2em);
    transform: rotate(225deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(7) {
    -webkit-transform: rotate(270deg) translateY(-1.2em);
    transform: rotate(270deg) translateY(-1.2em);
}
.icon-dial_dot:nth-child(8) {
    -webkit-transform: rotate(315deg) translateY(-1.2em);
    transform: rotate(315deg) translateY(-1.2em);
}
.icon-dial .icon-dial_dot,
.icon-dial .icon-dial_mark,
.icon-dial .icon-dial_center {
    -webkit-transition-duration: 0.6s;
    transition-duration: 0.6s;
}
.icon-dial .icon-dial_mark {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.icon-dial:hover .icon-dial_mark {
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
}
.icon-atom g {
    -webkit-transition-duration: 1.2s;
    transition-duration: 1.2s;
}
.icon-atom_orbit:nth-of-type(1) {
    -webkit-transform: rotateZ(120deg) rotateY(65deg);
    transform: rotateZ(120deg) rotateY(65deg);
}
.icon-atom_orbit:nth-of-type(2) {
    -webkit-transform: rotateZ(240deg) rotateY(65deg);
    transform: rotateZ(240deg) rotateY(65deg);
}
.icon-atom_orbit:nth-of-type(3) {
    -webkit-transform: rotateZ(360deg) rotateY(65deg);
    transform: rotateZ(360deg) rotateY(65deg);
}
.icon-atom:hover g {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.icon-adjustments_animation circle {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.icon-adjustments_animation line {
    stroke-dasharray: 3em, 1em;
    stroke-dashoffset: 7.5em;
}
.icon-adjustments_animation:nth-child(1) circle {
    -webkit-transform: translateY(2.37em);
    transform: translateY(2.37em);
}
.icon-adjustments_animation:nth-child(1) line {
    stroke-dashoffset: 5.13em;
}
.icon-adjustments_animation:nth-child(2) circle {
    -webkit-transform: translateY(1.29em);
    transform: translateY(1.29em);
}
.icon-adjustments_animation:nth-child(2) line {
    stroke-dashoffset: 6.21em;
}
.icon-adjustments_animation:nth-child(3) circle {
    -webkit-transform: translateY(1.71em);
    transform: translateY(1.71em);
}
.icon-adjustments_animation:nth-child(3) line {
    stroke-dashoffset: 5.79em;
}
.icon-adjustments:hover .icon-adjustments_animation:nth-child(1) circle {
    -webkit-transform: translateY(0.78em);
    transform: translateY(0.78em);
}
.icon-adjustments:hover .icon-adjustments_animation:nth-child(1) line {
    stroke-dashoffset: 6.72em;
}
.icon-adjustments:hover .icon-adjustments_animation:nth-child(2) circle {
    -webkit-transform: translateY(1.86em);
    transform: translateY(1.86em);
}
.icon-adjustments:hover .icon-adjustments_animation:nth-child(2) line {
    stroke-dashoffset: 5.64em;
}
.icon-adjustments:hover .icon-adjustments_animation:nth-child(3) circle {
    -webkit-transform: translateY(0.39em);
    transform: translateY(0.39em);
}
.icon-adjustments:hover .icon-adjustments_animation:nth-child(3) line {
    stroke-dashoffset: 7.11em;
}
.icon-geolocation {
    -webkit-perspective: 90em;
    perspective: 90em;
}
.icon-geolocation_sparks {
    -webkit-transform: translateY(1.3em) rotateX(70deg) rotateZ(180deg);
    transform: translateY(1.3em) rotateX(70deg) rotateZ(180deg);
}
.icon-geolocation_sparks-item {
    stroke-dasharray: .3em, 1.2em;
    stroke-dashoffset: .9em;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.icon-geolocation_sparks-item:nth-of-type(1) {
    -webkit-transform: rotate(72deg);
    transform: rotate(72deg);
}
.icon-geolocation_sparks-item:nth-of-type(2) {
    -webkit-transform: rotate(144deg);
    transform: rotate(144deg);
}
.icon-geolocation_sparks-item:nth-of-type(3) {
    -webkit-transform: rotate(216deg);
    transform: rotate(216deg);
}
.icon-geolocation_sparks-item:nth-of-type(4) {
    -webkit-transform: rotate(288deg);
    transform: rotate(288deg);
}
.icon-geolocation_sparks-item:nth-of-type(5) {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.icon-geolocation_marker {
    -webkit-transform-origin: 2em 2em;
    transform-origin: 2em 2em;
}
.icon-geolocation:hover .icon-geolocation_marker {
    -webkit-animation: jump 0.45s linear forwards;
    animation: jump 0.45s linear forwards;
}
.icon-geolocation:hover .icon-geolocation_sparks-item {
    -webkit-animation: sparks 0.45s linear forwards;
    animation: sparks 0.45s linear forwards;
    -webkit-animation-delay: 0.15s;
    animation-delay: 0.15s;
}
@-webkit-keyframes jump {
    10% {
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    30% {
        -webkit-transform: translateY(-0.7em);
        transform: translateY(-0.7em);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    80% {
        -webkit-transform: translateY(-0.3em);
        transform: translateY(-0.3em);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
}
@keyframes jump {
    10% {
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    30% {
        -webkit-transform: translateY(-0.7em);
        transform: translateY(-0.7em);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    80% {
        -webkit-transform: translateY(-0.3em);
        transform: translateY(-0.3em);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
}
@-webkit-keyframes sparks {
    100% {
        stroke-dashoffset: 2.1em;
    }
}
@keyframes sparks {
    100% {
        stroke-dashoffset: 2.1em;
    }
}
.icon-aperture_tooths circle {
    stroke-dasharray: 1.44em, 8.4em;
    stroke-dashoffset: 3.6em;
}
.icon-aperture_tooths circle:nth-child(1) {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
.icon-aperture_tooths circle:nth-child(2) {
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}
.icon-aperture_tooths circle:nth-child(3) {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
.icon-aperture_tooths circle:nth-child(4) {
    -webkit-transform: rotate(240deg);
    transform: rotate(240deg);
}
.icon-aperture_tooths circle:nth-child(5) {
    -webkit-transform: rotate(300deg);
    transform: rotate(300deg);
}
.icon-aperture_tooths circle:nth-child(6) {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.icon-aperture:hover .icon-aperture_tooths circle {
    -webkit-animation: aperture 0.9s cubic-bezier(0.46, -0.44, 0.43, 1.43) forwards;
    animation: aperture 0.9s cubic-bezier(0.46, -0.44, 0.43, 1.43) forwards;
}
@-webkit-keyframes aperture {
    50% {
        stroke-dashoffset: 2.6em;
    }
}
@keyframes aperture {
    50% {
        stroke-dashoffset: 2.6em;
    }
}
.icon-alarm_bells {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    -webkit-animation: none;
    animation: none;
}
.icon-alarm_arms_long,
.icon-alarm_arms_short {
    -webkit-transition: all 0.3s cubic-bezier(0.46, -0.44, 0.43, 1.43);
    transition: all 0.3s cubic-bezier(0.46, -0.44, 0.43, 1.43);
}
.icon-alarm_arms_long {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
.icon-alarm_arms_short {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}
.icon-alarm:hover .icon-alarm_arms_long {
    -webkit-transform: rotateZ(230deg);
    transform: rotateZ(230deg);
}
.icon-alarm:hover .icon-alarm_arms_short {
    -webkit-transform: rotateZ(-35deg);
    transform: rotateZ(-35deg);
}
.icon-alarm:hover .icon-alarm_bells {
    -webkit-transform: rotateZ(0);
    transform: rotateZ(0);
    -webkit-animation: ringBell 0.6s linear forwards;
    animation: ringBell 0.6s linear forwards;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
@-webkit-keyframes ringBell {
    12.5% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    25% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    37.5% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    50% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    62.5% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    75% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    87.5% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
}
@keyframes ringBell {
    12.5% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    25% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    37.5% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    50% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    62.5% {
        -webkit-transform: rotateZ(-10deg);
        transform: rotateZ(-10deg);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
    75% {
        -webkit-transform: rotateZ(10deg);
        transform: rotateZ(10deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
    }
    87.5% {
        -webkit-transform: rotateZ(0);
        transform: rotateZ(0);
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }
}

HTML

SVG Icons：时钟、地图标识、卫星等。

svg, icon

编辑器支持Emmet

快捷键

SVG Icons：时钟、地图标识、卫星等。

svg, icon

带有弹窗和微动画的交互式SVG都市游览地图

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：