当前位置: 首页 > news >正文

uniapp 用css animation做的鲤鱼跃龙门小游戏

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
第一次做这种小游戏,刚开始任务下来我心里是没底的,因为我就一个‘拍黄片’的,我那会玩前端的动画啊,后面尝试写了半天,当即我就给我领导说,你把我工资加上去,我一个星期给你做出来,算了不开玩笑了,‘拍黄片’工资低,还要被java和前端歧视,日子不好过啊,做别人不愿意接的活,还没话语权,没人权。。
下面是主要代码

背景移动

<view class="bgBox"><view class="bgimg" class="bg":style="'animation-play-state:'+actived+';animation-timing-function:steps('+bgTiming+');'"></view></view>
.bgBox {width: 100%;height: 100vh;animation-direction: normal;animation-iteration-count: 1;}.bgimg {width: 100%;height: 100%;background: url('你的背景长图') no-repeat;background-size: 100% auto;display: block;animation-duration: 13s;}.bg {background-position: right top;animation-name: bg-action;animation-iteration-count: 1;animation-duration: 13s;}@keyframes bg-action {from {background-position: right 100%;}to {background-position: right 0;}}
     //动画开始this.actived='running';//动画暂停this.actived = 'paused';

		<view class="fishbox" :style="'animation-duration:'+goupData+'s;animation-play-state:'+actived":class="yuType?'myElement':''"><view class="fish" :style="'animation-duration:'+sudata+'s;animation-play-state:'+actived"></view></view>
	.fishbox {width: 300rpx;height: 350rpx;position: absolute;bottom: 600rpx;animation-name: run;animation-direction: normal;animation-iteration-count: 1;}.fish {width: 100%;height: 96%;margin-left: 75%;background: url('../../static/jhy/lyylm/yu7.png') no-repeat left top;background-size: 100% auto;animation-name: play-action;animation-iteration-count: infinite;animation-timing-function: steps(5);}@keyframes run {0% {transform: translateY(180px);}90% {transform: translateY(-230px);}100% {transform: translateY(-350px);}}@keyframes play-action {from {background-position: left 0;}to {background-position: left 111.3%;}}
     //动画开始this.actived='running';//动画暂停this.actived = 'paused';

总结:
关于动画结束,给一个默认结束时间,比如10S,在点击开始方法里面写一个定时器,每秒减1,当时间等于0时结束动画,消除定时器。背景和鱼的位置,就需要你自己慢慢调到合适的位置,祝愿你能成功。

http://www.lryc.cn/news/287247.html

相关文章:

  • JeecgBoot 3.6.1实现Modal对话框,以为审核数据为例
  • Spring基于dynamic-datasource实现MySQL多数据源
  • JS高频面试题(下)
  • 单点登陆(SSO)基于CAS实现前后端分离的SSO系统开发「IDP发起」
  • 二叉树
  • 边缘计算:挑战与机遇的平衡艺术
  • Windows11 Copilot助手开启教程(免费GPT-4)
  • 【Golang入门教程】如何使用Goland创建并运行项目
  • 鸿蒙开发实战-手写文心一言AI对话APP
  • 鸿蒙常用UI效果及一些处理方式总结
  • dataGrip连接数据库mysql和intersystems的iris
  • 【51单片机】点亮第一个LED灯
  • ubuntu20.04 格式化 硬盘 扩展硬盘
  • openssl3.2/test/certs - 031 - purpose variants: clientAuth
  • ubuntu下docker卸载和重新安装
  • 搭建k8s集群实战(一)系统设置
  • go-carbon v2.3.6 发布,轻量级、语义化、对开发者友好的 golang 时间处理库
  • 力扣2859-计算k置位下标对应元素的和
  • [计算机提升] 切换(域)用户
  • 蓝桥杯练习题dfs与bfs
  • 软件游戏提示msvcp140.dll丢失的解决方法,全面分析msvcp140.dll文件
  • LandrayOA内存调优 / JAVA内存调优 / Tomcat web.xml 超时时间调优实战
  • 免费SSL数字证书申请,免费数字证书使用教程
  • 深入理解Flutter中的GlobalKey与LocalKey(ValueKey、ObjectKey、UniqueKey)及其使用方法
  • linux命令学习
  • 核桃的数量---蓝桥杯
  • 进程通信与socket编程实践之猜数字小游戏
  • AcWing 1241. 外卖店优先级(复杂模拟思路 + 代码详解)
  • 查询文件hash值
  • [docker] Docker资源管理