当前位置：首页 > news >正文

文字光影扫过动效

news 来源：原创 2025/4/28 8:18:21

列子1

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>光影扫过文字动效</title><style>body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background-color: #222;margin: 0;font-family: 'Arial', sans-serif;}.text-container {position: relative;font-size: 5rem;font-weight: bold;color: #333;text-transform: uppercase;letter-spacing: 3px;}.text {position: relative;display: inline-block;}.light-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);background-size: 200% 100%;background-position: -100% 0;-webkit-background-clip: text;background-clip: text;color: transparent;animation: lightSweep 3s infinite ease-in-out;}@keyframes lightSweep {0% {background-position: -100% 0;}50% {background-position: 100% 0;}100% {background-position: -100% 0;}}</style>
</head>
<body>
<div class="text-container"><div class="text">光影扫过效果</div><div class="light-overlay">光影扫过效果</div>
</div>
</body>
</html>

例子2

<template><div class="wrapperStyle" :style="wrapperStyle" style="text-align:left;"><!-- <div>{{ item.textName }}</div> --><div class="text-container"><div class="text">{{ item.textName }}</div><div class="light-overlay">{{ item.textName }}</div></div></div>
</template><script setup>
const props = defineProps({item: {type: Object,default: {},},editOrPreview: {type: String,default: "edit",}
});
const { proxy } = getCurrentInstance();
const wrapperStyle = computed(() => {return proxy.componentStyle(props.item, props.editOrPreview);
});const radiantTextStyle       = computed(() => {return {radiantBackgroundColor:props.item.radiantBackgroundColor || 'transparent',}
});
</script><style lang="scss" scoped>
@import "@/views/lowCode/myMoveable/styles/custom-low-code.scss";.text-container {--radiant-background-color: v-bind(radiantTextStyle.radiantBackgroundColor);position: relative;// font-size: 5rem;// font-weight: bold;// color: #fff;// text-transform: uppercase;// letter-spacing: 3px;
}.text {position: relative;display: inline-block;
}.light-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, var(--radiant-background-color), transparent);background-size: 200% 100%;background-position: -100% 0;-webkit-background-clip: text;background-clip: text;color: transparent;animation: lightSweep 3s infinite ease-in-out;
}@keyframes lightSweep {0% {background-position: -100% 0;}50% {background-position: 100% 0;}100% {background-position: -100% 0;}
}
</style>