专栏首页极乐技术社区wxss学习《五》所有以a,b开头的属性

wxss学习《五》所有以a,b开头的属性

整理下小程序里所有的css属性吧,这样也能好查询,按照字母表列举:

a 共有15个属性:其中9个为动画animation的属性。详情如下:

1.additive-symbols:附加符号。Counter Style的东西,仅Firefox支持。所以不详细说了。大概样式就是像下图这个样子。自动生成 甲乙丙丁等等 一二三四等等的格式。

2.align-content:在flex布局中垂直方向设置。详见微信小程序css篇----flex布局。

3.align-items:同align-content,不过两个不同点在于,align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。而align-items是用来让每一个单行的容器.简单点说,按照后缀 content 是内容,整个内容在布局中的位置,而items 是每一个子项在布局的位置。算了 说不明白,看图:

4.align-self:父控件是flex,设置子元素的位置。

5.all:修改所有元素或其父元素的属性为初始值。除了 unicode-bidi 和 direction。

6.alt:小程序中的解释是这样的。不过不知道怎么用,看情况应该是只支持Safari9

Provides alternative text for assistive technology to replace the genenerated content of a ::before or ::after element.

(Safari 9)

7.animation:动画属性。详细的可查看官方APIwx.createAnimation(OBJECT)

8.animation-deley:设置动画在启动前的延迟间隔。

9. animation-direction: 取值:alternate,alternate-reverse,normal,reverse。指定是否应该轮流反向播放动画。

10.animation-duration: 动画指定需要多少秒或毫秒完成。

11.animation-fill-mode: 取值:backwards,both,forwards,none。规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

12.animation-iteration-count:定义动画播放的次数。取值:infinite(永远播放),或者一个数字。

13.animation-name:属性为 @keyframes 动画指定名称。

14.animation-play-state:取值:running,pause。 指定动画是否正在运行或已暂停。

15.animation-timing-function: 指定动画将如何完成一个周期。

取值:linear(动画从头到尾的速度是一样的。),

ease(动画以低速开始,然后加快,在结束前变慢。),

ease-in(动画以低速开始),

ease-out(动画以低速结束),

ease-in-out(动画以低速开始结束),

cubic-bezier(1, 0, 0, 1)(在cubic-bezier函数中设置值的方式。)

step-end:相当于 steps(1,end)

step-start:相当于steps(1,start)。

如何创建一个css的animation?

代码就跟简单:在wxml就只有一个 <view >我是动画</view>。以下的都是wxss中。当然小程序的组件基本上都试过了,都可以。

要实现css的动画,必须要知道@keyframes规则。这个规则就是创建动画。指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

view plain copy

view{ width:100px; height:100px; background:red; position:relative; animation-name:myfirst; animation-duration:5s; animation-timing-function:linear; animation-delay:2s; animation-iteration-count:infinite; animation-direction:alternate; animation-play-state:running; } @keyframes myfirst { 0% { background:red; left:0px; top:0px;} 25% { background:yellow; left:200px; top:0px;} 50% { background:blue; left:200px; top:200px;} 75% { background:green; left:0px; top:200px;} 100% { background:red; left:0px; top:0px;} }

注意点:不支持类选择,id选择。

以上就是a开头的css属性在小程序里支持。

看了下b开头的比较多,就放下面一篇里去。

微信小程序css篇----所有属性(按字母排列:b开头)

今天星期六,本来想着先玩两把LOL,不过一想到后天小程序就全面公布了,细思极恐啊,为了到开发的时候顺畅,还是忍住了玩的冲动,继续来熟悉微信小程序里的对css属性的支持,因为b开头的比较多,大概就是bg了,border,bottom,box等等属性,先上图看看有多少:

以上,那详细来看看,分个几大类吧:

一:backface-visibility:属性定义当元素不面向屏幕时是否可见。就是在动画里旋转后,背面是不是显示。取值有:visible(可见),hidden(不可见)。

二:background,背景。

三:behavior:只有IE支持这个属性。就不说了。

四:block-size:逻辑宽度,取决于元素的writing-mode。Firefox支持。

五:border:边框。

六:bottom:设置图像的底部边缘。

对于绝对定位元素,bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素,bottom属性设置单位高于/低于其正常位置的元素的底边。

七:box:盒子属性:

1. box-decoration-break: 取值:clone(克隆),slice(片式)。还是看图:

2.box-shadow:阴影: box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow:水平阴影位置,允许负值。必须有

v-shaddow:垂直阴影的位置,允许负值。必须有

blur:模糊距离,可有。

spread:阴影的大小,可有。

color:阴影的颜色。可有

inset:从外层的阴影(开始时)改变阴影内侧阴影。

3.box-size:取值:box-sizing: content-box|border-box|inherit:

两个取值的区别在于是否会将pandding/margin算进去。

view plain copy

view{ margin: 20rpx; padding: 20rpx; width: 200rpx; height: 200rpx; box-shadow: 10px 10px 5px #888888; box-sizing:content-box; }

八:break-after,break-before,break-inside:主要是页面要是分页的时候属性。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:微信小程序联盟

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序音频API踩坑手册

    极乐君
  • 一斤代码深入理解系列(一):微信小程序事件机制

    事件机制是一种非常典型的通讯方式,可以在代码中的不同对象之间传递信息,也可以在应用的不同层面进行沟通协作。今天我们想看来一下微信小程序框架提供的事件处理机制。 ...

    极乐君
  • 使用ES6新特性开发微信小程序(1)

    ECMAScript 6(简称ES6)是JavaScript语言的最新标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。 ...

    极乐君
  • CSS语法

    选择符说明:CSS选择符(选择器) 选择符表示要定义样式的对象(标签名字),可以是元素本身,也可以是一类元素或者指定名称的元素,简单来说就是给对应的元素起个名称...

    爱知汇
  • 中小型网站服务器配置参考

    入口服务器(2台): CPU:单核或双核 内存:DDR4 2G或以上 硬盘:SATA 100G或以上 网卡:千兆网卡 带宽:10Mbps独享或以上 应用服务器(...

    joshua317
  • 寒假学习计划

    今年考研感觉不太好,借助寒假系统的复习一遍java web和大学其他知识(还有高数/(ㄒoㄒ)/~~)

    euclid
  • [Python库]分析一个python库--sh(系统调用)

    周末看到一个python的库:sh。功能是让你像调用方法那样调用系统中的命令。比方说你想调用系统的ls方法,普通的做法是: import subprocess;...

    the5fire
  • Java自动重启jar包

    实现思路:获取某目录下的所有jar包,根据最新的修改时间来启动该jar包(当然你也可以写死路径,就连获取也不用了),运用多线程 执行cmd命令同时关闭原程序

    乐心湖
  • nginx反向代理https网站 并实现网站的注册和登录功能

    image.png 最近给我们官网做了新加坡、香港、美国、加拿大地区的反代,由于现阶段发展有限,只好选择这种最节约的方法了,但并非负载均衡,负载均衡等后期商城确...

    速企云
  • 简历石沉大海?背后的原因竟然是这样的!

    又是一年毕业季,几多欢喜几多愁。许多同学在找工作的时候,明明辛辛苦苦准备了简历,可是投出去的时候却像石沉大海一般,杳无音讯。那么,究竟是为什么呢?有没有什么办法...

    姬小光

扫码关注云+社区

领取腾讯云代金券