前端 动画
2018-08-16 本文已影响0人
现实里的童话xklss
css3过渡动画
border-radius 设置元素变成圆角
transition 设置动画 4个属性
ease 慢速 加速 慢速 停止的过渡效果
ease-in 慢速 快速 ease-out 快开始越来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3过渡动画</title>
<style type="text/css">
.box1{
width: 100px;
height: 100px;
background-color: gold;
/*transition: width 500ms ease,height 300ms ease 500ms,background-color 500ms ease 1s,border-radius 500ms ease 1.5s;*/
/*单个执行*/
transition: all 500ms ease;
}
/*所有一起执行*/
.box1:hover{
width: 500px;
height: 300px;
background-color: red;
border-radius: 50px;
}
/* border-radius 设置元素变成圆角
transition 设置动画 4个属性
ease 慢速 加速 慢速 停止的过渡效果
ease-in 慢速 快速 ease-out 快开始越来
*/
</style>
</head>
<body>
<div class="box1">
<!-- <div class="box2"></div> -->
</div>
</body>
</html>
transfrom变形
有四种方式 ： 位移 旋转 缩放 斜切
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform变形</title>
<!-- 四种方式 位移 旋转 缩放 斜切-->
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: gold;
margin: 50px auto 0px;
/*translate 写法transfrom:translate(x轴px，y轴px)*/
transform: translate(50px,50px);
}
.box1{
width: 200px;
height: 200px;
background-color: gold;
margin:50px auto 0px;
/*scale 缩放 写法transfrom:scale(x轴,y轴)*/
transform: scale(0.5,0.2);
}
.box2{
width: 200px;
height: 200px;
background-color: gold;
margin:50px auto 0px;
/*rotate 旋转 写法transfrom:rotate( deg)*/
transform: rotate(360deg);;
}
.box3{
width: 200px;
height: 200px;
background-color: gold;
margin:50px auto 0px;
/*skew 斜切 写法 transform:skew(x轴deg,y轴deg)*/
transform: skew(0deg,45deg);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
