标签：star 样式 微信 小星星 -- var font color fill

送你一颗小星星~

效果

环境

• 微信小程序 typescript + scss

代码

index.ts

Component({ 
  data: {
    c: ""
  }, 
  methods: {
    checked() {
      this.setData({ c: this.data.c == "fill" ? "none" : "fill" })
    }
  }
})

index.wxml

<view class="star {{c}}" bindtap="checked">
  <view class="iconfont icon-star"></view>
  <view class="iconfont icon-star-fill"></view>
  <view class="bling"></view>
  <view class="bling"></view>
  <view class="bling"></view>
</view>

index.scss

@font-face {
  font-family: "iconfont";
  /* Project id 3330476 */
  src: url('//at.alicdn.com/t/font_3330476_y264o31cfs8.woff2?t=1649984479172') format('woff2'),
    url('//at.alicdn.com/t/font_3330476_y264o31cfs8.woff?t=1649984479172') format('woff'),
    url('//at.alicdn.com/t/font_3330476_y264o31cfs8.ttf?t=1649984479172') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-star:before {
  content: "\e7df";
}

.icon-star-fill:before {
  content: "\e86a";
}

.star {
  position: relative;
  --width: 20rpx;
  --height: 4rpx;
  --font-size: 50rpx;
  --color: #bbbbbb;
  --fill-color: goldenrod;
  --left: 200rpx;
  --top: -100rpx;

  .icon-star {
    color: var(--color);
    font-size: var(--font-size);
  }

  .icon-star-fill {
    position: absolute;
    font-size: var(--font-size);
    top: 0;
    left: 0;
    color: var(--fill-color);
    opacity: 0;
  }

  .bling {
    position: absolute;
    width: var(--width);
    height: var(--height);
    border-radius: calc(var(--width) / 2);
    background-color: var(--fill-color);
    top: calc(50% - calc(var(--height) / 2));
    left: calc(50% - calc(var(--width) / 2));
    box-shadow: var(--font-size) calc(var(--height) / -.5) 0px var(--fill-color), calc(-1 * var(--font-size)) calc(var(--height) / -.5) 0px var(--fill-color);
    opacity: 0;
  }

  &.fill {
    .icon-star-fill {
      animation-name: star-fill-add;
      animation-duration: 1s;
      transition-timing-function: ease-in-out;
      opacity: 1;
    }

    .icon-star {
      animation-name: star-add;
      animation-delay: 1s;
      animation-duration: 1s;
      transition-timing-function: linear;
    }

    .bling {
      animation-delay: 1s;
      animation-duration: 1s;
      transition-timing-function: ease-in-out;
      opacity: 0;

      &:nth-of-type(3) {
        animation-name: star-bling-1;
      }

      &:nth-of-type(4) {
        animation-name: star-bling-2;
      }

      &:nth-of-type(5) {
        animation-name: star-bling-3;
        --width: 26rpx;
      }
    }

  }

  &.none {
    .icon-star-fill {
      animation-name: star-fill-subtract;
      animation-duration: 1s;
      transition-timing-function: linear;
    }

    .icon-star {
      animation-name: star-subtract;
      animation-duration: 1s;
      transition-timing-function: linear;
    }
  }
}

@keyframes star-add {
  0% {
    color: var(--fill-color);
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes star-fill-add {
  0% {
    left: var(--left);
    top: var(--top);
    font-size: calc(var(--font-size) / 2.5);
    transform: rotate(720deg);
  }

  100% {
    left: 0;
    top: 0;
    font-size: var(--font-size);
  }
}

@keyframes star-bling-1 {
  0% {
    color: var(--fill-color);
    opacity: 0;
    transform: scale(.8) rotate(-45deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(-45deg);
    opacity: 0;
  }
}

@keyframes star-bling-2 {
  0% {
    color: var(--fill-color);
    transform: scale(.8) rotate(45deg);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(45deg);
    opacity: 0;
  }
}

@keyframes star-bling-3 {
  0% {
    color: var(--fill-color);
    transform: scale(.8);
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes star-subtract {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes star-fill-subtract {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

标签：star,样式,微信,小星星,--,var,font,color,fill
来源： https://www.cnblogs.com/linyisonger/p/16151741.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。