H5 css3特效

Posted txf-123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 css3特效相关的知识,希望对你有一定的参考价值。

3.css3的特效

1.2D转换

属性是transform

属性值 translate() rotate() scale() skew()

Translate 平移

语法 translate(x,y)

  1. 只有一个值 代表水平平移
  2. 2个值代表水平和垂直方向上平移的距离
  3. Xy可以为负值 负值代表正数的相反方向
  4. 兼容性的写法

 

Rotate 旋转

语法 transform:rotate()

  1. 参数必须是角度值30deg
  2. 沿着平面旋转 正数是顺时针旋转 负数是逆时针旋转
  3. 兼容性写法

 

Scale 缩放

语法 transform:scale()

  1. 参数是数字 1代表当前元素的一倍不变 大于1变大 小于1 变小
  2. 如果是一个参数 水平和垂直变化的值是一样
  3. 如果是两个值 水平一个 垂直一个
  4. 兼容性

 

Skew 拉伸

 

2.3d转换

  1. 这些平移 旋转等方法不在是围绕面 而是围绕轴
  2. 这些旋转元素的父级需要给予视距的属性 perspective

语法

1 transform:rotateX()

2.transform-origin:元素转换的位置 默认值是50% 50% 0 这个点

第一个值是x轴 第二个是y轴 第三个是z

Xy的值可以是单词left length %  但是z的值只能是length

 

3.Transform-style 规定被嵌套元素在3d空间中如何显示

flat 默认的  preserve-3d

4.perspective-origin:50% 50%; 元素转换所指向的方向,就是渐渐消失的那个方向。给的转换元素的父级

5.Perspective这个属性是视距的视距,是一种近大远小的效果

6.backface-visibility  visible(背面可见) hidden 背面不可见

3.transition 过渡

 

上面是transition的简写 最后一个是延迟 即便是0也得加单位s

4.动画 animation

Animation:name duration timing-function delay iteration-count direction

Animation-play-state:paused;动画停止

Animation-fill-mode:forwards;动画完成停留在末尾,不返回原来的位置。

@keyframes 用来定义动画

语法  @-webkit-keyframes 动画名{0{}100%{}}

 

以上是关于H5 css3特效的主要内容,如果未能解决你的问题,请参考以下文章

h5 特效

h5牛牛棋牌大厅搭建 图文教程

h5棋牌房间如何安装 现在分享一套搭建教程

开发中经常用到的特效效果

开发中经常用到的特效效果

CSS3.0实现一个有趣特效