在正文的第一句加入“我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛”

简介

Hello！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～   ଘ(੭ˊᵕˋ)੭ 昵称：海轰 标签：程序猿｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，获得过国家奖学金，有幸在竞赛中拿过一些国奖、省奖...已保研 学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！   唯有努力💪   本文仅记录自己感兴趣的内容

效果展示

绘图步骤

步骤1:绘制卡片

绘制一个长方形，设置好颜色

<view class="card"></view>

overflow: hidden;
  position: relative;
  background-color: #ff7675;
  border-radius: 0.5em;
  box-shadow:
    0 0 0 hsl(0, 0%, 80%),
    0 0 0 hsl(0, 0%, 100%),
    -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
  color: hsl(0, 0%, 100%);
  width: 12.3em;
  height: 7.8em;

步骤2:

往卡片中添加文字，自己定义好位置和文案

<view class="card__logo">新年贺卡</view>
    <view class="card__logo">2023/01/25</view>
    <view class="card__logo">新的一年 万事如意</view>
    

width: 100%;
  font-weight: bold;
  font-style: italic;

步骤3:添加动画，左右旋转

旋转y轴

  from,
  to {
    animation-timing-function: ease-in;
    box-shadow:
      0 0 0 hsl(0, 0%, 80%),
      0.1rem 0 0 hsl(0, 0%, 100%),
      -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
    transform: rotateY(-10deg);
  }

  25%,
  75% {
    animation-timing-function: ease-out;
    box-shadow:
      0 0 0 hsl(0, 0%, 80%),
      0 0 0 hsl(0, 0%, 100%),
      -0.25rem -0.05rem 1rem 0.15rem hsla(0, 0%, 0%, 0.3);
    transform: rotateY(0deg);
  }

  50% {
    animation-timing-function: ease-in;
    box-shadow:
      -0.1rem 0 0 hsl(0, 0%, 80%),
      0 0 0 hsl(0, 0%, 100%),
      -0.3rem -0.1rem 1.5rem 0.3rem hsla(0, 0%, 0%, 0.3);
    transform: rotateY(10deg);
  }
}

完整代码

wxml:

<view class="card">
  <view class="card__info">
    <view class="card__logo">新年贺卡</view>
    <view class="card__logo">2023/01/25</view>
    <view class="card__logo">新的一年 万事如意</view>
  </view>
</view>

wxss:

page {
  font-size: 24px;
  background-color: white;
  color: red;
  height: 100vh;
  display: grid;
  place-items: center;
  perspective: 600px;
  transition: background-color 0.3s;
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.card {
  overflow: hidden;
  position: relative;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: rotate;
  background-color: #ff7675;
  border-radius: 0.5em;
  box-shadow:
    0 0 0 hsl(0, 0%, 80%),
    0 0 0 hsl(0, 0%, 100%),
    -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
  color: hsl(0, 0%, 100%);
  width: 12.3em;
  height: 7.8em;
  transform: translate3d(0, 0, 0);
}

.card__info {
  position: absolute;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem;
  inset: 0;
}

.card__logo {
  width: 100%;
  font-weight: bold;
  font-style: italic;
}

.card__vendor,
.card__vendor:before,
.card__vendor:after {
  position: absolute;
}

.card__vendor {
  right: 0.375rem;
  bottom: 0.375rem;
  width: 2.55rem;
  height: 1.5rem;
}

.card__vendor:before,
.card__vendor:after {
  border-radius: 50%;
  content: "";
  display: block;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.card__vendor:before {
  background-color: #e71d1a;
  left: 0;
}

.card__vendor:after {
  background-color: #fa5e03;
  box-shadow: -1.05rem 0 0 #f59d1a inset;
  right: 0;
}

@keyframes rotate {

  from,
  to {
    animation-timing-function: ease-in;
    box-shadow:
      0 0 0 hsl(0, 0%, 80%),
      0.1rem 0 0 hsl(0, 0%, 100%),
      -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
    transform: rotateY(-10deg);
  }

  25%,
  75% {
    animation-timing-function: ease-out;
    box-shadow:
      0 0 0 hsl(0, 0%, 80%),
      0 0 0 hsl(0, 0%, 100%),
      -0.25rem -0.05rem 1rem 0.15rem hsla(0, 0%, 0%, 0.3);
    transform: rotateY(0deg);
  }

  50% {
    animation-timing-function: ease-in;
    box-shadow:
      -0.1rem 0 0 hsl(0, 0%, 80%),
      0 0 0 hsl(0, 0%, 100%),
      -0.3rem -0.1rem 1.5rem 0.3rem hsla(0, 0%, 0%, 0.3);
    transform: rotateY(10deg);
  }
}

结语

文章仅作为个人学习笔记记录，记录从0到1的一个过程

希望对您有一点点帮助，如有错误欢迎小伙伴指正