基于Mo.js实现的挤压爱心泡泡动画

字符变成爱心，然后被挤压爆破，带泡沫吹破的音效。

html5, love

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const qs = document.querySelector.bind(document);
const easingHeart = mojs.easing.path('M0,100C2.9,86.7,33.6-7.3,46-7.3s15.2,22.7,26,22.7S89,0,100,0');

const el = {
  container: qs('.mo-container'),
  
  i: qs('.lttr--I'),
  l: qs('.lttr--L'),
  o: qs('.lttr--O'),
  v: qs('.lttr--V'),
  e: qs('.lttr--E'),
  y: qs('.lttr--Y'),
  o2: qs('.lttr--O2'),
  u: qs('.lttr--U'),
  
  lineLeft: qs('.line--left'),
  lineRight: qs('.line--rght'),
  
  colTxt: "#763c8c",
  colHeart: "#fa4843",
  
  blup: qs('.blup'),
  blop: qs('.blop'),
  sound: qs('.sound')
};

class Heart extends mojs.CustomShape {
  getShape() {
    return '<path d="M50,88.9C25.5,78.2,0.5,54.4,3.8,31.1S41.3,1.8,50,29.9c8.7-28.2,42.8-22.2,46.2,1.2S74.5,78.2,50,88.9z"/>';
  }
  getLength () { return 200; }
}
mojs.addShape('heart', Heart);

const loveTl = crtLoveTl().play();
setInterval(() => { loveTl.replay() }, 4300);

const volume = 0.2;
el.blup.volume = volume;
el.blop.volume = volume;

编译

CSS

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #FFC568;
    font-size: 62.5%;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media screen and (max-width: 520px) {
    html,
    body {
        /* don't know how to set default units to rem in mojs :(( */
    }
}
.container {
    width: 50rem;
    height: 20rem;
    position: relative;
}
.svg-container {
    z-index: 2;
    position: absolute;
}
.mo-container {
    width: 100%;
    height: 100%;
}
.line {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.lttr {
    fill: #763C8C;
}
.sound {
    position: fixed;
    color: #763C8C;
    font-size: 1.6rem;
    bottom: 1rem;
    right: 1rem;
    text-decoration: underline;
}
.sound--off {
    text-decoration: line-through;
}

HTML

<audio class="blup" style="display: none">
    <source src="https://www.freesound.org/data/previews/265/265115_4373976-lq.mp3" type="audio/ogg">
</audio>
<audio class="blop" style="display: none">
    <source src="https://www.freesound.org/data/previews/265/265115_4373976-lq.mp3" type="audio/ogg">
</audio>
<div class="sound">sound</div>
<script src='//cdn.jsdelivr.net/mojs/latest/mo.min.js'></script>

字符变成爱心，然后被挤压爆破，带泡沫吹破的音效。

html5, love

编辑器支持Emmet

快捷键

字符变成爱心，然后被挤压爆破，带泡沫吹破的音效。

html5, love

基于mo.js实现的爱与恨选择题趣味动画

基于Velocity.js实现的幻灯片（页面垂直滚动轮播）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：