2019-06-04图片文字遮罩，图片文字遮罩，变形，元素旋转，

图片文字遮罩

.box{

width: 200px;

height: 300px;

margin: 0px auto 0;

border: 1px solid #000;

position: relative;

/*overflow: hidden;*/

}

.box img{

width: 200px;

height: 300px;

}

.box .pic_info{

width: 200px;

height: 200px;

background-color: #000;

color: #fff;

position: absolute;

left: 200px;

top: 0px;

transition: all 500ms cubic-bezier(0.470, -0.600, 0.475, 1.605);

background-color: rgba(0,0,0,0.5);

display: none;

}

.box:hover .pic_info{

/*top: 150px;*/

display: block;

}

.box .pic_info p{

margin: 20px;

line-height: 30px;

}

<div class="box">

<img src="img/location_bg.jpg" alt="花朵">

<div class="pic_info">

<p>图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花图片说明：这是一朵花</p>

</div>

</div>

图片文字遮罩

.box{

width: 200px;

height: 300px;

margin: 50px auto 0;

border: 1px solid #000;

position: relative;

/*默认文字不可见*/

overflow: hidden;

}

.box img{

width: 200px;

height: 300px;

}

.box .pic_info{

width: 200px;

height: 200px;

background-color: rgba(0,0,0,0.5);

color: #fff;

/*定位使色块在图片正下方*/

position: absolute;

left: 0;

top: 300px;

transition: all 500ms cubic-bezier(0.470, -0.485, 0.460, 1.435);

}

.box:hover .pic_info{

/*色块上移*/

top:150px;

}

/*间距用p标签的margin，而不直接给.pic_info用padding，因为padding会改变盒子大小*/

.box .pic_info p{

margin: 20px;

line-height: 30px;

}

<div class="box">

<img src="img/location_bg.jpg" alt="玫瑰花">

<div class="pic_info">

<p>图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花图片说明：这是一朵玫瑰花</p>

</div>

</div>

变形

.box,.box2,.box3,.box4{

width: 200px;

height: 200px;

background-color: gold;

margin: 50px auto 0;

transition: all 1s ease;

}

.box:hover{

/*box的动画不会影响到box2*/

/*位移*/

transform: translate(50px,50px);

}

.box2:hover{

/*沿Z轴旋转360度*/

transform: rotate(360deg);

}

.box3:hover{

/*缩放*/

transform: scale(0.5,0.2);

}

.box4:hover{

/*斜切*/

/*transform: skew(45deg,0);*/

transform: skew(0,45deg);

}

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

<div class="box2"></div>

<div class="box3"></div>

<div class="box4"></div>

元素旋转

/*旋转方向判断

1、X轴向右、Y轴向下、Z轴向屏幕外

2、让轴向对着自己，顺时针方向就是该轴向的旋转方向*/

.box{

width: 300px;

height: 300px;

background-color: gold;

margin: 50px auto 0;

transition: all 500ms ease;

/*设置盒子按3D空间显示*/

transform-style: preserve-3d;

transform: perspective(800px) rotateY(0deg);

}

.box:hover{

/*默认沿Z轴旋转*/

/*transform: rotate(45deg);*/

/*perspective设置透视距离，经验数值800比较符合人眼的透视效果*/

/*transform: perspective(800px) rotateX(45deg);*/

transform: perspective(800px) rotateY(-45deg);

}

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

变形中心点

div{

width: 200px;

height: 200px;

background-color: gold;

float: left;

margin: 30px;

transition: all 500ms ease;

}

div:hover{

transform: rotate(-90deg);

}

div:nth-child(1){

/*设置变形的中心点*/

transform-origin: left center;

}

div:nth-child(2){

transform-origin: left top;

}

div:nth-child(3){

transform-origin: 50px 50px;

}

<div></div>*3

背面可见

.con{

width: 300px;

height: 300px;

margin: 50px auto 0;

border: 1px solid #000;

}

.box{

width: 300px;

height: 300px;

background-color: gold;

text-align: center;

line-height: 300px;

font-size: 50px;

transition: all 500ms ease;

/*设置盒子按3d空间显示*/

transform-style: preserve-3d;

/*设置透视距离、三维旋转的初始角度*/

transform: perspective(800px) rotateY(0deg);

/*设置盒子背面是否可见*/

backface-visibility: hidden;

}

.con:hover .box{

transform: rotateY(180deg);

}

<div class="con">

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

</div>

图片翻面

.con{

width: 300px;

height: 272px;

margin: 100px auto 0;

position: relative;

/*

以下两句是为了演示图片和文字层重叠的效果

transform-style: preserve-3d;

transform: perspective(800px) rotateY(45deg);初始旋转45度

*/

}

.pic, .info{

width: 300px;

height: 272px;

position: absolute;

left: 0;

top: 0;

/*图片和文字背面不可见，文字初始已翻转，所以隐藏露出底层图片*/

backface-visibility: hidden;

transform-style: preserve-3d;

transform: perspective(800px) rotateY(0deg);

transition: all 500ms ease;

}

.info{

background-color: gold;

text-align: center;

line-height: 272px;

/*transform: translateZ(10px);初始文字浮起10像素方便查看图片与文字分层的效果*/

/*初始文字翻转，鼠标移入时才翻正显示*/

transform: translateZ(2px) rotateY(180deg);

}

/*鼠标移入时图片翻为背面隐藏*/

.con:hover .pic{

transform: perspective(800px) rotateY(180deg);

}

/*鼠标移入时文字翻为正面显示*/

.con:hover .info{

transform: perspective(800px) rotateY(0deg);

}

<div class="con">

<div class="pic">

<img src="img/location_bg.jpg" alt="玫瑰花">

</div>

<div class="info">玫瑰花的文字说明</div>

</div>

animation动画

.box{

width: 100px;

height: 100px;

background-color: gold;

/*动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态

infinite不限制次数

alternate动画结束后返回，返回也算次数

animation-fill-mode 动画前后的状态

forwards动画完成保持在最后一帧

backwards在延迟时间内，在动画显示之前，应用from开始属性值（例如box宽100，from宽200，在延迟1s内显示200）

both向前和向后填充模式都被应用（例如起始按200，结束停在最后一帧）

*/

animation: moving 1s ease 1s 5 alternate both;

/*动画暂停*/

/*animation-play-state: paused;*/

}

.box:hover{

/*动画运行*/

/*animation-play-state: running;*/

}

/*定义一个动画，名称为moving*/

@keyframes moving{

/*初始状态*/

from{

width: 200px;

}

/*结束状态*/

to{

width: 500px;

}

}

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

人物走路动画

.box{

width: 120px;

height: 182px;

/*border: 1px solid black;*/

margin: 50px auto 0;

overflow: hidden;

position: relative;

animation: moving 2s linear infinite;

}

.box img{

position: absolute;

left: 0;

top: 0;

/*steps动画步数，图片有8帧，所以设置为8步*/

animation: walking 2s steps(16) infinite;

}

@keyframes moving{

0%{

transform: translate(0px,0px);/*位移*/

}

50%{

transform: translate(200px,0px);

}

100%{

transform: translate(0px,0px);

}

}

@keyframes walking{

from{

left: 0px;

}

to{

left: -1920px;

}

}

<div class="box">

<img src="img/walking1.png" alt="人物走路">

</div>

多帧动画

.box{

width: 100px;

height: 100px;

background-color: gold;

margin: 50px auto 0;

animation: moving 1s ease 1s both;

}

@keyframes moving{

0%{

/*位移动画*/

transform: translateY(0px);

background-color: cyan;

}

50%{

transform: translateY(400px);

background-color: gold;

border-radius: 0px;

}

100%{

transform: translateY(0px);

background-color: red;

border-radius: 50px;

}

}

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