SVG制作的桃子动画图标

SVG Peach 使用CSS3实现桃子的叶子轻轻的摆动。

svg, fruit

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}
html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    position: relative;
    padding: 3rem;
    background: #ff9a00;
}
.container {
    width: 100%;
    max-width: 400px;
    margin: auto;
}
.peach-svg {
    width: auto;
    max-width: calc(95%);
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    overflow: visible;
}
.peach-svg .leaf {
    transision: all 5s;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-animation: sway 5s both infinite;
    animation: sway 5s both infinite;
}
@-webkit-keyframes sway {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes sway {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-7deg);
        transform: rotate(-7deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

HTML

SVG Peach 使用CSS3实现桃子的叶子轻轻的摆动。

svg, fruit

编辑器支持Emmet

快捷键

SVG Peach 使用CSS3实现桃子的叶子轻轻的摆动。

svg, fruit

使用SVG path实现图标的描边（绘制轮廓）动画

CSS+SVG实现动画效果的APP图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：