SVG 叼着烟斗吸烟的船长

The Captain 吸烟的动画使用SVG circle图形加上CSS3 keyframes实现。

SVG

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
body {
    background: rgb(20, 20, 20);
    margin: 0;
}
svg {
    max-width: 50%;
    min-width: 300px;
    height: auto;
    max-height: 100%;
    margin: 2% auto;
    padding: 0;
    position: relative;
    display: block;
    overflow: visible;
}
/* FARBEN */

svg g#captain-basics {
    fill: rgb(50, 50, 50);
}
svg g#captain-outfit {
    fill: rgb(220, 220, 220);
}
svg g#smoke {
    fill: rgb(255, 81, 67);
}
/* RAUCH-ANIMATIONEN */

#smokeball-00 {} #smokeball-01 {
    -webkit-animation: smoking-r ease-in-out 5s 1s infinite;
}
#smokeball-02 {
    -webkit-animation: smoking-l ease-in-out 5s 2s infinite;
}
#smokeball-03 {
    -webkit-animation: smoking-r ease-in-out 5s 3s infinite;
}
#smokeball-04 {
    -webkit-animation: smoking-l ease-in-out 5s 4s infinite;
}
#smokeball-05 {
    -webkit-animation: smoking-r ease-in-out 5s 5s infinite;
}
@-webkit-keyframes smoking-r {
    0% {
        transform: translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) translateY(-600%);
        opacity: 0;
    }
}
@-webkit-keyframes smoking-l {
    0% {
        transform: translateX(0%) translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-60%) translateY(-600%);
        opacity: 0;
    }
}
button {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 50%;
    min-width: 180px;
    height: 50px;
    background-color: rgb(255, 81, 67);
    color: rgb(255, 255, 255);
    border: none;
    font-family: 'Cutive Mono' sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.2em;
}
button:hover {
    -webkit-box-shadow: inset 0 0 10px rgb(0, 0, 0);
    -moz-box-shadow: inset 0 0 10px rgb(0, 0, 0);
    -ms-box-shadow: inset 0 0 10px rgb(0, 0, 0);
    -o-box-shadow: inset 0 0 10px rgb(0, 0, 0);
    box-shadow: inset 0 0 10px rgb(0, 0, 0);
}
button:active {}

HTML

<g id="captain-basics">
        <path id="arm-r2" d="M697.027,830.914l-0.002-0.008l-81.969-44.172l-11.021,2.009l89.675,48.325
		c0.527,0.284,1.096,0.419,1.654,0.419c1.244,0,2.449-0.665,3.08-1.838C699.361,833.95,698.726,831.83,697.027,830.914z" />
        <path id="arm-r1" d="M838.386,920.057c-0.629,0-1.264-0.169-1.838-0.524l-43.234-26.799
		c-1.641-1.017-2.146-3.172-1.129-4.813c1.016-1.641,3.172-2.146,4.813-1.13l43.234,26.799c1.641,1.017,2.146,3.172,1.129,4.813
		C840.701,919.47,839.556,920.057,838.386,920.057L838.386,920.057z" />

<g id="captain-outfit">
        <path id="anchor" d="M449.154,429.549l-22.969-2.496l-1.498-4.494l22.469-3.995l-1.498-5.492
		c0,0-19.883-4.688-17.975-16.071c1.906-11.384,3.199-23.734,9.986-24.875c6.785-1.14,24.986-0.753,27.463,8.489
		c2.477,9.241,5.506,22.513-7.49,30.454c0,0-2.096,5.307-0.998,6.996s21.971-2.497,21.971-2.497v6.991l-20.973,4.963
		c0,0,5.818,37.48,9.4,42.475c3.582,4.993,6.105,5.61,11.572,0c5.467-5.611,13.428-20.12,10.373-23.966
		c-3.047-3.851-4.395-6.497-4.395-6.497s12.559-3.725,14.98-8.488l8.488,21.472l-5.992-1.498c0,0-6.672,25.194-23.469,34.628
		s-18.324,6.137-22.869,3.648c-4.543-2.487-33.555-24.793-33.555-24.793l-5.493,3.496c0,0,2.151-9.641,1.498-11.984
		c-0.654-2.344-1.498-11.484-1.498-11.484s12.721,6.306,15.979,6.461l-5.23,8.27c0,0,32.127,19.906,30.695,15.604
		s-8.986-45.314-8.986-45.314H449.154z" />
        <path id="eyebrow" d="M357.675,603.552c0.915,4.573,4.573,9.603,2.744,10.517c-1.829,0.915-3.658,2.744-1.372,3.201
		s0-2.743,5.029-2.743c5.03,0,6.402-3.658,10.976-2.743c4.572,0.914,1.372,2.285,6.401-0.458c5.03-2.743,9.603-4.115,9.603-6.858
		s4.115-2.287,5.487,0c1.371,2.286,3.658,6.401,5.944,2.743c2.286-3.657,3.658-5.029,5.944-4.115
		c2.286,0.915,3.201,2.743,8.688,2.743c5.487,0,3.657-5.029,8.688-4.572c5.029,0.458,8.23,3.658,10.059,3.658
		c1.83,0,2.744-0.914,4.572-0.914c1.83,0,4.115-4.573,4.115-6.402s3.201-3.2-0.914-6.401c-4.115-3.2-5.029-2.286-7.773-2.286
		s-0.914,0.457-5.486-1.372s-5.945,0-8.689-0.457c-2.743-0.458,5.031-5.03-4.115-2.287c-9.145,2.744-16.919-0.457-16.919-0.457
		s3.658-0.457-1.371,1.829c-5.03,2.286-6.401,4.115-7.774,4.115c-1.371,0-3.2,0-5.029-0.914c-1.829-0.915-3.658-4.116-4.115-1.829
		c-0.457,2.286,1.372-1.372-0.457,2.286s-5.944,5.487-7.316,4.573c-1.371-0.915,0.457-5.03-2.743-1.372
		c-3.201,3.658-3.658,9.603-7.316,7.316s-3.658-2.286-3.658-2.286L357.675,603.552L357.675,603.552z" />
        <path id="uniform-left" d="M132.474,843.06c-2.896,1.316-8.063,4.061-14.598,7.682l14.355,27.807l-6.211,3.206
		l-14.249-27.601c-3.847,2.167-8.004,4.533-12.339,7.021l14.84,28.388l-6.195,3.238l-14.709-28.137
		c-4.334,2.501-8.776,5.079-13.207,7.661l14.417,27.158l-6.174,3.278l-14.285-26.91c-4.27,2.496-8.474,4.962-12.504,7.332
		l14.171,26.742l-6.177,3.273l-14.024-26.465c-15.798,9.313-27.631,16.372-27.631,16.372l20.015,45.961
		c0,0,97.85-53.375,103.038-57.823c5.188-4.448,36.323-48.926,40.771-52.631c4.447-3.707-42.997-2.966-59.306,4.447H132.474z" />
        <path id="uniform-right" d="M789.802,859.623c-0.256-0.102-0.674-0.323-1.203-0.63l-12.643,23.329l-6.146-3.331
		l12.854-23.718c-3.203-2.07-6.844-4.459-9.648-6.216l-13.494,25.897l-6.199-3.229l13.674-26.243
		c-2.281-1.465-5.746-3.839-9.402-6.388l-16.002,26.888l-6.006-3.575l16.271-27.341c-3.797-2.679-7.221-5.12-9.094-6.446
		l-15.533,25.775l-5.988-3.609l14.801-24.557c-5.846-1.238-14.373-2.731-14.373-2.731l-47.098-2.286l3.199,6.858l32.924,38.868
		l78.652,38.411l18.289-31.552C807.636,873.799,792.089,860.537,789.802,859.623L789.802,859.623z" />
        <path id="face" d="M711.958,721.078l-0.004-0.001c0-11.835-25.846-17.225-49.859-17.225s-49.857,5.39-49.857,17.225
		c0,0.089,0.006,0.176,0.008,0.263c-0.084,0.986-1.08,13.149,0.15,28.544l-33.141,13.697c-2.312-3.29-1.897-4.045,0.348-4.794
		c3.225-1.075,4.301-2.15,5.912-4.3c1.613-2.149-11.824-12.361-3.762-16.66c8.063-4.3,13.973-6.987,12.361-10.212
		s-4.299-2.688-4.299-7.523c0-4.837,4.299-6.987,4.836-11.287c0.539-4.3-9.137-8.062-3.762-16.123s1.613-10.211,0.537-16.66
		c-1.074-6.449-1.611-11.286-3.762-13.974c-1.893-2.365-2.537-5.979-5.229-8.643c0-0.094,0-0.187-0.012-0.281
		c-0.016-0.188-1.635-18.982-3.74-38.152c-3.025-27.555-4.965-37.236-6.25-41.046c13.553-6.873,29.111-17.48,35.045-23.277
		c8.299-8.109,5.535-17.947,2.609-28.361v0.004c-0.256-0.91-0.516-1.84-0.777-2.789c-2.402-8.749-9.488-14.32-20.492-16.11
		c-0.885-0.144-1.758-0.256-2.615-0.344c1.344-7.553,6.736-22.753,10.064-32.133c1.805-5.089,2.762-7.804,3.076-9.062
		c0.113-0.453,0.389-1.146,0.678-1.88c1.67-4.215,5.141-12.984-5.697-21.641c-0.105-0.085-0.217-0.163-0.33-0.234
		c-73.828-46.087-118.594-82.102-130.666-95.069c-6.141-6.591-19.391-4.813-40.512,5.437c-16.545,8.031-32.524,18.688-39.227,23.892
		c-8.024,6.23-39.254,22.595-69.457,38.421c-22.539,11.811-45.844,24.022-62.563,33.542c-10.82,6.16-16.771,13.883-17.687,22.952
		c-1.944,19.259,19.542,38.057,28.717,46.083c0.99,0.866,1.845,1.614,2.403,2.135c2.762,2.577,4.932,4.554,6.848,6.297
		c3.056,2.781,5.315,4.838,7.996,7.543c5.415,15.557,11.044,81.577,11.102,82.251c0.024,0.284,0.085,0.556,0.172,0.815l2.255,20.257
		c0.176,1.579,1.394,2.841,2.966,3.072c0.171,0.025,0.341,0.037,0.509,0.037c1.384,0,2.66-0.823,3.215-2.126
		c0.327-0.77,0.757-1.614,1.271-2.522c2.428,1.721,5.968,5.284,6.318,11.584c0.537,9.674-3.763,18.811,0.537,22.572
		c4.299,3.763,8.062,8.6,5.374,15.586c-2.687,6.987-5.374,6.986-5.374,12.898s3.225,10.211,2.15,16.123
		c-1.075,5.912-2.688,9.674-4.838,11.287c-2.149,1.612-3.762,1.612-3.225,5.374c0.537,3.763,1.075,11.823,3.225,13.974
		c2.15,2.149,2.15,5.911,0.537,7.523c-1.612,1.612-3.224,5.912-3.762,9.675c-0.537,3.762,0,9.136,1.075,11.286
		c1.074,2.15,6.449,6.449,4.837,10.749c-1.612,4.299-2.687,7.523-3.225,11.823c-0.537,4.3-3.762,9.137-0.537,11.287
		c3.225,2.149,8.062,5.374,8.062,5.374l1.074,10.212c0,0-4.836,0-0.537,3.762c4.3,3.762,10.749,4.3,13.437,5.912
		c2.687,1.612,3.762,1.612,3.762,9.674c0,8.061-5.912,17.197,1.612,18.811c7.524,1.612,2.149,2.688,7.524,1.612
		c5.374-1.075,11.823-4.3,12.36,4.837c0.538,9.137-2.149,17.735,2.688,15.049c4.837-2.688,8.063-8.6,8.063-8.6
		s9.673,4.837,8.599,9.674s-1.612,10.749,1.612,8.6s6.449-11.287,12.361-4.3c5.912,6.986,8.063,17.735,14.512,15.586
		s1.074-13.436,10.211-5.912c9.137,7.524,6.449,15.587,13.437,14.512c6.986-1.075,6.447-17.198,8.061-9.675
		c1.613,7.524-2.688,10.211,4.838,11.824c7.523,1.613,5.373-2.149,11.285-1.074c5.912,1.074-0.537-13.437,8.6-3.226
		c9.137,10.212,11.824,20.961,12.361,11.824s-7.523-14.511,0-10.749c7.525,3.763,6.449,12.898,15.049,10.749
		s6.986-11.286,10.211-11.286s1.613,4.837,7.523,5.912c5.912,1.074-0.537-19.885,12.361-11.286
		c12.898,8.6,13.973,5.375,14.512-0.537c0.537-5.912-12.361-12.898,2.688-8.062s22.035,8.062,18.811-4.838
		c-3.225-12.898-12.361-13.436-3.225-15.048c9.137-1.613,6.986-8.6,13.436-12.361c6.449-3.763,14.512-0.537,11.287-9.137
		s-5.912-10.211,0-9.674s0.537,4.837,4.836-8.062c4.301-12.899,13.975-6.449,10.213-16.124c-3.764-9.674-5.914-11.286-5.914-11.286
		l3.227-7.524c0,0,0.393-1.041,0.914-2.742l37.705-5.178c3.535,7.317,7.979,13.146,13.23,17.349
		c6.834,5.469,15.072,8.241,24.484,8.241c11.662,0,21.641-4.228,29.654-12.564c22.043-22.933,22.465-69.957,22.297-79.874
		C711.853,722.552,711.958,721.829,711.958,721.078z M622.144,718.099c1.553-0.958,3.861-2.035,7.23-3.095
		c7.479-2.541,19.652-4.196,33.412-4.196c22.744,0,41.182,4.52,41.182,10.093c0,3.133-5.826,5.933-14.965,7.784
		c-7.699,1.703-17.047,2.626-26.908,2.626c-12.057,0-23.348-1.378-31.791-3.878c-2.645-0.783-4.686-1.583-6.256-2.343
		c0,0-2.441-2.705-2.441-4.189C621.607,719.928,622.144,718.099,622.144,718.099z M295.662,587.285
		c-2.24-21.635-5.857-51.588-9.53-61.124c-0.172-0.445-0.432-0.851-0.766-1.191c-3.057-3.117-5.468-5.313-8.808-8.352
		c-1.9-1.729-4.053-3.69-6.783-6.237c-0.641-0.598-1.493-1.343-2.571-2.286c-7.643-6.687-27.946-24.448-26.364-40.119
		c0.675-6.688,5.449-12.604,14.189-17.58c16.614-9.458,39.864-21.642,62.347-33.425c31.875-16.703,61.983-32.479,70.497-39.091
		c6.224-4.832,22.041-15.383,37.991-23.124c24.811-12.041,31.029-8.373,32.344-6.961c12.318,13.226,57.604,49.729,131.904,96.122
		c6.619,5.37,4.986,9.493,3.408,13.482c-0.379,0.955-0.734,1.857-0.961,2.758c-0.246,0.99-1.527,4.599-2.883,8.419
		c-3.604,10.156-8.883,25.037-10.363,33.298c-5.135,0.445-14.152,1.959-27.305,3.073c-29.461,2.497-99.867,5.492-124.834,6.491
		c-24.966,0.999-58.921,9.987-102.428,34.454C306.027,556.421,298.346,572.444,295.662,587.285z M299.24,621.671l-0.095-0.841
		c8.019-16.662,23.438-47.392,38.717-58.956c16.491-12.483,52.47-25.353,93.86-30.381c41.391-5.027,79.545-2.231,102.414-4.011
		c21.438-1.668,35.768-8.592,45.08-17.683c7.041-0.253,20.434,0.746,23.4,11.554c0.266,0.963,0.529,1.906,0.789,2.83
		c3.002,10.684,4.33,16.489-0.766,21.469h0.004c-7.246,7.08-31.068,22.569-44.551,26.873c-14.16,4.518-37.129,9.955-72.963,5.013
		c-35.941-4.957-59.643-5.641-84.174-5.141c-22.078,0.449-63.221,8.623-74.92,19.918
		C316.956,601.082,306.092,612.263,299.24,621.671z M501.001,586.14c-2.469,0.66-3.338,0.949-3.338,0.949s0.127-0.51,0.123-1.167
		C498.873,586.005,499.943,586.077,501.001,586.14z M390.425,735.68c-9.136,0-6.449-10.211-11.823-4.299s-6.986,1.612-6.986-2.688
		s-5.375-12.361-8.6-12.898s-6.449-9.674-8.062-9.674c-1.613,0-11.824,8.599-6.987-4.3c4.838-12.898,2.688-12.898-2.149-12.898
		c-4.838,0-19.886-2.15-13.437-7.523c6.449-5.374,6.449-4.838,5.375-8.6s-4.3-1.612-6.987-7.524
		c-2.687-5.911-3.225-12.898-3.225-12.898s1.612-4.299,0.538-8.062c-1.075-3.763,2.149-5.912,0.537-6.987
		c-1.612-1.074-8.6-3.224-8.6-3.224s-3.225-2.688,2.688-5.375c5.912-2.688-2.15-8.062-4.3-9.137
		c-1.197-0.599-3.396-2.532-5.108-4.128c4.81-5.418,10.723-11.536,17.544-18.122c9.255-8.936,46.97-17.485,70.207-17.958
		c24.2-0.492,47.588,0.182,83.081,5.076c1.133,0.156,2.252,0.302,3.361,0.438c-1.961,0.612-2.781,1.039-4.506,2.188
		c-2.744,1.829-6.857-5.03-9.145-0.915s-7.773-0.457-6.402,5.03c1.373,5.486,2.744,12.346,4.115,12.346
		c5.354,0,0.914-2.286,7.773-0.914c6.859,1.371,5.488,0.914,10.518-0.915c5.031-1.829,8.23-0.457,8.23-0.457
		s2.287-5.487,5.945-3.658s4.572,4.115,7.316,4.115c2.742,0,4.115-2.744,9.145-0.915s0.457,0,8.688,0.458
		c8.23,0.457,8.688,1.829,11.889,0s-4.572-5.03,4.574-2.287c9.145,2.744,11.432-0.457,10.975-3.2
		c-0.459-2.743-5.945-4.572-4.572-7.316c1.371-2.744,0.914-3.658-2.287-4.573c-0.912-0.261-1.527-0.744-2.014-1.271
		c4.721-1.09,8.852-2.289,12.436-3.434c1.828-0.583,3.818-1.349,5.916-2.255c2.455,8.229,6.57,44.106,9.377,76.799h-0.002
		c0.029,0.332,0.104,0.649,0.219,0.946c-2.283,5.205-4.426,11.085-3.6,13.291c1.613,4.3,1.076,15.049,2.15,16.661
		c1.074,1.611-4.299,6.986-3.762,8.599c0.537,1.613,2.15,7.524,1.611,9.674c-0.537,2.15-3.762,12.361-5.912,13.974
		c-2.148,1.612,3.764,5.912-4.299,8.063c-8.061,2.149-8.061,1.611-8.598,6.448c-0.539,4.838,0-0.537-6.449,5.912
		s-6.449,1.612-16.123,7.524c-9.676,5.911-13.438-2.688-15.586,4.837c-2.15,7.524-7.525-4.299-8.063,1.612
		c-0.539,5.911,1.611-11.286-5.912-2.15c-7.523,9.137-13.973,8.6-15.049,4.837c-1.074-3.762,2.688-13.436-1.074-3.762
		c-3.762,9.675-14.512,7.523-16.66,4.3c-2.15-3.225,3.225-2.688-6.988-0.538c-10.211,2.15-12.898-4.299-19.348-4.837
		c-6.449-0.537-1.074,4.838-11.822,3.225c-10.75-1.612-12.362-9.137-13.974-9.137s-3.225-6.986-6.986-2.149
		c-3.763,4.837-8.063,11.824-12.361,4.3C392.575,737.83,399.563,735.68,390.425,735.68z M525.369,807.953
		c-0.707,2.832-7.789,4.956-7.08,9.205c0.707,4.249-0.709-0.708-7.789,4.249c-7.082,4.956-7.082,3.541-13.453,9.205
		c-6.373,5.664-7.791,0.707-17.703,4.248c-9.914,3.541-18.41-10.621-26.199-2.124s-19.824,6.373-21.949,4.248
		c-2.125-2.124,0.707-1.416-9.205-4.248c-9.915-2.832-13.454-7.789-16.995-9.205c-3.54-1.416-9.205-3.541-9.205-7.081
		s-0.708-9.913-0.708-9.913l2.832-5.665c12.745,6.373,19.826,8.497,21.243,0c1.416-8.497-5.665-9.913,1.416-8.497
		c7.081,1.416,7.081,2.832,9.913,2.832s6.373,4.957,10.621-0.708c4.25-5.664,9.205-9.205,13.453-7.08
		c4.25,2.124,7.789,4.248,12.037,0.708c4.25-3.541,4.25-7.79,10.623-2.125c6.371,5.665,16.285,4.957,16.285,4.957
		s3.539-3.54,5.664-2.124c1.778,1.186,5.553,1.383,12.546,2.66l-24.669,10.195c-0.044,0.019-0.081,0.046-0.125,0.065
		c-4.106,0.102-7.518,0.307-8.828,0.493c-3.311,0.474-12.91,0.998-17.873,0.503c-5.387-0.549-30.949,5.904-38.652,7.892
		c-1.869,0.482-2.993,2.389-2.511,4.258c0.407,1.576,1.826,2.623,3.382,2.623c0.289,0,0.584-0.037,0.875-0.111
		c15.549-4.013,33.342-7.987,36.211-7.706c5.764,0.577,15.938-0.02,19.557-0.537c3.42-0.487,22.146-0.921,26.574,0.408
		c1.85,0.555,3.799-0.495,4.354-2.344c0.179-0.596,0.176-1.197,0.049-1.763l15.458-2.123
		C525.741,805.325,525.596,807.044,525.369,807.953z M684.314,798.282h-0.002c-6.74,7.011-14.791,10.419-24.615,10.419
		c-14.605,0-25.512-8.013-32.42-23.815c-0.561-1.285-1.828-2.095-3.201-2.095c-0.156,0-0.316,0.01-0.477,0.032l-108.725,14.933
		l102.563-42.389c1.42-0.587,2.289-2.03,2.145-3.56c-0.795-8.416-0.867-16.1-0.75-21.572c9.211,5.494,26.674,8.067,43.266,8.067
		c16.125,0,33.076-2.43,42.473-7.61C704.054,746.9,700.925,781.001,684.314,798.282z" />
    </g>

<g id="smoke">
        <circle id="smokeball-00" cx="662" cy="705" r="28">
        </circle>

</g>

</svg>

The Captain 吸烟的动画使用SVG circle图形加上CSS3 keyframes实现。

SVG

编辑器支持Emmet

快捷键

The Captain 吸烟的动画使用SVG circle图形加上CSS3 keyframes实现。

SVG

HTML5 SVG带虹吸现象的日食动画

SVG 长按2秒才执行关闭动作的动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：