2019-04-01 css3 transition变换 css3 transiton动画

:transition-property 设置过渡的属性

比如:width height background-color

transition-duration 设置过渡的时间

比如:1s 500ms

transition-timing-function 设置过渡的运动方式:

linear 匀速

ease 开始和结束慢速

ease-in 开始是慢速

ease-out 结束时慢速

ease-in-out 开始和结束时慢速

cubic-bezier(n,n,n,n)

比如:cubic-bezier(0.845, -0.375, 0.215, 1.335)

transition-delay 设置动画的延迟

transition: property duration timing-function delay 同时设置四个属性

图片文字遮罩

图片文字遮罩

.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;

}

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

图片说明:这是一朵玫瑰花图片说明:这是一朵玫瑰花图片说明:这是一朵玫瑰花图片说明:这是一朵玫瑰花

CSS3 transform变换

translate(x,y) 设置盒子位移

scale(x,y) 设置盒子缩放

rotate(deg) 设置盒子旋转

skew(x-angle,y-angle) 设置盒子斜切

perspective 设置透视距离

transform-style flat | preserve-3d 设置盒子是否按3d空间显示

translateX、translateY、translateZ 设置三维移动

rotateX、rotateY、rotateZ 设置三维旋转

scaleX、scaleY、scaleZ 设置三维缩放

tranform-origin 设置变形的中心点

backface-visibility 设置盒子背面是否可见

元素旋转

元素旋转

/*旋转方向判断

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{

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元素

 

  

 

你可能感兴趣的:(2019-04-01 css3 transition变换 css3 transiton动画)