【实用】纯css&vue码个图标带辉光效果的快捷功能入口布局

前言

CSS&Vue打造快捷功能入口布局，卡片图标带辉光特效，布局简洁美观，零依赖图片，纯css实现丝滑交互动画（Demo不难，但是原创手码代码很累，jym求点赞！！！）

Demo交互效果图

知识点：在style标签中使用变量

通过定义色值变量，就可以灵活实现快捷功能入口不同卡片的颜色区分

1.定义变量

export default {
  data() {
    return {
      // 背景颜色
      backgroundColor: "#00f",
      // 字体颜色
      fontColor: "#f00",
    };
  },
};

2.在HTML中设置CSS使用的变量

<template>
  <div>
    <div class="box" :style="{ '--backgroundColor': backgroundColor, '--fontColor': fontColor }">
      内容
    </div>
  </div>
</template>

3.样式文件里引用变量

<style lang="scss" scoped>
.box {
  /** 使用var()获取变量，参数就是变量名 */
  background-color: var(--backgroundColor);
  color: var(--fontColor);
}
</style>

知识点：文字渐变颜色css

.font-style{
    background: linear-gradient(to left, #eba33d, #ffe3e3);  
    -webkit-background-clip: text;  
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    color: transparent;
}

知识点：高亮线动画

1.定义动画的关键帧

/* 定义动画的关键帧 */
@keyframes lineShiny {
  0% {
    opacity: 0.4; 
  }  
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}

2.使用动画

.light-line{
  background: linear-gradient(to left, transparent, #eba33d, transparent); 
  opacity: 0.4;
  animation: lineShiny 500ms linear infinite;
}

• lineShiny：这是动画的名称，表示动画的样式将由名为lineShiny的关键帧定义。
• 500ms：这是动画的持续时间，表示动画完成一次循环所需的时间为500毫秒。
• linear：这是动画的速度曲线，表示动画以恒定的速度进行。
• infinite：这表示动画将无限次循环播放。

知识点：图标翻转css

transform:scaleX(-1);会使元素在视觉上沿着X轴翻转180度。

注意：在给需要翻转的class类里 定义过渡效果 transition: 200ms linear;

Demo在线预览

点击码上掘金查看完整代码