docs__myblog__devneeds__animate.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[40],{"/uHN":function(n,e,t){"use strict";t.r(e);var a=t("q1tI"),o=t.n(a),r=t("dEAq"),i=t("H1Ra"),s=o.a.memo((n=>{n.demos;return o.a.createElement(o.a.Fragment,null,o.a.createElement("div",{className:"markdown"},o.a.createElement("h1",{id:"\u6c34\u6ce2\u7eb9\u6548\u679c"},o.a.createElement(r["AnchorLink"],{to:"#\u6c34\u6ce2\u7eb9\u6548\u679c","aria-hidden":"true",tabIndex:-1},o.a.createElement("span",{className:"icon icon-link"})),"\u6c34\u6ce2\u7eb9\u6548\u679c"),o.a.createElement(i["a"],{code:'\x3c!--  --\x3e\n<template>\n  <view class="liquid-fill" :style="{ borderColor: option.bgColor }">\n    <view class="text"> {{ option.number + \'%\' }}</view>\n    <view class="water_waves">\n      <view\n        class="water-model water_waves1"\n        :style="{ background: option.bgColor, top: top }"\n      />\n      <view\n        class="water-model water_waves2"\n        :style="{ background: option.bgColor, top: top }"\n      />\n      <view class="water-under" :style="{ background: option.bgColor }" />\n    </view>\n  </view>\n</template>\n\n<script>\nexport default {\n  name: \'LiquidFill\',\n  props: {\n    option: {\n      type: Object,\n      default: () => {\n        return {\n          bgColor: \'#29b3f3\',\n          number: 50,\n        };\n      },\n    },\n  },\n  data() {\n    return {};\n  },\n  computed: {\n    top() {\n      return `${102 - this.option.number}%`;\n    },\n  },\n};\n<\/script>\n<style lang="scss" scoped>\n.liquid-fill {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-width: 4rpx;\n  border-style: solid;\n  border-radius: 50%;\n  position: relative;\n}\n.text {\n  position: absolute;\n  z-index: 99;\n  font-size: 28rpx;\n  font-weight: bold;\n}\n.water_waves {\n  width: 95%;\n  height: 95%;\n  border-radius: 50%;\n  position: relative;\n  animation: water-waves linear infinite;\n  overflow: hidden;\n  transform: translate3d(0, 0, 0);\n}\n@keyframes water-waves {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.water-under {\n  width: 100%;\n  height: 100%;\n  opacity: 0.1;\n  border-radius: 50%;\n}\n.water-model {\n  position: absolute;\n  width: 200%;\n  height: 200%;\n  animation: inherit;\n}\n.water_waves1 {\n  left: -60%;\n  opacity: 0.7;\n  border-radius: 40%;\n  animation-duration: 5s;\n}\n.water_waves2 {\n  left: -40%;\n  border-radius: 35%;\n  opacity: 0.5;\n  animation-duration: 7s;\n}\n</style>',lang:"vue"})))}));e["default"]=n=>{var e=o.a.useContext(r["context"]),t=e.demos;return o.a.useEffect((()=>{var e;null!==n&&void 0!==n&&null!==(e=n.location)&&void 0!==e&&e.hash&&r["AnchorLink"].scrollToAnchor(decodeURIComponent(n.location.hash.slice(1)))}),[]),o.a.createElement(s,{demos:t})}}}]);