小程序实现开屏效果

最新推荐文章于 2025-02-10 09:03:16 发布

weixin_44387746

最新推荐文章于 2025-02-10 09:03:16 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_44387746/article/details/118158043

本文介绍了如何使用CSS、AXML和JS技术在小程序中创建开屏动画效果，详细讲解了相关代码实现和步骤，帮助开发者提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

.arrow {
   
   
  animation: arrow 1s linear infinite;
}

@keyframes arrow {
   
   
  0% {
   
   
    transform: translateY(-5rpx);
    opacity: 0.3
  }
  25% {
   
   
    transform: translateY(0rpx);
    opacity: 0.5
  }
  50% {
   
   
    transform: translateY(4rpx);
    opacity: 1
  }
  75% {
   
   
    transform: translateY(0rpx);
    opacity: 0.5
  }
  100% {
   
   
    transform: translateY(-5rpx);
    opacity: 0.3
  }
}

.flex {
   
   
  display: flex;
  flex-wrap: nowrap;
}

.flexs {
   
   
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.item {
   
   
  flex-shrink: 0;
  flex-grow: 0;
}

.dots {
   
   
  display: flex;
  align-items: center;
}

.dot-wrapper {
   
   
  margin-right: 12rpx;
}

.dot {
   
   
  width: 15rpx;
  height: 15rpx;
  border-radius: 50%;
  transition: all .3s;
}

.dot.active {
   
   
  width: 80rpx;
  height: 15rpx;
  border-radius: 12rpx;
}

.dot-wrapper {
   
   
  margin-right: 12rpx;
}

.ellipsis {
   
   
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.leftArrow {
   
   
  animation: leftArrow 2s linear infinite;
}

@keyframes leftArrow {
   
   
  0% {
   
   
    transform: translateX(-10rpx)
  }
  25% {
   
   
    transform: translateX(0rpx)
  }
  50% {
   
   
    transform: translateX(10rpx)
  }
  75% {
   
   
    transform: translateX(0rpx)
  }
  100% {
   
   
    transform: translateX(-10rpx)
  }
}

.rightArrow {
   
   
  animation: rightArrow 2s linear infinite;
}

@keyframes rightArrow {
   
   
  0% {
   
   
    transform: translateX(10rpx)
  }
  25% {
   
   
    transform: translateX(0rpx)
  }
  50% {
   
   
    transform: translateX(-10rpx)
  }
  75% {
   
   
    transform: translateX(0rpx)
  }
  100% {
   
   
    transform: translateX(10rpx)
  }
}



.left {
   
   
  animation: left .5s linear forwards;
}

@keyframes left {
   
   
  0% {
   
   
    transform: rotateZ(0deg)
  }
  100% {
   
   
    transform: rotateZ(-45deg);
    background-color: #fff !important;
  }
}

.lefts {
   
   
  transform: rotateZ(0deg);
  animation: lefts 0.5s linear forwards;
}

@keyframes lefts {
   
   
  0% {
   
   
    transform: rotateZ(0deg)
  }
  100% {
   
   
    transform: rotateZ(-45deg);
    background-color: #fff !important;
  }
}

.right {
   
   
  animation: right .5s linear forwards;
}

@keyframes right {
   
   
  0% {
   
   
    transform: rotateZ(0deg)
  }
  100% {
   
   
    transform: rotateZ(45deg);
    background-color: #fff !important;
  }
}

.rights {
   
   
  transform: rotateZ(0deg);
  animation: rights .5s linear forwards;
}

@keyframes rights {
   
   
  0% {
   
   
    transform: rotateZ(0deg)
  }
  100% {
   
   
    transform: rotateZ(45deg);
    background-color: #fff !important;
  }
}

.id {
   
   
  background-color: #fff !important;
}

/* */

.arrow1 {
   
   
  animation: arrow1 1s ease infinite;
}

@keyframes arrow1 {
   
   
  0% {
   
   
    opacity: 1
  }
  100% {
   
   
    opacity: 0
  }
}

.arrow2 {
   
   
  animation: arrow2 1s ease infinite;
}

@keyframes arrow2 {
   
   
  0% {
   
   
    opacity: 1;
    transform: translateX(0rpx)
  }
  100% {
   
   
    opacity: 0;
    transform: translateX(12rpx)
  }
}

.arrow3 {
   
   
  animation: arrow3 1s ease infinite;
}

@keyframes arrow3 {
   
   
  0% {
   
   
    opacity: 1;
    transform: translateX(0rpx)
  }
  100% {
   
   
    opacity: 0;
    transform: translateX(24rpx)
  }
}

axml

<view style="overflow:hidden;width:714rpx;height:1190rpx;margin:0 auto;border-radius:24rpx;background-color:{
   
   {bgColor || '#d2d2d0'}};position:relative;">
  <!-- 背景 -->
  <view style="position:absolute;z-index:3;width:716rpx;height:890rpx;display:flex;bottom:602rpx;">
    <view class="{
   
   {title == 1?'left':'lefts'}}" style="position:absolute;top:0rpx;left:0rpx; width:362rpx;height:895rpx;background-color:{
   
   {bgCurrent || bgColor}};transform: rotateZ(0deg);transform-origin: right bottom;">
    </view>
    <view class="{
   
   {title == 1?'right':'rights' }}" style="position:absolute;top:0rpx;right:0rpx; width:362rpx;height:895rpx;background-color:{
   
   { bgCurrent || bgColor}};transform: rotateZ(0deg);transform-origin: left bottom;">
    </view>
  </view>
  <!--  -->
  <view style="position:absolute;z-index:10;width:716rpx;height:890rpx;display:flex;bottom:602rpx;">
    <view style="position:absolute;top:0rpx;left:0rpx; width:372rpx;height:895rpx;background-color:{
   
   {bgColor || '#d2d2d0'}};transform: rotateZ(-45deg);transform-origin: right bottom;">
    </view>
    <view style="position:absolute;top:0rpx;right:0rpx; width:372rpx;height:895rpx;background-color:{
   
   {bgColor || '#d2d2d0'}};transform: rotateZ(45deg);transform-origin: left bottom;">
    </view>
  </view>
  <!-- 背景 -->
  <view a:if="{
   
   {title == 1}}" style="position:absolute;z-index:{
   
   {title == 1?2:1}};width:714rpx;height:888rpx;bottom:602rpx;">
    <view style="display:flex;position:absolute;width:714rpx;height:888rpx;z-index:{
   
   {9}}">
      <view class="" style=" flex:1;height:888rpx;background-color:{
   
   {color[bgIndex +1]}};transform: rotateZ(0deg);transform-origin: right bottom;">
      </view>
      <view class="" style=" flex:1;height:888rpx;background-color:{
   
   {color[bgIndex +1]}};transform: rotateZ(0deg);transform-origin: left bottom;">
      </view>
    </view>
    <!-- 下一张 -->
    <view a:if="{
   
   {direction=='left'}}" style="display:flex;position:absolute;width:714rpx;height:886rpx;z-index:{
   
   {bgIndex == index ? 9: color.length-index}}" a:for="{
   
   {color}}">
      <view class="{
   
   {index==bgIndex ? 'left':''}}" style=" flex:1;height:888rpx;background-color:{
   
   {color[index]}};transform: rotateZ(0deg);transform-origin: right bottom;">
      </view>
      <view class="{
   
   {index==bgIndex ? 'right':''}}" style=" flex:1;height:888rpx;background-color:{
   
   {color[index]}};transform: rotateZ(0deg);transform-origin: left bottom;">
      </view>
    </view>
    <!-- 上一张 -->
    <view a:if="{
   
   {direction=='right'}}" style="display:flex;position:absolute;width:714rpx;height:886rpx;z-index:{
   
   {bgIndex == index ? 9: color.length-index}}" a:for="{
   
   {color}}">
      <view class="{
   
   {index==bgIndex ? 'left':''}}" style=" flex:1;height:888rpx;background-color:{
   
   {color[index + 2]}};transform: rotateZ(0deg);transform-origin: right bottom;">
      </view>
      <view class="{
   
   {index==bgIndex ? 'right':''}}" style=" flex:1;height:888rpx;background-color:{
   
   {color[index + 2]}};transform: rotateZ(0deg);transform-origin: left bottom;">
      </view>
    </view>
  </view>
  <view a:else style="position:absolute;z-index:1;width:714rpx;height:888rpx;bottom:602rpx;">
    <view style="display:flex;position:absolute;width:714rpx;height:888rpx;z-index:{
   
   {9}}">
      <view class="" style=" flex:1;height:888rpx;background-color:{
   
   {color1[bgIndex +1]}};transform: rotateZ(0deg);transform-origin: right bottom;">
      </view>
      <view class="" style=" flex:1;height:888rpx;background-color:{
   
   {color1[bgIndex +1]}};transform: rotateZ(0deg);transform-origin: left bottom;">
      </view>
    </view>
    <!-- 下一张 -->
    <view a:if="{
   
   {direction=='left'}}" style="display:flex;position:absolute;width:714rpx;height:886rpx;z-index:{
   
   {bgIndex == index ? 9: color1.length-index}}" a:for="{
   
   {color1}}">
      <view class="{
   
   {index==bgIndex ? 'left':''}}" style=" flex:1;height:888rpx;background-color:{
   
   {color1[index]}};transform: rotateZ(0deg);transform-origin: right bottom;">
      </view>
      <view class="{
   
   {index==bgIndex ? 'right':''}}" style=" flex:1;height:888rpx;background-color:{
   
   {color1[index]}};transform: rotateZ(0deg);transform-origin: left bottom;">
      </view>