<template>
<div>
<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
html, body {
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse farthest-side at 44% 16%, #455A64 0%, #263238 105%, #1a2327 268% );
margin: 0;
color: #E8A95B;
display: flex;
}
p {
position: relative;
margin: auto;
font-size: 50px;
word-spacing: 10px; // 規定文字中間的空格為 10px
display: inline-block;
white-space: nowrap;
color: transparent; // transparent - 透明
background-color: #E8A95B;
-webkit-background-clip: text; // 兼容其他瀏覽器 規定以 文字 裁剪 background-clip 規定以什么地方裁剪 text - 文字
}
p::after {
content: attr(data-text); // content 語法與屬性值: attr(attribute) -- 將元素的 attribute 屬性以字符串形式返回。
position: absolute;
left: 0px;
top: 0px;
z-index: 5;
//
background-image: linear-gradient(
120deg,
transparent 0px,
rgb(101, 13, 243) 0px,
transparent 60px,
rgba(223, 203, 203, .3) 0px,
transparent -60px,
rgb(101, 13, 243) 200px,
transparent -160px,
rgba(223, 203, 203, .3) 200px,
transparent 0px,
rgb(101, 13, 243) 0px,
);
background-clip: text;
background-size: 150%;
animation: shine 8s infinite linear;
}
@keyframes shine {
0% {
background-position: 50% 0;
}
100% {
background-position: -190% 0;
}
}
</style>
轉自： https://csscoco.com/inspiration/#/./background/bg-clip-text-shine.md