6_动画_其他属性

作者: Zd_silent | 来源:发表于2016-12-09 12:04 被阅读21次

6_动画_其他属性
动画学习
UIImageView
属性动画学习使用总结
iOS动画之显示层动画
[Android动画]属性动画-小球下落动画实现
Android动画-属性动画
动画之属性动画基础篇
Swift3.1动画(二)
UI（四十八）属性动画

2D、3D变形动画

transform：2D变形：复合属性

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。转换方法：translate()/rotate()/scale()/skew()/matrix()

transform

none 定义不进行转换。
translate(x,y) 定义 2D 平移转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。

transform: translate(100px,100px);

scale(x,y) 定义 2D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

transform: scale(1.5,0.6);

rotate(angle) 定义 2D 旋转，在参数中规定角度。

补充1.角度也可以使用弧度单位：rad

transform: rotate(60deg);

transform: rotate(60rad);

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
kewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

transform: skewX(10px);

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。(x缩放，弧度耽误旋转，弧度旋转，y缩放，x平移，y平移)

变形矩阵功能很强大，但是相对比较复杂，涉及到复杂的数学计算

transform-origin:改变元素变形的基准点

像素/百分比
X轴：left/right/center
Y轴：top/bottom/center/

transform-origin: 0px 0px;

transform：3D变形：

transform：3D变形可以近似理解为沿着Z轴移动元素，使得元素更加靠近或者远离你，从而使元素看起来变得更大或更小。

transform：3D变形函数
- translate3d(x,y,z) 定义 3D 转换。
- translateY(y) 定义转换，只是用 Y 轴的值。
- translateX(x) 定义转换，只是用 X 轴的值。
- translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
- +++++++++++++++++++++++++++++++++++++++
- rotate3d(x,y,z,angle) 定义 3D 旋转。
- rotateX(angle) 定义沿着 X 轴的 3D 旋转。
- rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
- rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
- +++++++++++++++++++++++++++++++++++++++
- scale3d(x,y,z) 定义 3D 缩放转换。
- scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
- scaleX(x) 通过设置 X 轴的值来定义缩放转换。
- scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
- +++++++++++++++++++++++++++++++++++++++
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。

transform-origin 允许你改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。
perspective(n) 为 3D 转换元素定义透视视图。父控件中设置
transform-style 规定被嵌套元素如何在 3D 空间中显示。
- flat 子元素将不保留其 3D 位置。
- preserve-3d 子元素将保留其 3D 位置。
perspective-origin 规定 3D 元素的底部位置。目前浏览器都不支持 perspective-origin 属性
backface-visibility 定义元素在不面对屏幕时是否可见。浏览器支持度不好

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>6-51课堂演示</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul id="ul1">
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS3</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
    </ul>
    <br><br>
    <hr>
    <ul id="ul2">
        <li><a href="#">HTML5</a></li>
        <li><a href="#">CSS3</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
    </ul>
</body>
</html>

@charset "UTF-8";

ul{
  list-style: none;
  font-size: 24px;
}

li{
  background-image: linear-gradient(to right,rgb(76, 245, 87),rgb(238, 70, 136));
  width: 200px;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
}

a{
  text-decoration: none;
}

#ul1 li{
  float: left;
}

li:hover{
  background-image: linear-gradient(to left,rgb(76, 245, 87),rgb(238, 70, 136));
  transform: rotate(15deg);
  transform-origin: left top;
}

hr{
  clear: both;
  border-top: 50px;
  border-width: 3px;
  border-style: dashed;
  border-color: rgb(230, 122, 149)
}

练习.gif

过渡动画：

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：把效果添加到哪个 CSS 属性上/规定效果的时长

过渡动画的属性：

transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
- none 没有属性会获得过渡效果。
- all 所有属性都将获得过渡效果。
- 属性名称
transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 规定过渡效果何时开始。默认是 0。

  #div1:hover{
  background: rgb(244, 142, 91);
  width: 100px;
  /*transition-property: all;*/
  transition-property: width;
  transition-duration: 2.0s;
  /*transition-timing-function: ease;*/
  transition-timing-function: cubic-bezier(.42, 0, .58, 1);
  transition-delay: 1.0s;
  }

CSS3 动画属性：

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

@keyframes 设定动画规则。可以近似理解为动画的剧本。
- name 必需。定义动画的名称。
- 0-100%/from...to... 必需。动画时长的百分比。
- 需要变化的 CSS 样式属性:必需。
animation 所有动画属性的简写属性，用于设置六个动画属性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
animation-name 属性为 @keyframes 动画规定名称。若设置为none则覆盖已有的动画效果。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
- linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
- ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
- ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
- ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
- ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。infinite为无限次播放。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal 顺向播放"。/ alternate 动画应该轮流反向播放。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running 规定动画正在播放。"。/paused 规定动画暂停。
animation-fill-mode 规定对象动画时间之外的状态。
- none 不改变默认行为。
- forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
- backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
- both 向前和向后填充模式都被应用。

@keyframes mytest {
  from{
    margin-left: 50px;
    background-color: rgb(79, 193, 128);
  }

  to{
    margin-left: 300px;
    background-color: rgb(193, 233, 79);
  }
}

div:hover
{
  animation: mytest 2.0s ease 1.0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes mytest {
  0%{
    margin-left: 50px;
    background-color: rgb(79, 193, 128);
  }

  50%{
    margin-left: 300px;
    background-color: rgb(203, 213, 6);
  }

  100%{
    margin-left: 150px;
    background-color: rgb(193, 233, 79);
  }
}

div:hover
{
  animation: mytest 2.0s ease 1.0s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

CSS其他常用属性

opacity：透明度设定

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
E8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
opacity与通过rgba()设定透明度的区别：前者同时作用于元素的标签内容，后者只是作用于元素本身

鼠标的样式 cursor：

我们可以通过cursor属性改变浏览器默认的鼠标样式，可改变的样式很多，这里仅仅列出几种相对常用的
- hand是手型
- pointer也是手型，推荐使用这种。
- crosshair是十字型
- text是移动到文本上的那种效果
- wait是等待的那种效果
- default是默认效果
- e-resize是向右的箭头
- ne-resize是向右上的箭头
- n-resize是向上的箭头
- nw-resize是向左上的箭头
- w-resize是向左的箭
- sw-resize是左下的箭头
- s-resize是向下的箭头
- se-resize是向右下的箭头
- auto是由系统自动给出效果

rem:根元素字体的大小

浏览器默认字体大小为16px
em是以父元素字体为基准的
rem是以根元素字体大小为基准的

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>rem和em的区别</title>
    <style type="text/css">
        p{
            font-size: 0.75em;
        }
        .span1{
            font-size: 2em;
        }
        .span2{
            font-size: 2rem;
        }
    </style>
</head>
<body>
    我是浏览器默认html字体大小为16px;
    <p>
      我是p标签字体，段落文字大小为0.75em即：12px(16*0.75);<br>
      <span class="span1">
        我大小是2em，即24px，这里是相对父级字号(12px)*2的，而不是相对body里面的16px
      </span><br>
      <span class="span2">
        我大小是2rem，即32px，这里是相对根元素字号(16px)*2的，而不是相对p里面的12px
      </span>
    </p>
</body>
</html>

轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
- outline 在一个声明中设置所有的轮廓属性。
  - outline-color 设置轮廓的颜色。
  - outline-style 设置轮廓的样式。
  - outline-width 设置轮廓的宽度。
  - outline-offset 设置轮廓到边框的距离。注：css新增属性,不可以写到符合属性里。

`display 属性常用属性值：`

display的属性值很多，有些目前支持度不好
- none 此元素不会被显示。
- block 此元素将显示为块级元素。特征：换行，可设置宽高尺寸。
- inline 行内元素，默认。特征:大小自适应；不换行。
- inline-block 行内块元素。特征:可以设置大小，但是不可以换行。
- 其他：list-item/table/inline-table/table-cell/table-caption......

@charset "UTF-8";
*{
  margin: 0;
  padding: 0;
}

ul{
  list-style: none;
}

a{
    text-decoration: none;
}

.ul1>li{
  background: rgb(73, 25, 56);
  width: 150px;
  height: 2em;
  float: left;
  text-align: center;
  margin: 5px;
  border-radius: 10px 10px 0px 0px;
  font-size: 20px;
  line-height: 40px;
}

.ul2{
  background: rgb(168, 79, 210);
  border-radius: 0px 0px 10px 10px;
  display: none;
}

.ul1>li:hover>ul
{
  display: block;
}

.ul1>li:hover
{
  background: rgb(109, 23, 150);
}

.ul2>li>a:hover
{
  display: inline-block;
  border-radius: 10px;
  width: 85%;
  height: 2em;
  background: rgb(208, 127, 123);
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>6-56课堂演示</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav>
    <ul class="ul1">
        <li>
            <a href="">首页</a>
            <ul class="ul2">
                <li><a href="">新闻</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">读书</a></li>
            </ul>
        </li>
        <li>
            <a href="">首页</a>
            <ul class="ul2">
                <li><a href="">新闻</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">读书</a></li>
            </ul>
        </li>
        <li>
            <a href="">首页</a>
            <ul class="ul2">
                <li><a href="">新闻</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">读书</a></li>
            </ul>
        </li>
    </ul>
</nav>
</body>
</html>

练习.gif

6_动画_其他属性
2D、3D变形动画 transform：2D变形：复合属性通过 CSS3 转换，我们能够对元素进行移动、缩放、转...
动画学习
动画分为组动画，属性动画，渐变动画，其中属性动画包括普通动画和关键帧动画，其他动弹动画，动画层分为 pres...
UIImageView
好像基本只用来展示图片。属性动画其他 1
属性动画学习使用总结
Android 属性动画总结属性动画的优点属性动画的使用步骤实例化属性动画对象设置属性动画的时长启动属性...
iOS动画之显示层动画
一、简单的动画1、闭包如 UIView.setAnimationDuration(2)设置动画执行时间其他的属性...
[Android动画]属性动画-小球下落动画实现
属性动画属性动画是通过直接改变View属性，实现的动画效果。与补间动画不同的是，属性动画是对象的属性的真实改变，...
Android动画-属性动画
属性动画所谓属性动画，就是改变对象Object的属性来实现动画过程。属性动画是对View的动画的扩展，通过它可以...
动画之属性动画基础篇
属性动画属性动画，改变view或者object的属性实现动画，属性动画比补间动画更强大，不但可以实现旋转、平移等...
Swift3.1动画(二)
前言：上一篇Swift3.1动画(一)讲了常见的动画效果，这篇继续深入了解动画的其他属性一、了解f...
UI（四十八）属性动画属性动画->通过改变图层或者视图上面的属性值(支持动画的属性)产生的动画属性动画的常用方法属性: 1、初始化 +...