pc端作品墙字体特效

pages/pc_web/home/components/second.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="home-second">
 		<view class="hs-search-title">
-			推荐作品
+			<text @click="toWall">推荐作品</text>
 			<image :src="fileUrl+blackStar"></image>
 		</view>
 		<!-- 筛选项 -->
@@ -249,6 +249,10 @@ export default {
 			this.recommendForm.current++;
 			this.getWorkList();
 		},
+		// 前往作品墙
+		toWall(){
+			// uni.navigateTo({url: `/pages/mobile_web/wall/detail`});
+		},
 	}
 }
 </script>
@@ -264,7 +268,21 @@ export default {
 		font-size: 40rpx;
 		font-weight: bold;
 		position: relative;
-		color: #222;
+		text{
+			background-image: linear-gradient(to right, #222 , #999, #222, #999, #222);
+			background-clip: text;
+			-webkit-background-clip: text;
+			background-size: 200% 100%;
+			color: transparent;
+			animation: light 2s infinite linear;
+			cursor: pointer;
+			&:hover{
+				opacity: 0.8;
+			}
+			&:active{
+				opacity: 0.6;
+			}
+		}
 		image{
 			position: absolute;
 			top: 84rpx;
@@ -542,4 +560,12 @@ export default {
 		}
 	}
 }
+@keyframes light {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;
+  }
+}
 </style>