实战分享！基于 Vue3 + CSS3 + js-tool-big-box 打造超炫的字符串中间加星号效果
warning:
这篇文章距离上次修改已过438天，其中的内容可能已经有所变动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3 CSS3 String with Star Example</title>
<style>
.string-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
.string-box {
display: flex;
align-items: center;
font-size: 20px;
font-weight: bold;
color: #333;
padding: 0 5px;
background: linear-gradient(to right, #30cfd0 0%, #330f70 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-decoration: none;
transition: 0.5s ease-in-out;
}
.string-box:hover {
background-size: 150% auto;
color: #fff;
transition-delay: 0.5s;
}
</style>
</head>
<body>
<div id="app" class="string-container">
<div class="string-box">
<span>{{ stringWithStars }}</span>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
originalString: 'HelloWorld',
};
},
computed: {
stringWithStars() {
return this.originalString.split('').join('* ');
}
}
});
app.mount('#app');
</script>
</body>
</html>这段代码使用Vue3创建了一个简单的应用，其中stringWithStars计算属性将原始字符串的每个字符之间插入星号，并在页面上以炫丽的视觉效果呈现。通过CSS3的background-clip属性和-webkit-text-fill-color属性实现了文字的渐变效果，并且在鼠标悬停时添加了视觉效果。这个例子展示了如何将创意的CSS3效果融入Vue3应用程序中，提升用户界面的视觉吸引力。
评论已关闭