小程序 keyframes transform

2024-10-17

css3 @keyframes、transform详解与实例

一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性——@keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-moz-.-khtml-等前缀以适应不同的浏览器. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 通

微信小程序开发03-这是一个组件

编写组件基本结构接上文:微信小程序开发02-小程序基本介绍我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ① 只提供Header部分以及容器部分 ② 容器部分的HTML结构由业务层提供 ③ 容器部分对应样式由业务层提供我们如果要在小程序中实现这类组件,意味着我们需要往小程序中动态插入WXML结构,我们这里先做个demo,试试往动态插入WXML是不是可行 this.setData({'wxml': `

微信小程序：将中文语音直接转化成英文语音

作者:瘟小驹文章来源<微信小程序个人开发全过程> 准备工作: 准备工具:Eclipse.FileZilla.微信开发者工具.一个配置好SSL证书(https)的有域名的服务器所需知识:SpringMVC框架.Java+HTML+CSS+JS.文件上传技术.Tomcat虚拟目录.接口调用与发布成品介绍:将中文语音直接转化成英文语音.好久不用现在已下线...可以在微信搜我另外一个作品"壹曲觅知音"玩玩,博客地址: https://blog.csdn.net/qq_3

微信小程序实现即时通信聊天功能的实例代码

项目背景:小程序中实现实时聊天功能一.服务器域名配置配置流程配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3

微信小程序开发动感十足的加载动画--都在这里！

代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现加载动画带动画(动画可做参靠,个人要是觉得不好看可以自定义动画) 2.案例目录结构二.程序实现具体步骤 1.index.wxml代码 <view class="tui-loading-r

微信小程序列表加载更多

概述基于小程序开发的列表加载更多例子. 详细代码下载:http://www.demodashi.com/demo/13632.html 一.前言基于小程序开发的列表加载更多例子. 二.运行效果运行效果(演示的小视频,点击播放即可) 三.实现过程总体思路如何: 1.通过scroll-view组件提供的bindscroll方法监控滚动的时候是否距离底部在40px内,如果小于40px则触发加载更多方法(见完整代码index.js里的bindscroll方法) 2.通过使用发现很多时候服务返回

微信小程序相关三、css写小黄人

小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基本上都是用border,transform:rotate(),animation,和一些细节做的,左边的对话框那里的小尖头也是一个重点细节下面附上代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&

小程序-demo：小程序示例-page/common

ylbtech-小程序-demo:小程序示例-page/common 1.返回顶部 0. 1. 2. pages/common返回顶部 1. -lib --weui.wxss /*! * weui.js v1.1.0 (https://github.com/weui/weui-wxss) * Copyright 2016, wechat ui team * MIT license */ page { line-height: 1.6; font-family: -apple-system

微信小程序之组件的集合（五）

这个是学习复杂的组件的封装的,在课程中,主要实现的是书单上方的搜索功能组件的开发,这个应该是较之前的组件是有一定难度的,但是现在学到现在,感觉前端的内容和后端的内容比较起来,还是比较容易的,而且好多内容,其实在后端的开发中是很成熟的,所以学起来并不是很难以理解,这也是我们的一个优势吧,毕竟选择后端的同学应该是不错的啊,哈哈哈!这种组件其实是有一个特别的名字的,那就是高阶组件,来,把这个东西尽快学习掌握! 一.新建search组件首先还是新建search组件的各个文件,这里微信开发者工具的功能很

小程序wepy2 模拟vant PasswordInput, NumberKeyboard 密码输入框控件

vant weapp小程序端控件目前是没有PasswordInput,NumberKeyboard的.实现效果: 数字键盘组件代码(keyboard.wpy): <template> <div class="keyboard"> <div class="number-keyboard number-keyboard--default number-keyboard--safe-area-inset-bottom"> <div

微信小程序-基于高德地图API实现天气组件(动态效果)

微信小程序-基于高德地图API实现天气组件(动态效果) 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有需要的开发者. 1.组件介绍 1.1 组件效果预览图小程序组件继承了外部样式colorui的色彩,但实际动画会根据父节点的color属性自动填充颜色,即使不引入colorui这个样式库,也可以在该组件引用外定义一个有color属性的块包裹该组件,同样可以达到如图的效果. 1.2 构造形式 1.

如何实现微信小程序动画？添加到我的小程序动画实现详细讲解，轻松学会动画开发！附壁纸小程序源码下载链接

为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会在页面右上方,显示"添加小程序"的动画提示,如下图所示: 怎么实现这样的关注提示功能呢?首先,进入pages/index/index.wxml文件中,编写布局代码如下: 1  2 3 <view hidden=

微信小程序动画实现(API,css)

微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Animation.rotateZ(-45).step() this.setData({ animation:Animation.export() }) } index.wxml <view> <view class="box" animation="{{animat

微信小程序开发日记——高仿知乎日报（上）

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉我将该教程分为以下三篇微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块这篇要讲 API分析启动页轮播图日报列表浮动按钮侧滑菜单 API分析以下是使用到的具体API,更加详细参数和返回结

微信小程序之知乎日报

上一次的<微信小程序之小豆瓣图书>制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识.而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多.在我编写这个DEMO之前,网上已经有很多网友弄出了相同的DEMO,也是非常不错的,毕竟这个案例很经典,有比较完整的API,很值得模仿学习.本次个人的DEMO也算是一次小小的练习吧. 由于知乎日报是一个资讯类的App,UI的布局主要是以资讯列表页.资讯详情页和评论页为主,当然本次也附带了应用设置页,不过现阶段功能尚未编写

微信小程序 canvas

测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的H5canvas,就当它是个d

《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维

<微信小程序七日谈>系列文章: 第一天:人生若只如初见: 第二天:你可能要抛弃原来的响应式开发思维: 第三天:玩转Page组件的生命周期: 第四天:页面路径最多五层?导航可以这么玩上篇文章第一天:人生若只如初见简单记录了笔者初步上手开发微信小程序遇到的一些问题,其中提到了wxss的部分细节问题.这篇文章以笔者在开发小程序响应式UI当中遇到的一些问题为例,简单记录一下使用wxss为响应式开发带来的一些模式和思维上的改变. rem的重定义前端工程师对rem非常熟悉,rem是以html元素的fo

微信小程序全面实战，架构设计 && 躲坑攻略(小程序入门捷径教程)

最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开发中遇到的难点.项目的架构设计.最佳实践以及踩过的坑.文章内容较多,如果想看架构设计和躲坑技巧,请直接浏览后面的正文,简书没有目录,也挺伤感的. 值得再次声明的是:微信小程序的内容部分是hybrid模式,并非原生,所以性能并不好,绑定的tap事件也有明显的延迟. 每一个由边框围起来的部分,都是一个最

微信小程序剖析【下】：运行机制

在上一篇<微信小程序「官方示例代码」浅析[上]>中,我们只是简单的罗列了一下代码,这一篇,让我们来玩点刺激的——就是看看IDE的代码,了解它是怎么运行的. 还好微信的开发团队在软件工程的实践还有待提高,我们才有机会可以深入了解他们的代码——真想建议他们看看Growth的第二部分,构建系统. 解压应用首先你需要有下面的工具啦 Mac电脑微信web开发者工具.app WebStorm / 其他编程器或 IDE,最好可以支持重命名首先,我们需要右键微信web开发者工具.app,然后显示包的内

微信小程序movable-view移动图片和双指缩放

先从movable-view开始说起吧. movable-view是小程序自定义的组件.其描述为:"可移动的视图容器,在页面中可以拖拽滑动". 官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/component/movable-view.html. 值得注意的是文档中有一段备注: "当movable-view小于movable-area时,movable-view的移动范围是在movable-area内:当movable-vi

微信小程序左右滑动切换图片酷炫效果

开门见山,先上效果吧!感觉可以的用的上的再往下看. 心动吗?那就继续往下看! 先上页面结构吧,也就是wxml文件,其实可以理解成微信自己封装过的html,这个不多说了,不懂也没必要往下看了. <scroll-view class="scroll-view_H" scroll-x scroll-with-animation style="width: 100%;height:{{windowHeight}}px" bindscroll="getSele

小程序 keyframes transform

热门专题