H5C3练习心得 2024.01.03（文字加载动画效果）--transition,动画渲染，遮罩层

（一）transition（过渡效果）

1.详解

通常将css的属性值更改后，浏览器会立即更新新的样式，例如在鼠标悬停在元素上时，通过 :hover 选择器定义的样式会立即应用在元素上。

在 CSS3 中加入了一项过渡功能，通过该功能您可以将元素从一种样式在指定时间内平滑的过渡到另一种样式，类似于简单的动画，但无需借助 flash 或 JavaScript。

2.属性

• transition-property：设置元素中参与过渡的属性；
• transition-duration：设置元素过渡的持续时间；
• transition-timing-function：设置元素过渡的动画类型；
• transition-delay：设置过渡效果延迟的时间，默认为 0；
• transition：简写属性，用于同时设置上面的四个过渡属性。

注意：

要实现过渡效果必须要有以下两项内容：

• 必须要设置元素中参与过渡的属性
• 必须要设置过渡效果的持续时间

（1）transition-property

设置元素中参与过渡的属性

transition-property: none || all || property;

参数说明如下：

• none:说明没有属性参与过渡
• all:说明所有属性参与过渡
• property：定义应用过渡的元素名，多个属性之间用逗号分隔

示例代码如下：

    .box .item .item-mask {
      width: 250px;
      height: 400px;
      background-color: white;
      position: absolute;
      top: 0px;
      left:0px;
      transition: background-color ease 2s;   


    .box .item .item-singer {
      position: absolute;
      bottom: 60px;
      color: white;
      left: -40px;
      transition: all ease .5s;
    }

 （2）transition-duration

设置元素过渡的持续时间

transition-duration:time;

默认值为0，意味着不会有效果

多个属性之间也可以用逗号进行分隔

代码示例如下：

      transition-duration:.5s;

（3）transition-timing-function

设置元素过渡的动画类型

（4）transition-delay

设置过渡效果延迟时间

设置过渡效果开始之前需要等待的时间，默认为0

transition-delay:time;

（5）transition

通过该属性可以同时设置以上的四个属性

属性语法格式如下：

transition: transition-property transition-duration transition-timing-function transition-delay;

前面两个为必填参数，后面两个不填可以省略。

（二）动画渲染

看这个博主写的很清楚.....

http://t.csdnimg.cn/o03EI

（三）遮罩层

遮罩层可以用来覆盖在页面上方，以阻止用户对页面中某些内容的操作

常见的使用场景包括：

• 模态框：当弹出模态框时，遮罩层可以覆盖在整个页面上，使得用户只能与模态框交互，从而实现了浮层的视觉效果。
• 页面加载过程中：当页面需要加载一些耗时资源（如图片、视频等）时，可以使用遮罩层提示用户页面正在加载中。
• 登录/注册框：当网站需要用户登录或者注册时，可以使用遮罩层覆盖在页面上方，防止用户直接点击其他链接跳转到其他页面。
   

代码示例如下：

    .box .item .item-mask {
      width: 250px;
      height: 400px;
      background-color: white;
      position: absolute;
      top: 0px;
      left:0px;
      transition: background-color ease 2s;      
    }
    .item:hover .item-mask {
      background-color: rgba(127,127,127,0.5); 
    }

我这段代码就是：设置一个遮罩层为白色，当鼠标在盒子上时，遮罩层显示为灰色。

在其中我遇到了一个难题：

就是我的遮罩层的颜色我设置的rgb为灰色，导致遮罩层使用后我的图片无法显示

然后当我该成遮罩层rgba的透明度值为0.5时，透明度可以让我下面一层的图片显示出来

以下第一张照片为rgb，第二张为rgba，a=0.5时：

而这里有一个新的属性可以用

那就是opacity:用于设置背景透明度，值为0~1.

 （四）用到了上一篇的技巧

代码如下：

      white-space: normal;
	  overflow: hidden;
	  text-overflow: ellipsis;
      display:-webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient:vertical;

缺一不可，经常这样一起用