css3-形变、过渡、动画
2017-01-29 本文已影响406人
范小饭_
一、2D形变
平移
transform:translate（x，y）
相对当前位置，向左移动x像素，像下移动y像素
transform:translateX（num）
相对当前位置，向左移动num像素
transform:translateY（num）
相对当前位置，向下移动num像素
缩放
transform:scale(x，y)
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform:scaleX( num )
改变元素的宽度
transform:scaleY( num )
改变元素的高度
旋转
transform:rotate( 角度 );
参数是一个角度，表示旋转多少度
倾斜
transform:skew（角度x，角度y）
沿着x轴旋转多少度，沿着y轴转多少度
transform:skewX（角度x）
沿着x轴旋转多少度
transform:skewY（角度y）
沿着y轴旋转多少度
二、3D形变
平移
transform:translate3d( x , y , z );
定义三个方向上的平移
transform:translateZ( z );
定义Z方向的平移（单用看不出效果）
缩放
transform: scale3d( x , y , z);
定义3个方向上的缩放，同时可以分别实现3个方向的分别设置
旋转
rotate3d( x , y , z , angle )
x，表示旋转轴X坐标方向的矢量。
y，表示旋转轴Y坐标方向的矢量。
z，表示旋转轴Z坐标方向的矢量。
angle，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。
三、过渡
transition属性
通过transition，我们可以在不使用flash的情况下，让元素从一种样式变化成另一种样式
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
height: 100px;
width: 100px;
background-color: skyblue;
transition: margin-left 3s;
}
</style>
</head>
<body>
<!-- 通过transition，我们可以在不使用flash的情况下，当元素从一种样式变化成另一种样式 -->
<div id="box"></div>
<script type="text/javascript">
// var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
}
</script>
</body>
</html>
运行效果
GIF.gif
transition实现多个过渡
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
/*如果动画的元素是margin，不能设置auto*/
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
top: 20px;
transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;
}
</style>
</head>
<body>
<!-- 通过transition，我们可以在不使用flash的情况下，当元素从一种样式变化成另一种样式 -->
<div id="box"></div>
<div id="box1"></div>
<script type="text/javascript">
//var box = document.querySelector("box");
box.onclick = function(){
this.style.marginLeft = "600px";
this.style.backgroundColor = "red";
this.style.borderRadius = "50px";
this.style.top = "100px";
}
</script>
</body>
</html>
运行效果
GIF.gif
利用伪元素实现transition过度
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
/*如果动画的元素是margin，不能设置auto*/
height: 100px;
width: 100px;
background-color: pink;
position: absolute;
top: 20px;
transition: margin-left 3s,background-color 3s,border-radius 3s,top 3s;
}
#box:hover{
background-color: purple;
border-radius: 50px;
top: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
运行结果
GIF.gif
利用transition实现3D动画过度
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
#box{
/*如果动画的元素是margin，不能设置auto*/
height: 300px;
width: 300px;
margin: 15px 0 0 15px;
position: relative;
background: url(img/bg.jpg) round;
/*将来写有关动画相关的代码，要写兼容*/
/*transform-style: preserve-3d;*/
/*设置镜头距离*/
perspective: 20000px;
}
div img{
width: 130px;
height: 200px;
position: absolute;
top: 50px;
left: 85px;
transform-style: preserve-3d;
transform: rotateZ(180deg) rotateX(0) rotateY(0deg);
transition: all 3s;
}
div img:hover{
transform: rotateZ(0) rotateX(360deg) rotateY(180deg);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
运行结果
GIF.gif
css3动画
如果用@keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
规定动画的名称
规定动画的时长
from-to
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
height: 30px;
width: 30px;
background-color: blue;
animation: rect 3s linear 0.5s alternate 3 ;
}
@keyframes rect{
from{
transform: translate(0,0);
background-color: blue;
}
to{
transform: translate(200px,200px);
background-color: red;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
运行效果
GIF.gif
百分比
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
#box{
height: 50px;
width: 50px;
background-color: blue;
animation: rect 3s linear infinite alternate;
}
@keyframes rect{
0%{
transform: translate(0,0);
background-color: blue;
}
25%{
transform: translate(300px,0px);
background-color: red;
border-radius: 50%;
}
50%{
transform: translate(300px,300px);
background-color: pink;
border-radius: 0;
}
75%{
transform: translate(0px,300px);
background-color: orange;
border-radius: 50%;
}
100%{
transform: translate(0px,0px);
background-color: yellow;
}
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
运行效果
GIF.gif
小案例（动画实现一个简易大风车）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.circle{
height: 200px;
width: 200px;
margin: 50px auto;
background-color: pink;
border-radius: 50%;
position: relative;
animation: rect 2s linear infinite;
}
.f1{
height: 80px;
width: 50px;
background-color: blue;
position: absolute;
left: 100px;
top: 20px;
border-top-right-radius: 100%;
}
.f2{
width: 80px;
height: 50px;
background-color: red;
position: absolute;
left: 100px;
top: 100px;
border-bottom-right-radius: 100%;
}
.f3{
height: 80px;
width: 50px;
background-color: orange;
position: absolute;
left: 50px;
top: 100px;
border-bottom-left-radius: 100%;
}
.f4{
height: 50px;
width: 80px;
background-color: green;
position: absolute;
left: 20px;
top: 50px;
border-top-left-radius: 100%;
}
@keyframes rect{
from{
transform: rotate(0);
}
to{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
</div>
</body>
</html>
运行结果
GIF.gif
喜欢就点赞
