CSS之过渡，形变转换及动画
2018-11-22 本文已影响0人
追逐_chase
web.jpg
过渡(transition)
-
transition:要过渡的属性 时间 运动的形式 何时开始 -
transition-property设置属性 -
transition-duration持续时间 默认是0 -
transition-timing-function速度曲线 -
transition-delay效果什么时候 开始
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
transition: width 0.5s linear 1s ;
}
div:hover{
width: 600px;
height: 700px;;
}
</style>
transition.gif
transform 变形
2D形变
-transform可以 实现元素的位移、旋转、倾斜、缩放
-
移动平移 translate(x, y)
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:hover{
transform: translateX(50%);
/* 50% 走 自己宽度的一半 */
}
</style>
110.gif
- 注意：如果
translateX是%那就是以自己盒子宽度为基准，比如：50%就是便宜自己宽度的一半的距离 （%经常和定位集合使用，比如居中问题）
position: absolute;
left: 50%;
top: 0;
/* margin-left: -100px; */
transform: translateX(-50%);
-
缩放scale
- scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
- scaleX(x)元素仅水平方向缩放（X轴缩放）
- scaleY(y)元素仅垂直方向缩放（Y轴缩放）
- scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
div{
width: 300px;
height: 300px;
background-color: pink;
}
div img {
transition: all 0.2s;
}
div img:hover{
transform: scale(2);
}
</style>
110.gif
-
旋转 rotate(deg)
- 对元素进行旋转，正值为顺时针，负值为逆时针；
- 注意单位是 deg 度数
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100PX auto;
transition: all 0.5s;
}
div:hover{
transform: rotate(45deg);
}
</style>
110.gif
-
transform-origin设置变换的原点 默认是中心点- 可以是
left top right bottom方位名词 - 可以是精确的
px
- 可以是
3D旋转效果
-
旋转:通过 rotate() 方法，元素可以实现旋转效果，允许负值，元素将逆时针旋转
- rotateX 旋转
<style>
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:hover{
transform: rotateX(360deg);
}
</style>
rotateX.gif
- rotateY 旋转
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:hover{
transform: rotateY(360deg);
}
rotateY.gif
- rotateZ 旋转
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:hover{
transform: rotateZ(360deg);
}
rotateZ.gif
-
transform: translate3d(x,y,z)是translateX() translateY() translateZ()的综合属性
body{
perspective: 500px;
}
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:nth-child(4):hover{
transform: translate3d(100px,100px, 50px);
}
110.gif
综合例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
section {
width: 450px;
height: 300px;
background: url("./images/1.jpg") no-repeat;
margin: 100px auto;
border: 1px solid #000000;
position: relative;
/* 视距 */
perspective: 1000px;
/* 过渡 */
transition: all 0.5s linear;
}
.door_left,
.door_right{
width: 50%;
height: 100%;
background-color: pink;
position: absolute;
top: 0;
transition: all 0.5s linear;
}
.door_left {
left: 0;
border-right: 1px solid #000000;
/* 设置旋转的点 */
transform-origin: 0px center;
}
.door_right{
right: 0;
border-left: 1px solid #000000;
transform-origin:100% center;
}
.door_left::before,
.door_right::before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ffffff;
position: absolute;
top: 50%;
}
.door_left::before {
right: 5px;
/* 居中对齐 */
transform: translateY(-50%);
}
.door_right::before {
left: 5px;
transform: translateY(-50%);
}
section:hover .door_left {
transform: rotateY(-120deg);
}
section:hover .door_right{
transform: rotateY(120deg);
}
</style>
</head>
<body>
<section>
<div class="door_left"></div>
<div class="door_right"></div>
</section>
</body>
</html>
110.gif
动画 animation
-
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; -
animation-name动画名称 -
animation -duration完成动画的时间 -
animation-timing-function动画速度曲线 -
animation-delay动画延迟的时间 -
animation-iteration-count动画的播放次数animation-iteration-count:infinite是无线循环 -
animation-direction动画下个周期是否逆向播放normal正常 | reverse反向运行 | alternate先正向在反向
-
animation-play-state动画是否正在执行或者暂停 -
animation-fill-mode动画结束 要保持的状态
<style>
div{
width: 200px;
height: 200px;
background-color: blueviolet;
animation: chang 2s linear 0s 2 reverse;
}
/* 定义动画 */
@keyframes chang{
from{
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
animation.gif
喜欢文章的👍一下，谢谢，有想学习[web]可以私聊我。
image.png
