transform-动画 小练习：图片盖住文字，当鼠标移到盒子范围，图片消失显示文字/先显示图片，当鼠标移到盒子范围，文字块从一定角度出现盖住图片

CSS进阶-动画： https://www.cnblogs.com/warmNest-llb/p/17870720.html

练习1：图片盖住文字，当鼠标移到盒子范围，图片消失显示文字

代码：

 1 /* 小练习：图片盖住文字，当鼠标移到盒子范围，图片消失显示文字 */
 2 /* 嵌套：div-->box1-->box2 */
 3 div{
 4     width: 430px;
 5     height: 330px;
 6 }
 7 
 8 /* box1放文字并让box2图片覆盖 */
 9 .box1{
10     width: 430px;
11     height: 330px;
12     background-color: pink;
13     font-family: 隶书;
14     font-size: 23px;
15     color: tomato;
16     text-align: center;
17     /* 设置缩放动画，让文字暂时消失 */
18     transform: scale(0);
19     /* 左浮，让box2图片盖住文字 */
20     float: left;
21 }
22 
23 /* box2防止图片 */
24 .box2{
25     width: 440px;
26     height: 330px;
27     background-image: url(https://img0.baidu.com/it/u=1671864965,3195905041&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=330);
28 }
29 
30 /* box2图片鼠标悬浮效果 */
31 div:hover .box2{
32     /* 鼠标放上时消失，消失方向为坐上 */
33     transform:  scale(0);
34     transform-origin: left top;/* 此处方向可随意设置 */
35     /* 过渡动画：box2全部图片，2秒，匀速 */
36     transition: all 1s linear;
37     
38 }
39 /* box1文字鼠标悬浮效果 */
40 div:hover .box1{
41     /* 让文字显于图片后 */
42     transform: scale(1);
43 }

练习2：先显示图片，当鼠标移到盒子范围，文字块从一定角度出现盖住图片

代码：

 1 /* 小练习：先显示图片，当鼠标移到盒子范围，文字块从一定角度出现盖住图片 */
 2 /* 盒子嵌套：box-->box1和box2 */
 3 .box{
 4     width: 641px;
 5     height: 453px;
 6 }
 7 /* box1设置图片 */
 8 .box1{
 9     width: 641px;
10     height: 453px;
11     background-image: url(https://img0.baidu.com/it/u=2748513721,678631881&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=453);
12 }
13 
14 /* box2为文字 */
15 .box2{
16     width: 641px;
17     height: 453px;
18     /* 字体样式、大小、居中 */
19     font-size: 44px;
20     font-family: 隶书;
21     text-align: center;
22     line-height: 453px;
23     /* box2背景 */
24     background-color: wheat ;
25     /* 左浮，让box1图片显示 */
26     float: left;
27     /* 在此处 缩放，使box2暂时消失 */
28     transform: scale(0);
29     /* Y轴平移(-453刚好为box2高，暂时消失) 使box2从上显示 */
30     transform: translateY(-453px);
31 }
32 
33 /* 鼠标悬浮显示效果 */
34 .box:hover .box2{
35     /* 光标悬浮在此处 缩放 使box2显示 */
36     transform: scale(1);
37     /* 动画过渡：受影响盒子 3s 匀速 */
38     transition: all 3s linear;
39     /* 此处动画开始平移 0为默认 */
40     transform: translate(0);
41     /* 背景rgba-->a 为 透明度;1为透明的区间 */
42     background-color: rgba(255,255,255, 0.1);
43 }

视图：

 解析：

　　消失：想让某个元素在盒子中从某个角度出现（如：上方、左方），首先要让它在盒子内 “消失” ，那么就将它的宽\高设置在未使用 伪类选择器时 使用  平移动画（transform: translateY(-453px)） 

　　　　　至它在盒子的X或Y轴的以外的位置，就完成了“消失”。

　　出现：想让“消失的元素”显示，可以 使用伪类选择器hover（鼠标悬浮）来设置该元素在未使用平移动画之前的位置（原位置），也就是平移动画偏移量为0（transform: translateY(0)） 

　　　　　这样也就将该元素恢复在未使用平移动画之前（原位置），也就是“出现”。