sq-ui
Version:
基于 vue-cli4 的组件库
1 lines • 3.34 kB
CSS
.btn[data-v-747d0d8e]{width:100px;height:50px;margin:0 10px;font-size:16px;border-radius:5px;border:none;cursor:pointer}.sq-button-changeColor[data-v-747d0d8e]{color:#fff;background-color:#fc297f}.sq-button-changeColor[data-v-747d0d8e]:hover{-webkit-animation:draw-data-v-747d0d8e 5s linear infinite;animation:draw-data-v-747d0d8e 5s linear infinite}@-webkit-keyframes draw-data-v-747d0d8e{0%,to{background-color:#f35588}20%{background-color:#05dfd7}40%{background-color:#a3f7bf}60%{background-color:#fff591}80%{background-color:#feb72b}}@keyframes draw-data-v-747d0d8e{0%,to{background-color:#f35588}20%{background-color:#05dfd7}40%{background-color:#a3f7bf}60%{background-color:#fff591}80%{background-color:#feb72b}}.sq-button-flash[data-v-747d0d8e]{color:#fc297f;border:2px solid #fc297f;position:relative;overflow:hidden}.sq-button-flash[data-v-747d0d8e]:before{content:"";background-color:#fff;height:100%;width:35px;display:block;position:absolute;top:0;left:-60px;transform:skewX(-45deg) translateX(0);transition:none}.sq-button-flash[data-v-747d0d8e]:hover{background-color:#fc297f;color:#fff}.sq-button-flash[data-v-747d0d8e]:hover:before{transform:skewX(-45deg) translateX(600px);transition:all .8s linear}.sq-button-open[data-v-747d0d8e]{color:#fc297f;background-color:#fff;border:2px solid #fc297f;position:relative;display:inline-block;transform:perspective(1px)}.sq-button-open[data-v-747d0d8e]:before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;background:#fc297f;transform:scaleX(0);transform-origin:50%}.sq-button-open[data-v-747d0d8e]:hover{color:#fff}.sq-button-open[data-v-747d0d8e]:hover:before{transform:scaleX(1);transition:all .3s ease-out}.SqText[data-v-02c3d814]{text-align:center}.svgDom[data-v-02c3d814]{padding-top:10px}.text[data-v-02c3d814]{font-weight:700;fill:none;stroke-dasharray:90 310;-webkit-animation:stroke-data-v-02c3d814 6s linear infinite;animation:stroke-data-v-02c3d814 6s linear infinite}.text-1[data-v-02c3d814]{-webkit-animation-delay:-1.5s;animation-delay:-1.5s}.text-2[data-v-02c3d814]{-webkit-animation-delay:-3s;animation-delay:-3s}.text-3[data-v-02c3d814]{-webkit-animation-delay:-4.5s;animation-delay:-4.5s}.text-4[data-v-02c3d814]{-webkit-animation-delay:-6s;animation-delay:-6s}@-webkit-keyframes stroke-data-v-02c3d814{to{stroke-dashoffset:-400}}@keyframes stroke-data-v-02c3d814{to{stroke-dashoffset:-400}}.SqTextDraw[data-v-943449c6]{width:240px;height:120px;margin:0 auto}.svgDom[data-v-943449c6]{width:240;height:120px}.word[data-v-943449c6]{fill-opacity:0;stroke:red;stroke-width:1.5;stroke-dasharray:200}#path1[data-v-943449c6]{-webkit-animation:draw-data-v-943449c6 3s ease;animation:draw-data-v-943449c6 3s ease}#path2[data-v-943449c6]{-webkit-animation:draw-data-v-943449c6 3s ease 1.5s;animation:draw-data-v-943449c6 3s ease 1.5s}#path3[data-v-943449c6]{-webkit-animation:draw-data-v-943449c6 3s ease 3s;animation:draw-data-v-943449c6 3s ease 3s}#path4[data-v-943449c6]{-webkit-animation:draw-data-v-943449c6 3s ease 4s;animation:draw-data-v-943449c6 3s ease 4s}#path5[data-v-943449c6]{-webkit-animation:draw-data-v-943449c6 3s ease 6s;animation:draw-data-v-943449c6 3s ease 6s}@-webkit-keyframes draw-data-v-943449c6{0%{stroke-dashoffset:200}to{stroke-dashoffset:0}}@keyframes draw-data-v-943449c6{0%{stroke-dashoffset:200}to{stroke-dashoffset:0}}