{"version":3,"sources":["webpack:///./src/views/my-css/frame-animation-effect/index.vue","webpack:///src/views/my-css/frame-animation-effect/index.vue","webpack:///./src/views/my-css/frame-animation-effect/index.vue?98da","webpack:///./src/views/my-css/frame-animation-effect/index.vue?fb3b","webpack:///./src/views/my-css/frame-animation-effect/config.js","webpack:///./src/views/my-css/frame-animation-effect/index.vue?4cac"],"names":["render","_vm","this","_c","_self","attrs","code1","staticClass","_v","code2","code3","staticRenderFns","data","title","code","lang","component"],"mappings":"wIAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,UAAU,CAACA,EAAG,cAAc,CAACE,MAAM,CAAC,MAAQ,OAAO,KAAOJ,EAAIK,QAAQ,CAACH,EAAG,MAAM,CAACI,YAAY,OAAO,CAACN,EAAIO,GAAG,iBAAiBL,EAAG,cAAc,CAACE,MAAM,CAAC,MAAQ,MAAM,KAAOJ,EAAIQ,QAAQ,CAACN,EAAG,MAAM,CAACI,YAAY,YAAY,CAACN,EAAIO,GAAG,WAAWL,EAAG,cAAc,CAACE,MAAM,CAAC,MAAQ,MAAM,KAAOJ,EAAIS,QAAQ,CAACP,EAAG,MAAM,CAACI,YAAY,SAAS,CAACJ,EAAG,MAAM,CAACI,YAAY,QAAQJ,EAAG,MAAM,CAACI,YAAY,eAAeJ,EAAG,cAAc,CAACE,MAAM,CAAC,OAAS,eAAe,IAE9fM,EAAkB,G,YCiBP,GACfC,OACA,OACAN,MAAA,CACAO,MAAA,OACAC,KAAAR,WACAS,KAAA,OAEAN,MAAA,CACAI,MAAA,OACAC,KAAAL,WACAM,KAAA,OAEAL,MAAA,CACAG,MAAA,OACAC,KAAAJ,WACAK,KAAA,UCnCgjB,I,wBCQ5iBC,EAAY,eACd,EACAhB,EACAW,GACA,EACA,KACA,WACA,MAIa,aAAAK,E,6CCjBf,yHAAO,MAAMV,EAAQ,80BA2CRG,EAAQ,u1BA2CRC,EAAQ,olD,kCCxFrB,W","file":"static/js/chunk-7ba427d4.7b806a6e.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('section',[_c('public-item',{attrs:{\"title\":\"矩形效果\",\"code\":_vm.code1}},[_c('div',{staticClass:\"btn\"},[_vm._v(\"我是边框旋转的按钮\")])]),_c('public-item',{attrs:{\"title\":\"加载中\",\"code\":_vm.code2}},[_c('div',{staticClass:\"circular\"},[_vm._v(\"加载中\")])]),_c('public-item',{attrs:{\"title\":\"太极图\",\"code\":_vm.code3}},[_c('div',{staticClass:\"taiji\"},[_c('div',{staticClass:\"top\"}),_c('div',{staticClass:\"bottom\"})])]),_c('dzs-backtop',{attrs:{\"target\":\".el-main\"}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <section>\r\n        <public-item title=\"矩形效果\" :code=\"code1\">\r\n            <div class=\"btn\">我是边框旋转的按钮</div>\r\n        </public-item>\r\n        <public-item title=\"加载中\" :code=\"code2\">\r\n            <div class=\"circular\">加载中</div>\r\n        </public-item>\r\n        <public-item title=\"太极图\" :code=\"code3\">\r\n            <div class=\"taiji\">\r\n                <div class=\"top\"></div>\r\n                <div class=\"bottom\"></div>\r\n            </div>\r\n        </public-item>\r\n        <dzs-backtop  target=\".el-main\"></dzs-backtop>\r\n    </section>\r\n</template>\r\n<script>\r\nimport { code1, code2, code3 } from './config';\r\nexport default {\r\n    data() {\r\n        return {\r\n            code1: {\r\n                title: \"代码示例\",\r\n                code: code1,\r\n                lang: \"css\"\r\n            },\r\n            code2: {\r\n                title: \"代码示例\",\r\n                code: code2,\r\n                lang: \"css\"\r\n            },\r\n            code3: {\r\n                title: \"代码示例\",\r\n                code: code3,\r\n                lang: \"css\"\r\n            },\r\n        }\r\n    }\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.btn {\r\n    width: 150px;\r\n    height: 50px;\r\n    text-align: center;\r\n    line-height: 50px;\r\n    border-radius: 5px;\r\n    position: relative;\r\n    z-index: 3;\r\n    overflow: hidden;\r\n    background: #fff;\r\n\r\n    &::before {\r\n        content: \" \";\r\n        position: absolute;\r\n        background: var(--themecolor);\r\n        width: 200%;\r\n        height: 200%;\r\n        z-index: -2;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform-origin: 0 0;\r\n        animation: rotate 3s infinite linear;\r\n    }\r\n\r\n    &::after {\r\n        content: \"\";\r\n        width: calc(150px - 5px);\r\n        height: calc(50px - 5px);\r\n        position: absolute;\r\n        left: 2.5px;\r\n        top: 2.5px;\r\n        z-index: -1;\r\n        background: #fff;\r\n        border-radius: 5px;\r\n    }\r\n}\r\n\r\n.circular {\r\n    width: 150px;\r\n    height: 150px;\r\n    text-align: center;\r\n    line-height: 150px;\r\n    border-radius: 50%;\r\n    position: relative;\r\n    z-index: 3;\r\n    overflow: hidden;\r\n    background: #fff;\r\n\r\n    &::before {\r\n        content: \" \";\r\n        position: absolute;\r\n        background: var(--themecolor);\r\n        width: 200%;\r\n        height: 200%;\r\n        z-index: -2;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform-origin: 0 0;\r\n        animation: rotate 2s infinite linear;\r\n    }\r\n\r\n    &::after {\r\n        content: \"\";\r\n        width: calc(150px - 5px);\r\n        height: calc(150px - 5px);\r\n        position: absolute;\r\n        left: 2.5px;\r\n        top: 2.5px;\r\n        z-index: -1;\r\n        background: #fff;\r\n        border-radius: 50%;\r\n    }\r\n}\r\n\r\n@keyframes rotate {\r\n    to {\r\n        transform: rotate(1turn);\r\n    }\r\n}\r\n\r\n.taiji {\r\n    width: 200px;\r\n    height: 200px;\r\n    outline: 3px solid #000;\r\n    border-radius: 50%;\r\n    background: linear-gradient(to right, #fff 50%, #000 50%);\r\n    position: relative;\r\n    z-index: 2;\r\n    animation: rotate 2s infinite linear;\r\n\r\n    .top {\r\n        width: calc(200px / 2);\r\n        height: calc(200px / 2);\r\n        background: #fff;\r\n        border-radius: 50%;\r\n        position: absolute;\r\n        left: 25%;\r\n        top: 0;\r\n        z-index: -1;\r\n\r\n        &::after {\r\n            content: \"\";\r\n            display: block;\r\n            width: calc(200px / 6);\r\n            height: calc(200px / 6);\r\n            background: #000;\r\n            border-radius: 50%;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n        }\r\n    }\r\n\r\n    .bottom {\r\n        width: calc(200px / 2);\r\n        height: calc(200px / 2);\r\n        background: #000;\r\n        border-radius: 50%;\r\n        position: absolute;\r\n        left: 25%;\r\n        bottom: 0;\r\n        z-index: -1;\r\n\r\n        &::after {\r\n            content: \"\";\r\n            display: block;\r\n            width: calc(200px / 6);\r\n            height: calc(200px / 6);\r\n            background: #fff;\r\n            border-radius: 50%;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n        }\r\n    }\r\n}\r\n</style>","import mod from \"-!../../../../node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/.store/thread-loader@2.1.3/node_modules/thread-loader/dist/cjs.js!../../../../node_modules/.store/babel-loader@8.4.1/node_modules/babel-loader/lib/index.js!../../../../node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../node_modules/.store/thread-loader@2.1.3/node_modules/thread-loader/dist/cjs.js!../../../../node_modules/.store/babel-loader@8.4.1/node_modules/babel-loader/lib/index.js!../../../../node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=09cba1b2&scoped=true\"\nimport script from \"./index.vue?vue&type=script&lang=js\"\nexport * from \"./index.vue?vue&type=script&lang=js\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=09cba1b2&prod&lang=scss&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"09cba1b2\",\n  null\n  \n)\n\nexport default component.exports","\r\n\r\nexport const code1 = `\r\n@keyframes rotate {\r\n    to{\r\n        transform: rotate(1turn);\r\n    }\r\n}\r\n\r\n.btn{\r\n    width: 150px;\r\n    height: 50px;\r\n    text-align: center;\r\n    line-height: 50px;\r\n    border-radius: 5px;\r\n    position: relative;\r\n    z-index: 3;\r\n    overflow: hidden;\r\n    background: #fff;\r\n    &::before{\r\n        content: \" \";\r\n        position: absolute;\r\n        background: #66b1ff;\r\n        width: 200%;\r\n        height: 200%;\r\n        z-index: -2;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform-origin: 0 0 ;\r\n        animation: rotate 3s infinite linear;\r\n    }\r\n    &::after{\r\n        content:\"\";\r\n        width: calc(150px - 5px);\r\n        height: calc(50px - 5px);\r\n        position: absolute;\r\n        left: 2.5px;\r\n        top: 2.5px;\r\n        z-index: -1;\r\n        background: #fff;\r\n        border-radius: 5px;\r\n    }\r\n}\r\n`;\r\n\r\nexport const code2 = `\r\n@keyframes rotate {\r\n    to{\r\n        transform: rotate(1turn);\r\n    }\r\n}\r\n\r\n.circular{\r\n    width: 150px;\r\n    height: 150px;\r\n    text-align: center;\r\n    line-height: 150px;\r\n    border-radius: 50%;\r\n    position: relative;\r\n    z-index: 3;\r\n    overflow: hidden;\r\n    background: #fff;\r\n     &::before{\r\n        content: \" \";\r\n        position: absolute;\r\n        background: #66b1ff;\r\n        width: 200%;\r\n        height: 200%;\r\n        z-index: -2;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform-origin: 0 0 ;\r\n        animation: rotate 2s infinite linear;\r\n    }\r\n    &::after{\r\n        content:\"\";\r\n        width: calc(150px - 5px);\r\n        height: calc(150px - 5px);\r\n        position: absolute;\r\n        left: 2.5px;\r\n        top: 2.5px;\r\n        z-index: -1;\r\n        background: #fff;\r\n        border-radius: 50%;\r\n    }\r\n}\r\n`;\r\n\r\nexport const code3 = `\r\n\r\n// html\r\n<div class=\"taiji\">\r\n    <div class=\"top\"></div>\r\n    <div class=\"bottom\"></div>\r\n</div>\r\n\r\n// scss\r\n@keyframes rotate {\r\n    to{\r\n        transform: rotate(1turn);\r\n    }\r\n}\r\n.taiji{\r\n    width: 200px;\r\n    height: 200px;\r\n    outline: 3px solid #000;\r\n    border-radius: 50%;\r\n    background: linear-gradient(to right,#fff 50%,#000 50%);\r\n    position: relative;\r\n    z-index: 2;\r\n    animation: rotate 2s infinite linear;\r\n    .top{\r\n        width: calc(200px / 2);\r\n        height: calc(200px / 2);\r\n        background: #fff;\r\n        border-radius: 50%;\r\n        position: absolute;\r\n        left: 25%;\r\n        top: 0;\r\n        z-index: -1;\r\n        &::after{\r\n            content: \"\";\r\n            display: block;\r\n            width: calc(200px / 6);\r\n            height: calc(200px / 6);\r\n            background: #000;\r\n            border-radius: 50%;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50% , -50%);\r\n        }\r\n    }\r\n    .bottom{\r\n        width: calc(200px / 2);\r\n        height: calc(200px / 2);\r\n        background: #000;\r\n        border-radius: 50%;\r\n        position: absolute;\r\n        left: 25%;\r\n        bottom: 0;\r\n        z-index: -1;\r\n        &::after{\r\n            content: \"\";\r\n            display: block;\r\n            width: calc(200px / 6);\r\n            height: calc(200px / 6);\r\n            background: #fff;\r\n            border-radius: 50%;\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50% , -50%);\r\n        }\r\n    }\r\n    \r\n}\r\n`;","export * from \"-!../../../../node_modules/.store/mini-css-extract-plugin@0.9.0/node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/.store/css-loader@3.6.0/node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/.store/postcss-loader@3.0.0/node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/.store/sass-loader@10.2.0/node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/.store/cache-loader@4.1.0/node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/.store/vue-loader@15.11.1/node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=09cba1b2&prod&lang=scss&scoped=true\""],"sourceRoot":""}