当页面内某一个元素发生移动或者变化时，突然的变化会显得突兀，使用户体验不佳，因此我们可以使用css的transition属性来实现一个过渡的效果，常用的属性有：
- transition-property; 过渡对象
- transition-duration; 过渡时间
- transition-timing-function; 过渡轨迹函数
- transition-dela； 过渡的延迟
过渡轨迹函数通常可以使用cubic-bezier（）去描述过渡的轨迹
我们可以使用 绘图工具 绘制变换轨迹。
另外我们可以通过hover伪类来达到一个鼠标移入元素移动的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="content">
<div class="p1"></div>
<div class="p2"></div>
<div class="p3"></div>
<div class="p4"></div>
</div>
</body>
</html>
我们先用html定义三个块元素，通过css来实现一系列运动：
.content{
width: 400px;
height: 400px;
background-color: #fff;
}
.p1{
width: 100px;
height: 100px;
background-color: antiquewhite;
margin-left: 0;
transition-property: all;/*过渡对象*/
transition-duration: 2s;/*过渡时间*/
transition-timing-function: cubic-bezier(1,1.64,.03,.68);/*过渡轨迹函数*/
/*transition-delay为过渡的延迟*/
}
.content:hover>.p1{
margin-left: 300px;
background-color: coral;
}
.p2{
width: 100px;
height: 100px;
margin-top: 200px;
background-color: aliceblue;
transition-property: all;
transition-duration: 2s;
transition-timing-function: cubic-bezier(1,1.64,.03,.68);
}
.content:hover>.p2{
margin-top: -100px;
background-color: antiquewhite;
}
.p3{
width: 100px;
height: 100px;
background-color: coral;
margin-left: 300px;
margin-top: -400px;
transition-property: all;
transition-duration: 2s;
transition-timing-function: cubic-bezier(1,1.64,.03,.68);
}
.content:hover>.p3{
margin-top: 200px;
background-color: darkorchid;
}
.p4{
width: 100px;
height: 100px;
background-color: darkorchid;
margin:200px 0 0 300px;
transition-property: all;
transition-duration: 2s;
transition-timing-function: cubic-bezier(1,1.64,.03,.68);
}
.content:hover>.p4{
background-color: aliceblue;
margin: -100px 0 0 0;
}
给四个块元素分别放置在父元素的四个角落并设置成不同颜色，通过鼠标的移入块元素分别移动位置并改变颜色，通过cubic-bezier（）值按一定速度变化，可以做出有美感的简单动画效果。
网友评论