微信小程序--立体清新文字

效果展示

Demo代码

index.wxml

<view class="word" style="--x: 6; --y: -6;">
    <view style="--index: 0; --alpha-l: 0.125; --alpha-u: 0.25;">P</view><view style="--index: 1; --alpha-l: 0.125; --alpha-u: 0.25;">u</view><view style="--index: 2; --alpha-l: 0.125; --alpha-u: 0.25;">r</view><view style="--index: 3; --alpha-l: 0.125; --alpha-u: 0.25;">p</view><view style="--index: 4; --alpha-l: 0.125; --alpha-u: 0.25;">l</view><view style="--index: 5; --alpha-l: 0.125; --alpha-u: 0.25;">e</view>
  </view>
  <view  class="word" style="--x: 3; --y: -3;">
    <view style="--index: 0; --alpha-l: 0.25; --alpha-u: 0.5;">P</view><view style="--index: 1; --alpha-l: 0.25; --alpha-u: 0.5;">u</view><view style="--index: 2; --alpha-l: 0.25; --alpha-u: 0.5;">r</view><view style="--index: 3; --alpha-l: 0.25; --alpha-u: 0.5;">p</view><view style="--index: 4; --alpha-l: 0.25; --alpha-u: 0.5;">l</view><view style="--index: 5; --alpha-l: 0.25; --alpha-u: 0.5;">e</view>
  </view>
  <view class="word">
    <view style="--index: 0; --alpha-l: 0.5; --alpha-u: 1;">P</view><view style="--index: 1; --alpha-l: 0.5; --alpha-u: 1;">u</view><view style="--index: 2; --alpha-l: 0.5; --alpha-u: 1;">r</view><view style="--index: 3; --alpha-l: 0.5; --alpha-u: 1;">p</view><view style="--index: 4; --alpha-l: 0.5; --alpha-u: 1;">l</view><view style="--index: 5; --alpha-l: 0.5; --alpha-u: 1;">e</view>
  </view>

index.wxss

page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #70c9db;
}

.word {
  font-family: 'Roboto Mono', monospace;
  font-size: 4rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  transform: translate(-50%, -50%) translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%));
  font-variation-settings: 'wght'100;
  margin: 0;
}

.word view {
  color: hsla(180, 100%, 90%, var(--alpha-l));
  animation: rise 2.25s infinite ease-in-out;
  animation-delay: calc((var(--index) - 6) * 0.225s);
  display: inline-block;
}

@-webkit-keyframes rise {
  50% {
    font-variation-settings: 'wght'700;
    color: hsla(180, 100%, 100%, var(--alpha-u));
    transform: translate(0, -15%);
  }
}

@keyframes rise {
  50% {
    font-variation-settings: 'wght'var(--upper);
    color: hsla(180, 100%, 100%, var(--alpha-u));
    transform: translate(0, -15%);
  }
}

index.js

{
  "usingComponents": {}
}

index.json

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

说明

学习笔记
仅用于个人学习基础知识