css3的新特性和动画

CSS3 简介

CSS的设计主要是为了实现文档内容与文档表示的分离，包括布局、颜色和字体等方面。它还可以用于以不同的方式显示web页面，可以根据您的屏幕大小进行更改。对文档设计的更改可以快速、轻松地应用。

边框(Border)

该border-radius属性可用于创建圆角。此属性通常定义外边界边缘的角的形状。在CSS3之前，切片图像用于创建相当麻烦的圆角。

  .box {
          width: 300px;
          height: 150px;
          background: #cff;
          border: 2px solid #fcc;
          border-radius: 20px;
      }

 <div class="box"></div>

颜色(Color)

CSS3增加了对作为元素设置颜色值的一些新的功能的符号rgba()，hsl()和hsla()。

rgba颜色的值

可以使用rgba()功能符号在RGBA模型（红色-绿色-蓝色-alpha）中定义颜色。RGBA颜色模型是具有alpha通道的RGB颜色模型的扩展，用于指定颜色的不透明度。

alpha参数接受从0.0（完全透明）到1.0（完全不透明）的值。

    h1 {
        color: rgba(0,0,255,0.5);
    }
    p {
        background-color: rgba(0%,0%,100%,0.3);
    }

 <h1>这是一个标题</h1>
 <p>这是一个段落</p>

hsl颜色的值

颜色也可以使用hsl()功能符号定义为HSL模型（色相-饱和度-亮度）。色相表示为色轮或圆形（即以圆形表示的彩虹）的角度（从0到360）。该角度以较少的单位数给出，因为该角度通常以度为单位进行度量，以致该单位隐含在CSS中

饱和度和亮度以百分比表示。100%饱和度表示全彩，并且0%是灰色阴影。然而，100%亮度为白色，0%亮度是黑色，50%亮度是正常的

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

 <h1>这是一个标题</h1>
 <p>这是一个段落</p>

hsla颜色值

可以使用hsla()功能符号在HSLA模型（色调饱和度-亮度-alpha）中定义颜色。HSLA颜色模型是具有Alpha通道的HSL颜色模型的扩展，该Alpha通道指定了颜色的不透明度。

alpha参数接受从0.0（完全透明）到1.0（完全不透明）的值。

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}

 <h1>这是一个标题</h1>
 <p>这是一个段落</p>

背景(background)

background-size属性

该background-size属性可用于指定背景图像的大小。在CSS3之前，背景图片的大小由图片的实际大小决定。背景图像的大小可以使用像素或百分比值，以及关键字来指定auto，contain和cover。不允许使用负值。

.box {
    width: 250px;
    height: 150px;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    border: 6px solid #333;
}

 <div class="box"></div>

注意：背景图片的原始大小为500x300像素，但是使用background-size CSS属性，我们仍然可以在较小的框中显示完整的图片

background-clip属性

background-clip属性可用于指定元素的背景是否延伸到边框中。该background-clip属性可以取三个值：border-box，padding-box，content-box。

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}

 <div class="box"></div>

background-origin属性

该background-origin`属性可用于指定背景图像的定位区域。它可以采取相同的值background-clip属性：border-box，padding-box，content-box。

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
}

 <div class="box"></div>

渐变(linear-gradien)

线型渐变

 .box {
           width: 250px;
           height: 150px;
           background: linear-gradient(to right ,#fcc , #cff);
        }

如果要进一步指定渐变的方向，可以设置角度，而不是预定义的关键字。该角度0deg创建了从底部到顶部的渐变，正角度表示顺时针旋转，这意味着该角度90deg创建了从左到右的渐变

 .box {
           width: 250px;
           height: 150px;
           background: linear-gradient(90deg ,#fcc , #cff);
        }

 <div class="box"></div>

径向渐变

/*指定渐变的形状:circle(圆形) ellipse(椭圆形 默认值) */
 .box {
           width: 250px;
           height: 150px;
           background: radial-gradient(100px 100px at top,#fcc,#cff);
           /*X轴 Y轴 at 位置, 颜色1,颜色2 */
        }

文本溢出(text-overflow)

例如，如果将空白元素的white-space属性值设置为nowrap，或者单个单词太长而无法容纳较长的电子邮件地址，则可能会导致文本溢出（例如，将其禁止换行）。在这种情况下，可以使用CSS3 text-overflow属性来确定溢出文本内容的显示方式。
ellipsis渲染省略号（“ ...”）以表示剪切后的文本
clip将文本剪切到内容区域的限制处

 p {
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            background: #cff;
            text-overflow: ellipsis;
        }

 <p>文本超出后用...表示文本超出后用...表示文本超出后用...表示文本超出后用...表示</p>

阴影(shadow)

box-shadow属性

box-shadow属性可用于向元素的框中添加阴影。您甚至可以使用逗号分隔的阴影列表应用多个阴影效果。

box-shadow: offset-x offset-y blur-radius color;

该box-shadow属性的组件具有以下含义：

offset-x —设置阴影的水平偏移量。
offset-y —设置阴影的垂直偏移
blur-radius —设置模糊半径。值越大，模糊越大，阴影的边缘越模糊。不允许使用负值
olor —设置阴影的颜色。如果省略或未指定颜色值，则它将采用color属性的值。

.box {
       width: 200px;
       height: 150px;
       background: #ccc;
       box-shadow: 5px 5px 10px #999;
}

text-shadow属性

您可以使用text-shadow属性在文本上应用阴影效果。您还可以使用与box-shadow相同的表示法对文本应用多个阴影。

h1 {
    text-shadow: 5px 5px 10px #666;
}
h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

transform 2D转换

转换就是使用transform属性将HTML元素

移动 translate

  div {
       transform-origin: left top;
       transform: rotate(45deg);
 }

旋转 rotate

  div {
     transform:rotate(45deg)
     /* 顺时针旋转45度,若果是负数逆时针旋转 */
 }

缩放 scale

div {
     transform:scale(x,y); 
     /* X轴缩放倍数 Y轴缩放倍数 可选默认值同第一个参数 */
  }

倾斜 skew

div {
     transform: skew(45deg,60deg); 
     /* 沿X轴倾斜的角度,沿Y轴倾斜的角度 可选,默认值是0 */
  }

transform-origin

使用transform-origin属性,可以更改元素转换的基准点

div {
       transform-origin: left top;
/* 基准点X轴上的位置默认50%,基准点Y轴上的位置默认50% */
       transform: rotate(45deg);
    }

transition 过渡

button {
            background: #fcc;
            transition: 2s;
            /* 过渡的时间 */
            border: none;
        }
button:hover {
            background: #cff;
        }

动画animation

动画animation的子属性有：

 /* 指定由@keyframes描述的关键帧名称 */
            animation-name: name;
            /* 设置动画运行一周的时长 */
            animation-duration: 3s;
            /* 设置动画重复次数，可以指定 infinite 无限次重复动画*/
            animation-iteration-count: 3;
            /* 设置动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化*/
            /*可以参考贝塞尔曲线*/ 
            animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
            /*动画播放的方向。该值必须是animation-direction可用的值之一。*/
            animation-direction:normal;
            /* 设置延时，即从元素加载完成之后到动画序列开始执行的这段时间。*/
            animation-delay: 3s;
            /* 允许暂停和恢复动画。paused暂停 running开始 */
            animation-play-state: running;
            /* 指定动画执行前后如何为目标元素应用样式。 */
            /* forwards 目标将保留由执行期间遇到的最后一个关键帧,最后一个关键帧取决于animation-direction和animation-iteration-count的值： */
            animation-fill-mode: forwards;

综合写法:

                     /*名称  时长    动画运行速度    延时     次数          方向     保留最后一帧 */
            animation: name duration timing-function delay iteration-count direction fill-mode;

使用keyframes定义动画序列关键帧使用 <percentage> 来指定动画发生的时间点。0% 表示动画的第一时刻，100% 表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from 和 to。这两个都是可选的，若 from/0% 或 to/100% 未指定，则浏览器使用计算值开始或结束动画。

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

弹性盒子(flexbox)

div {
 display: flex;
/*开启弹性盒*/
}