【组件封装】vue打字机效果和文字发光
【代码】【组件封装】vue打字机效果和文字发光。
·
目录
效果如下:
使用
1.下载插件
文档查看及官网:https://github.com/Orlandster/vue-typed-js
npm install --save vue-typed-js
2.安装组件
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'
Vue.use(VueTypedJs)
3.用法
<vue-typed-js
style="font-size: 0.0729rem; color: #01fef4"
v-if="isXianshiDaZiJi"
:startDelay="1000"
@onComplete="doDelay"
:cursorChar="'_'"
:strings="[
'<p>你好,我是智能助手-哪吒!</p>',
'<span>双击可以打开聊天框</span>',
'<p>鼠标按住可以拖拽</p>',
]"
:contentType="'html'"
>
<div
style="
color: #01fef4;
text-align: center;
text-shadow: 0 0 0.0521rem #01fef4, 0 0 0.1042rem #01fef4;
"
class="typing"
></div>
</vue-typed-js>
4.文字高亮和标签高亮
盒子发光:
box-shadow: 0 0 2px #1e82be, 0 0 3px #1e82be, 0 0 4px #1e82be, 0 0 5px #1e82be !important;
文字发光:
text-shadow: 0 0 2px #1e82be, 0 0 3px #1e82be, 0 0 4px #1e82be, 0 0 5px #1e82be !important;
更多推荐
已为社区贡献9条内容
所有评论(0)