小程序实现开屏效果

最新推荐文章于 2025-04-07 10:50:04 发布
最新推荐文章于 2025-04-07 10:50:04 发布
阅读量1.5k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 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>
    <</
最低0.47元/天 解锁文章
微信小程序开发中的动画效果和页面过渡
m0_72166538的博客
04-21 495
在开发小程序过程中，动画效果和页面过渡是非常重要的内容，可以提升用户体验和页面的可视化效果。下面我将为你提供一些常见的动画效果和页面过渡的代码案例。以上是一些常见的微信小程序开发中的动画效果和页面过渡的代码案例。通过这些案例，你可以在开发过程中参考并实现自己想要的动画效果和页面过渡效果。在小程序中实现页面滑动切换效果可以使用。在小程序中实现横向页面切换效果可以使用。在小程序中实现页面渐隐渐现效果可以使用。在小程序中实现淡入淡出效果可以使用。在小程序中实现旋转效果可以使用。在小程序中实现缩放效果可以使用。
微信小程序实现渐入渐出动画效果
12-08
前言 在做小程序列表展示的时候，接到了一个需求。需要在列表展示的时候加上动画效果。设计视频效果如下图： 需要在进入列表页的时候，依次展示每一条卡片，在展示完成后需要隐藏掉当天之前的卡片。 实现思路 实现该动画效果，首先需要给每个卡片添加一个css动画。因为每个卡片的显示是有时间间隔的，以及考虑到展示完成后的隐藏效果，所以动画效果需要用js动态去添加。在看了微信开发文档后，发现微信小程序提供了Animation的一个动画对象，具体看了里面的参数后发现，是可以实现需求上的效果的。具体使用如下api: wx.createAnimation(Object object) 创建一个anima
uniapp微信小程序设置开屏启动动画效果
qq_41200621的博客
08-16 4506
使用uniapp搭建的微信小程序，制作小程序启动开屏动画，主要使用css动画属性。主页代码过多这里就展示重要代码片段。
小程序开屏广告以及智能接入
最新发布
十年工龄的博客
04-07 710
小程序开屏广告以及智能接入
微信小程序开屏动画组件封装以及使用示例
ITzhongzi的博客
05-14 3332
思路 首先调用wx.hideTabbar() 隐藏微信小程序的tabbar 封装一个开屏动画组件，在几秒后自动关闭 在关闭的时候调用 wx.showTabber();来使tabbar显示出来 效果展示 git仓库地址 git仓库地址 https://github.com/MrITzhongzi/small_routine_components.git 示例目录结构 核心代码 kaiping_component.wxml <view class="kaiping_box"> &lt
小程序启动页动画实现
IICOOM的博客
02-21 5996
微信小程序刚被加载时是有自己默认动画的，但是这个千篇一律。我们其实可以做个性化的加载，带来一点不一样的感觉。在小程序首页，onLoad方法中添加代码，页面加载时触发。这样就赋予了小程序一些游戏的感觉，你学废了吗😄。
微信小程序18__一个启动动画
daozhongyang的专栏
12-17 1578
效果图如下： 相关wxml代码： <view class="page"> <view class="loading"> <text style="color:greenyellow; font-size:20px;">loading</text> </view> </view> wxss代码： .page{ margin:0; padding:0; background:white; /***
Android 仿微信小程序开屏页加载loading
weixin_43770454的博客
06-30 839
Android 仿微信小程序开屏页加载loading 废话不多说，先上效果图~ 首先就是底层有一个灰色的圆，然后按照圆形的轨迹进行绘制。 啊~说那么多也没用，还是直接上代码吧，哈哈哈哈 绘制底部圆形及轨迹： import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Matrix; import android.graphics
微信小程序添加插屏广告并设置显示频率(一天一次)
10-15
总结来说，微信小程序插屏广告的实现涉及了广告接口的调用、本地数据存储、用户交互处理等多个方面，开发者需要对微信小程序的API和前端开发有一定了解，才能正确地集成并控制广告的显示。通过合理利用微信提供的...
iOS实现动态的开屏广告示例代码
09-01
然而，iOS系统默认的启动图是静态的，无法直接实现动态效果。因此，开发者需要通过一定的技巧来模拟动态开屏广告的效果。本文将详细介绍如何在iOS中实现这一功能，并提供相关示例代码。 首先，我们要明确实现动态...
微信小程序开屏广告实现
叶落无痕的博客
04-26 9506
微信小程序开屏广告即打开微信小程序后全屏展示的广告图片。用户可点击“跳过”按钮跳过广告，或者广告展示一段时间过后进入微信小程序。并可以显示广告的剩余时间。效果图如下（背景图是网图，界面用了colorui组件库）： 点击“跳过广告”，会直接进入小程序，否则将等按钮上的倒计时结束后再进入小程序。 一、页面设计 这里使用了微信小程序中的<wx:if>,<wx:else>。<wx:if>后的内容为开屏界面的内容，<wx:else&gt...
一个带启动画面的小程序
04-25
一个带启动画面的源代码，使用了漂亮的图标。
小程序PHP开场动画,微信小程序实现登录页云层漂浮的动画效果
weixin_30070663的博客
03-26 450
微信小程序目前的火热程度相信不用多言，最近利用空余时间用小程序实现了个动态的登录页效果，所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。前言2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。上效果图(GIF动态图)当我看到这张背景...
微信小程序动画效果,小程序animation动画
多晴丶
08-14 3990
微信小程序动画效果 最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡 闲来无事写了一个小demo <!--wxml代码--> <view class="wrapper"> <!-- 微信小程序开发功能获取用户头像userAvatarUrl --> <view class="headerImage" catchtap="imageAnimation" animation
uni-app 微信小程序 首页开屏视频demo效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-24 740
/ 页面上拉触底事件的处理函数。
微信小程序自定义开屏广告
weixin_64801028的博客
11-27 784
我查阅了许多关于开屏广告的资料，但网上没有找到现成的代码。虽然微信提供了流量主广告组件来实现开屏广告的功能，但由于项目需求，我希望能够自己控制广告内容，而不是依赖微信的流量主。因此，我打算自己编写开屏广告代码，以下是详细的步骤。
微信小程序（五十二）开屏页面效果
不起眼小菜菜的博客
03-06 1936
注释很详细，直接上代码……
微信小程序开发动感十足的加载动画--都在这里！
热门推荐
极客小寨的博客
06-22 2万+
微信小程序开发动感十足的加载动画--都在这里.jpg 1. 概述 我们在学习微信小程序时，应该会遇到载入图片或者动画需要等待的情况，那么这个等待的画面我们应该怎么编写呢？今天我们就分享这样的小教程。 不多说了，二当家要上图来啦！ image image image image 更多动画自ji关注下...
uniapp小程序实现开屏页
happyyang303的博客
07-12 6362
需求：小程序开屏页持续1.5秒后逐步消失进入首页1、绑定动画 设置动画执行动画的标签 :animation="animationData"2、创建一个实例 uni.createAnimation({ duration: 1500, timingFunction: "ease", delay: 0 })3、描述动画 animation.opacity(1).step()4、
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值