使用Vue.js实现的一个口袋精灵按钮

很可爱的卡通按钮

vuejs, button

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const Bolts = Vue.component('bolts', {
  name: 'bolts',
  template: `
  <div class="c-bolts absolute top-neg4 left-0 right-0 center">
    <span :class="classes.bolt" :style="styles.bolt" class="h2">⚡</span>
    <span :class="classes.bolt" :style="styles.bolt" class="h1 bold">⚡</span>
    <span :class="classes.bolt" :style="styles.bolt" class="h2">⚡</span>
  </div>`,
  computed: {
    styles () {
      return {
        bolt: {
          opacity: 0
        }
      }
    },
    classes () {
      return {
        bolt: `c-bolt inline-block purple`
      }
    }
  },
  mounted () {
    anime({
      targets: '.c-bolts .c-bolt',
      opacity: [0, 1],
      rotate: [25, 0],
      translateY: [-10, 3],
      duration: 140,
      delay: (el, i) => {
        return 140 * i
      },
      loop: true,
      direction: 'alternate',
      easing: 'linear'
    })
  }
})

const Btn = Vue.component('btn', {
  name: 'btn',
  template: `
    <div>
      <bolts v-if="active"></bolts>
      <button :class="[classes.default, classes.active]" @mousedown="onMouseDown" @mouseup="onMouseUp" @mouseover="onMouseOver" @mouseleave="onMouseLeave">
        <div ref="eyes" :class="classes.eyes">
          <span :class="[classes.eye, classes.eyeLeft]">
            <span :class="[classes.eyeInner, classes.eyeInnerLeft]"></span>
          </span>
          <span :class="[classes.eye, classes.eyeRight]">
            <span :class="[classes.eyeInner, classes.eyeInnerRight]"></span>
          </span>
        </div>
        <span :class="[classes.rouge, classes.rougeLeft]"></span>
        <span :class="[classes.rouge, classes.rougeRight]"></span>
        <div ref="btnText" class="px3"><slot></slot></div>
      </button>
    </div>
  `,
  data () {
    return {
      active: false
    }
  },
  computed: {
    classes () {
      return {
        default: `border bg-yellow border-width-3 border-purple rounded3 p2 outline-none purple bold overflow-hidden cursor-pointer transition-all transition-100ms`,
        active: `y1-active`,
        rouge: `circle p1 bg-red width1 height1 inline-block absolute bottom-neg1`,
        rougeLeft: `left-neg1`,
        rougeRight: `right-neg1`,
        eyes: `anim-blink`,
        eye: `circle p1 bg-purple width1 height2 inline-block absolute top-0 overflow-hidden`,
        eyeLeft: `left-neg1`,
        eyeRight: `right-neg1`,
        eyeInner: `circle bg-white width05 height05 top-0 absolute inline-block`,
        eyeInnerLeft: `left-0`,
        eyeInnerRight: `left-0`      
      }
    }
  },
  methods: {
    playBlinkAnimation () {
      anime({
        targets: '.anim-blink',
        opacity: [1, 0],
        duration: 100,
        delay: () => {
          return 1800 * (Math.random() * (4 - 1) + 1)
        },
        loop: true,
        easing: 'easeInOutQuad',
      })
    },
    onMouseDown () {
      // Ironic, isn't it?
      this.active = true
    },
    onMouseUp () {
      this.active = false
    },
    onMouseOver () {
      this.active = true
    },
    onMouseLeave () {
      this.active = false
    }
  },
  mounted () {
    this.playBlinkAnimation()
  },
  components: {
    Bolts
  }
})

new Vue({
  el: '#app',
  components: {
    Btn
  }
})

编译

CSS

*,
*::before,
*::after {
    position: relative;
    box-sizing: border-box;
}
html,
body,
main {
    height: 100%;
}
.fw-900 {
    font-weight: 900;
}
.fw-700 {
    font-weight: 700;
}
.ff-serif {
    font-family: 'Playfair Display', Georgia, serif;
}
.ff-sans {
    font-family: 'Source Sans Pro', Arial, sans-serif;
}
.fill-height {
    height: 100%;
}
.rounded2 {
    border-radius: 6px;
}
.lh1 {
    line-height: 1;
}
.lh0 {
    line-height: 0;
}
.transition-all {
    transition-property: all;
}
.transition-100ms {
    transition-duration: 100ms;
}
.transition-200ms {
    transition-duration: 200ms;
}
.transition-600ms {
    transition-duration: 600ms;
}
.transition-ease-in-out {
    transition-timing-function: ease-in-out;
}
.transition-cubic {
    transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.transition-ease-in-out-back {
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.transition-delay-2s {
    transition-delay: 2s;
}
.z0 {
    z-index: 0;
}
.outline-none {
    outline: none;
}
.cursor-pointer {
    cursor: pointer;
}
.box-shadow {
    box-shadow: 0 2px 6px 1px rgba(0, 0, 0, 0.18);
}
.box-shadow-bottom {
    box-shadow: 0 4px 8px 2px rgba(0, 0, 0, 0.22);
}
.min-width1 {
    min-width: 100px;
}
.mt2-not-last:not(last-child) {
    margin-top: 1rem;
}
.indent1,
.indent1-hover:hover {
    text-indent: 5px;
}
.bg-transparent {
    background-color: transparent;
}
.border-width2 {
    border-width: 2px;
}
.reset-skewY {
    transform: skewY(0);
}
.skewY {
    transform: skewY(5deg);
}
.skewY-neg {
    transform: skewY(-5deg);
}
.fill-half {
    width: 50%;
}
.bg-black-semitransparent {
    background-color: rgba(0, 0, 0, 0.65);
}
.opaque {
    opacity: 1;
}
.semi-transparent {
    opacity: .65;
}
.translucent {
    opacity: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.perspective-1000 {
    perspective: 1000px;
}
#app {
    width: 400px;
    height: 400px;
}
.bg-red {
    background-color: #F15C7E;
}
.bg-ghostwhite {
    background-color: #EAFEE9;
}
.bg-yellow {
    background-color: #FFDB8A;
}
.bg-purple {
    background-color: #65336E;
}
.border-width-3 {
    border-width: 4px;
}
.border-purple {
    border-color: #65336E;
}
.rounded3 {
    border-radius: 6px;
}
.purple {
    color: #65336E;
}
.width05 {
    width: 8px;
}
.height05 {
    height: 8px;
}
.width1 {
    width: 16px;
}
.height1 {
    height: 16px;
}
.height2 {
    height: 20px;
}
.top-neg1 {
    top: -5px;
}
.top-neg4 {
    top: -60px;
}
.bottom-neg1 {
    bottom: -5px;
}
.left-neg1 {
    left: -5px;
}
.right-neg1 {
    right: -5px;
}
.y1-active:active {
    transform: translateY(3px);
}

HTML

很可爱的卡通按钮

vuejs, button

编辑器支持Emmet

快捷键

很可爱的卡通按钮

vuejs, button

使用jQuery和WavesJS实现的一款原质化风格“回到顶部”按钮

使用React.js实现泡泡糖（软糖 | 口香糖）风格的社交按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：