1 line
3.9 KiB
JSON
1 line
3.9 KiB
JSON
{"remainingRequest":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\phpstudy_pro\\WWW\\travel\\admin\\src\\components\\TextHoverEffect\\Mallki.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\src\\components\\TextHoverEffect\\Mallki.vue","mtime":1718070786005},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1718764957200},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\babel-loader\\lib\\index.js","mtime":1718764959024},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1718764957200},{"path":"D:\\phpstudy_pro\\WWW\\travel\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":1718764959862}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQpleHBvcnQgZGVmYXVsdCB7DQogIHByb3BzOiB7DQogICAgY2xhc3NOYW1lOiB7DQogICAgICB0eXBlOiBTdHJpbmcsDQogICAgICBkZWZhdWx0OiAnJw0KICAgIH0sDQogICAgdGV4dDogew0KICAgICAgdHlwZTogU3RyaW5nLA0KICAgICAgZGVmYXVsdDogJ3Z1ZS1lbGVtZW50LWFkbWluJw0KICAgIH0NCiAgfQ0KfQ0K"},{"version":3,"sources":["Mallki.vue"],"names":[],"mappings":";;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"Mallki.vue","sourceRoot":"src/components/TextHoverEffect","sourcesContent":["<template>\r\n <a :class=\"className\" class=\"link--mallki\" href=\"#\">\r\n {{ text }}\r\n <span :data-letters=\"text\" />\r\n <span :data-letters=\"text\" />\r\n </a>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n props: {\r\n className: {\r\n type: String,\r\n default: ''\r\n },\r\n text: {\r\n type: String,\r\n default: 'vue-element-admin'\r\n }\r\n }\r\n}\r\n</script>\r\n\r\n<style>\r\n/* Mallki */\r\n\r\n.link--mallki {\r\n font-weight: 800;\r\n color: #4dd9d5;\r\n font-family: 'Dosis', sans-serif;\r\n -webkit-transition: color 0.5s 0.25s;\r\n transition: color 0.5s 0.25s;\r\n overflow: hidden;\r\n position: relative;\r\n display: inline-block;\r\n line-height: 1;\r\n outline: none;\r\n text-decoration: none;\r\n}\r\n\r\n.link--mallki:hover {\r\n -webkit-transition: none;\r\n transition: none;\r\n color: transparent;\r\n}\r\n\r\n.link--mallki::before {\r\n content: '';\r\n width: 100%;\r\n height: 6px;\r\n margin: -3px 0 0 0;\r\n background: #3888fa;\r\n position: absolute;\r\n left: 0;\r\n top: 50%;\r\n -webkit-transform: translate3d(-100%, 0, 0);\r\n transform: translate3d(-100%, 0, 0);\r\n -webkit-transition: -webkit-transform 0.4s;\r\n transition: transform 0.4s;\r\n -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\r\n transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);\r\n}\r\n\r\n.link--mallki:hover::before {\r\n -webkit-transform: translate3d(100%, 0, 0);\r\n transform: translate3d(100%, 0, 0);\r\n}\r\n\r\n.link--mallki span {\r\n position: absolute;\r\n height: 50%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n overflow: hidden;\r\n}\r\n\r\n.link--mallki span::before {\r\n content: attr(data-letters);\r\n color: red;\r\n position: absolute;\r\n left: 0;\r\n width: 100%;\r\n color: #3888fa;\r\n -webkit-transition: -webkit-transform 0.5s;\r\n transition: transform 0.5s;\r\n}\r\n\r\n.link--mallki span:nth-child(2) {\r\n top: 50%;\r\n}\r\n\r\n.link--mallki span:first-child::before {\r\n top: 0;\r\n -webkit-transform: translate3d(0, 100%, 0);\r\n transform: translate3d(0, 100%, 0);\r\n}\r\n\r\n.link--mallki span:nth-child(2)::before {\r\n bottom: 0;\r\n -webkit-transform: translate3d(0, -100%, 0);\r\n transform: translate3d(0, -100%, 0);\r\n}\r\n\r\n.link--mallki:hover span::before {\r\n -webkit-transition-delay: 0.3s;\r\n transition-delay: 0.3s;\r\n -webkit-transform: translate3d(0, 0, 0);\r\n transform: translate3d(0, 0, 0);\r\n -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);\r\n transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);\r\n}\r\n</style>\r\n"]}]} |