6_动画_其他属性

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

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>