SVG 网页聊天应用界面动效设计

IMPLEMENT WEB SPEECH API && SPEECH SYNTHESIS API THING

chat

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.bubbles circle {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}
.bubbles circle:nth-of-type(1) {
    -webkit-animation: inflate 0.2s 0.05s forwards, undulate 2s 0.65s alternate infinite;
    animation: inflate 0.2s 0.05s forwards, undulate 2s 0.65s alternate infinite;
}
.bubbles circle:nth-of-type(2) {
    -webkit-animation: inflate 0.2s 0.1s forwards, undulate 2s 1.15s alternate infinite;
    animation: inflate 0.2s 0.1s forwards, undulate 2s 1.15s alternate infinite;
}
.bubbles circle:nth-of-type(3) {
    -webkit-animation: inflate 0.2s 0.15s forwards, undulate 2s 3.2s alternate infinite;
    animation: inflate 0.2s 0.15s forwards, undulate 2s 3.2s alternate infinite;
}
.bubbles circle:nth-of-type(4) {
    -webkit-animation: inflate 0.2s 0.2s forwards, undulate 2s 1.9s alternate infinite;
    animation: inflate 0.2s 0.2s forwards, undulate 2s 1.9s alternate infinite;
}
.bubbles circle:nth-of-type(5) {
    -webkit-animation: inflate 0.2s 0.25s forwards, undulate 2s 2.45s alternate infinite;
    animation: inflate 0.2s 0.25s forwards, undulate 2s 2.45s alternate infinite;
}
.bubbles circle:nth-of-type(6) {
    -webkit-animation: inflate 0.2s 0.3s forwards, undulate 2s 1.3s alternate infinite;
    animation: inflate 0.2s 0.3s forwards, undulate 2s 1.3s alternate infinite;
}
.bubbles circle:nth-of-type(7) {
    -webkit-animation: inflate 0.2s 0.35s forwards, undulate 2s 2.2s alternate infinite;
    animation: inflate 0.2s 0.35s forwards, undulate 2s 2.2s alternate infinite;
}
.bubbles circle:nth-of-type(8) {
    -webkit-animation: inflate 0.2s 0.4s forwards, undulate 2s 2.05s alternate infinite;
    animation: inflate 0.2s 0.4s forwards, undulate 2s 2.05s alternate infinite;
}
.bubbles circle:nth-of-type(9) {
    -webkit-animation: inflate 0.2s 0.45s forwards, undulate 2s 1.75s alternate infinite;
    animation: inflate 0.2s 0.45s forwards, undulate 2s 1.75s alternate infinite;
}
.bubbles circle:nth-of-type(10) {
    -webkit-animation: inflate 0.2s 0.5s forwards, undulate 2s 1.45s alternate infinite;
    animation: inflate 0.2s 0.5s forwards, undulate 2s 1.45s alternate infinite;
}
.bubbles circle:nth-of-type(11) {
    -webkit-animation: inflate 0.2s 0.55s forwards, undulate 2s 0.85s alternate infinite;
    animation: inflate 0.2s 0.55s forwards, undulate 2s 0.85s alternate infinite;
}
.bubbles circle:nth-of-type(12) {
    -webkit-animation: inflate 0.2s 0.6s forwards, undulate 2s 0.45s alternate infinite;
    animation: inflate 0.2s 0.6s forwards, undulate 2s 0.45s alternate infinite;
}
.bubbles circle:nth-of-type(13) {
    -webkit-animation: inflate 0.2s 0.65s forwards, undulate 2s 0.15s alternate infinite;
    animation: inflate 0.2s 0.65s forwards, undulate 2s 0.15s alternate infinite;
}
.bubbles circle:nth-of-type(14) {
    -webkit-animation: inflate 0.2s 0.7s forwards, undulate 2s 2.25s alternate infinite;
    animation: inflate 0.2s 0.7s forwards, undulate 2s 2.25s alternate infinite;
}
.bubbles circle:nth-of-type(15) {
    -webkit-animation: inflate 0.2s 0.75s forwards, undulate 2s 3.6s alternate infinite;
    animation: inflate 0.2s 0.75s forwards, undulate 2s 3.6s alternate infinite;
}
.bubbles circle:nth-of-type(16) {
    -webkit-animation: inflate 0.2s 0.8s forwards, undulate 2s 1.45s alternate infinite;
    animation: inflate 0.2s 0.8s forwards, undulate 2s 1.45s alternate infinite;
}
@-webkit-keyframes inflate {
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes inflate {
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@-webkit-keyframes undulate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.985);
        transform: scale(0.985);
    }
}
@keyframes undulate {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% {
        -webkit-transform: scale(0.985);
        transform: scale(0.985);
    }
}
.assistant {
    margin: 0 auto;
    white-space: nowrap;
    border-radius: 0.25em;
}
.cssanimations .assistant {
    width: 45vmin;
    -webkit-animation: expand 1s 2s forwards;
    animation: expand 1s 2s forwards;
}
@-webkit-keyframes expand {
    100% {
        padding: 0 1em;
        width: 100%;
    }
}
@keyframes expand {
    100% {
        padding: 0 1em;
        width: 100%;
    }
}
.juju {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
}
.cssanimations .juju {
    width: 100%;
    -webkit-animation: wiggle-reveal 1s 1s forwards, slide-left 1s 2s forwards;
    animation: wiggle-reveal 1s 1s forwards, slide-left 1s 2s forwards;
    opacity: 0;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
}
@-webkit-keyframes wiggle-reveal {
    30% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    60%,
    80% {
        opacity: 1;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    70%,
    90% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@keyframes wiggle-reveal {
    30% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    60%,
    80% {
        opacity: 1;
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }
    70%,
    90% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }
}
@-webkit-keyframes slide-left {
    100% {
        width: 25%;
    }
}
@keyframes slide-left {
    100% {
        width: 25%;
    }
}
.label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}
.cssanimations .label {
    overflow: hidden;
    width: 0;
    -webkit-animation: dictate 1.5s 3s forwards;
    animation: dictate 1.5s 3s forwards;
}
@-webkit-keyframes dictate {
    100% {
        width: 70%;
    }
}
@keyframes dictate {
    100% {
        width: 70%;
    }
}
.speech-trigger {
    display: none;
    background: none;
    border: 0;
    width: 100%;
    color: transparent;
}
.speech-trigger:after {
    display: block;
    padding: 0 0.5em;
    content: '\f130';
    font-family: 'FontAwesome';
    font-size: 2em;
    color: #a4d00b;
}
.speech-trigger em {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
}
*:before,
*:after {
    pointer-events: none;
}
html {
    height: 100%;
    font-family: 'Comfortaa';
    background: #eee;
    color: #a4d00b;
    font-size: 3.5vmin;
}
h1,
h2,
h3,
h4 {
    margin-top: 0;
}

HTML

<div class="assistant">
    <svg version="1.1" class="juju" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 220 200.3" enable-background="new 0 0 220 200.3" xml:space="preserve">
        <g id="juju-face">
            <path fill="#92c214" stroke="transparent" stroke-miterlimit="10" d="M115.4,20c0,0-84,46-93.3,91.3s36.3,60,55,64.7s58.3,4.3,71,2
        c12.7-2.3,56.7-15,52-58c0,0,2.3-27-30-55S115.4,20,115.4,20z" />
            <ellipse fill="#222" stroke="transparent" stroke-miterlimit="10" cx="77.8" cy="120.3" rx="6.3" ry="9" />
            <ellipse fill="#222" stroke="transparent" stroke-miterlimit="10" cx="144.2" cy="120.3" rx="6.3" ry="9" />
            <path fill="transparent" stroke="#222" stroke-miterlimit="10" d="M95.6,137.4c0,0,4.3,9.7,15.2,2.3c0,0,10.2,7.6,15.8,0.2" />
        </g>
        <g id="juju-pin">
            <path fill="#eaf47a" stroke="transparent" stroke-miterlimit="10" d="M141.3,73c0,0-9.9-1.8-9.5-5.6s8.6-2.3,10.4,0.9c0,0-2.4-5.5,1-6 s5.6,4.1,5.8,5.4c0,0,5-1.9,7.3,0.8s0.9,5,0,5.5c0,0,6.6,5.4,6.3,7.4s-5.3,0.8-7.9-1.1c0,0,2.5,5.6,0.4,6.3s-6.5,0-7.8-6.3 c0,0-4.7,3.8-9.1,0.8C133.5,77.9,141.3,73,141.3,73z"
            />
        </g>
    </svg>
    <h2 class="label">What could I do for ya?</h2>
</div>

IMPLEMENT WEB SPEECH API && SPEECH SYNTHESIS API THING

chat

编辑器支持Emmet

快捷键

IMPLEMENT WEB SPEECH API && SPEECH SYNTHESIS API THING

chat

一款响应式即时聊天应用界面设计

HTML5仿Slack聊天移动应用网页模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：