css 实现流光字体效果
2024-10-19 09:30:55
<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
最新文章
- 数值分析之QR因子分解篇
- sqlserver表分区
- android app多渠道分发打包
- TCP/IP详解学习笔记(6)-UDP协议
- LRU Cache的简单c++实现
- static加载问题
- [LeetCode] Prime Number of Set Bits in Binary Representation 二进制表示中的非零位个数为质数
- 如何成为一个优秀的DBA
- C语言实现输出一组数字中的所有奇数
- 简单记录一次getshell到进服务器的过程
- Python结合SAP GUI Script操作sap的简易教程
- AsyncTask实现网络图片的异步加载
- c++ 静态类成员函数(static member function) vs 名字空间 (namespace)
- 如何让div在整个页面中居中？
- 005——数组(五)array_diff_ukey()array_diff_uassoc()array_intersect()array_intersect_assoc()array_intersect_key()array_intersect_ukey()array_intersect_uassoc()
- LoadRunner11学习记录四 -- 集合点
- 3991: [SDOI2015]寻宝游戏
- async/await 里的并行和串行
- Hiho----拓扑排序
- tomcat war包自动化部署脚本