css3实现动画效果
基本知识点：
Css3常用到的几个属性：transform（变形），transition（过渡），animation（动画）
- transform
translate：平移，移动，水平方向、垂直方向（translateX，translateY，translateZ等）
scale：缩放；扩大缩小，水平方向、垂直方向（scaleX，scaleY，ScaleZ等）
rotate：旋转，单位为deg（角度，顺时针方向为正），默认沿中心点旋转（水平方向的1/2和垂直方向的1/2的交点）
transform-origin：默认为中心，值为 center center；可以为top left（沿着左上角旋转），bottom right（沿着右下角旋转），等等。也可以设置为百分数
skew：倾斜转换；扭曲，斜切，改变原来图形，单位也是deg（skewX，skewY等）
- transition
transition：过渡的属性名 过渡时间 过渡模式（可以有多个属性，多个值）
过渡模式有 linear（匀速）、ease（缓慢-加快-缓慢）、ease-in（缓慢-加快；慢速开始）、 ease-out（加快-缓慢；慢速结束） 、ease-in-out（缓慢开始和结束）
例如， transition: width 3s,height 3s,background 3s;
等价于 transition: all 3s;
制作动画效果思路：先定义一个动画，然后将他赋给某个值
逐帧动画：每一帧或者每几帧发生一次变化
@keyframes用于定义一个动画
下面我写了一个简单的案例，实现不断旋转运动的球体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-sphere</title>
<style>
*{padding: 0px;margin: 0px;list-style: none;}
html{background: #000;}
#view{margin: 200px auto;width: 400px;height: 400px;border-radius: 50%;}
.item{background: #000;
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #fff;
position: absolute;
opacity: 0.7;
/*不透明*/
cursor: pointer;
}
@keyframes scroll1{
from{transform: rotateY(0deg);}
to{transform: rotateY(360deg);}
}
@keyframes scroll2{
from{transform: rotateY(45deg);}
to{transform: rotateY(405deg);}
}
@keyframes scroll3{
from{transform: rotateY(90deg);}
to{transform: rotateY(450deg);}
}
@keyframes scroll4{
from{transform: rotateY(135deg);}
to{transform: rotateY(495deg);}
}
@keyframes scroll{
100%{transform: rotate3d(0,1,0,360deg);}
/*沿着（0,1,0）这个向量，旋转360°*/
}
#view{
perspective-origin: 50% 50%;
transform-style: preserve-3d;
animation: scroll 10s linear 9s forwards infinite;
}
#item1{
z-index: 1;
transform-style: preserve-3d;
animation: scroll1 2s linear 2s forwards infinite;
}
#item2{
z-index: 2;
transform-style: preserve-3d;
animation: scroll2 2s linear 4s forwards infinite;
}
#item3{
z-index: 3;
transform-style: preserve-3d;
animation: scroll3 2s linear 6s forwards infinite;
}
#item4{
z-index: 4;
transform-style: preserve-3d;
animation: scroll4 2s linear 8s forwards infinite;
}
</style>
</head>
<body>
<div id="view">
<ul id="sphere">
<li class="item" id="item1"></li>
<li class="item" id="item2"></li>
<li class="item" id="item3"></li>
<li class="item" id="item4"></li>
</ul>
</div>
</body>
</html>效果图：
第二个案例是我做的一个3D旋转木马相册效果
鼠标触碰某张图片，相册停止运动，具体实现看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-album</title>
<style>
*{padding: 0px;margin:0px;}
/*div{position: relative;}*/
img{width: 430px;
height: 400px;
z-index: -1;
position: absolute;
bottom: 0px;
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border:2px solid rgba(255,255,255,.5);
cursor: pointer;
max-width: 100%;
}
#stage{
perspective-origin: center 30%;
perspective: 4000px;
width: 400px;
height: 400px;
min-height: 100%;
position: relative;
margin-left: 600px;
margin-top: 200px;
}
#container{
position: absolute;
width: 400px;
height: 400px;
/*top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;*/
transform-style: preserve-3d;
animation-duration: 2s;
transition-duration: 2s;
animation: scroll 10s linear 2s forwards infinite;
}
#container>img:not(:target){z-index: -1;}
@keyframes scroll{
0%{transform: rotateY(0deg);}
100%{transform: rotateY(360deg);}
}
#container:hover{
animation-play-state: paused;
}
img:nth-child(0){
transform: rotateY(0deg) translateZ(500px);
}
img:nth-child(1){
transform: rotateY(60deg) translateZ(500px);
}
img:nth-child(2){
transform: rotateY(120deg) translateZ(500px);
}
img:nth-child(3){
transform: rotateY(180deg) translateZ(500px);
}
img:nth-child(4){
transform: rotateY(240deg) translateZ(500px);
}
img:nth-child(5){
transform: rotateY(300deg) translateZ(500px);
}
img:nth-child(6){
transform: rotateY(360deg) translateZ(500px);
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<img src="images/c01.jpg" alt="" id="i1">
<img src="images/c02.jpg" alt="" id="i2">
<img src="images/c03.jpg" alt="" id="i3">
<img src="images/c04.jpg" alt="" id="i4">
<img src="images/c05.jpg" alt="" id="i5">
<img src="images/c06.jpg" alt="" id="i6">
</div>
</div>
</body>
</html>