【Web】CSS3动画效果制作
最近想做做动画，发现CSS3做动画真的很强大，所以做了几个demo，现总结记录如下。
一.基本语法
figure：html5语义化标签
用于规定独立的流内容（图像等）
figcaption：html5语义化标签
与figure配套使用，用于标签定义figure元素的标题
兼容性：IE9以上
tranform
属性：translate，rotate，scale，skew
兼容性：IE9+
1.translate(10px,10px) 偏移
2.rotate(90deg),transform-orgin:0 0; 旋转
3.scale(0.5,0.5) 放大缩小
4.skew(50deg,20deg) 斜切
以上均是第一个参数代表X轴，第二个参数代表y轴
transition:元素的过渡动画处理
属性：property,duration,timing-function,delay
兼容性：IE10+
1.property：检索设置对象中参与过渡的属性
2.duration：过渡动画的持续时间
3.timing-function:过渡动画的类型
4.delay：设置过渡动画
例子：
h2:hover{
transition:transform 2s ease-in;//至少写2参数
transform:translate(100px);
}二.效果演示与制作
效果1：
html代码：
<body>
<figure class="test1">
<img src="ss.jpg"/>
<figcaption>
<h3>图片标题h3>
<p class="p1">图片内容p>
<p class="p2">图片内容p>
<p class="p3">图片内容p>
figcaption>
figure>
body>
html>css代码：
body,figure,figcaption,h2,p,img{
margin:0;
padding:0;
}
figure{position: relative;width:33.33%;overflow: hidden;height:350px;float: left;}
figure img{
opacity:0.7;
transition:all 0.35s;
}//定义img动画效果
figcaption{position:absolute;top:0px;left:0px;color:#FFF;font-family: "微软雅黑"}/*父容器当中有相对定位的时候，子容器的绝对定位就会相对于父容器定位*/
@media screen and (min-width: 1001px){
figure{width:33.33%}
}
@media screen and (min-width: 601px) and (max-width: 1000px){
figure{width: 50%}
}
@media screen and (max-width: 600px) {
figure{width:100%}
}
figure figcaption p{transition: all 0.35s;}//设置p动画效果
.test1{
background: #2f0000;
}
.test1 figcaption p{
background: #FFF;
color:#333;
margin:5px;
text-align: center;
transform:translate(-120px,0px);
}
.test1 figcaption .p1{transition-delay:0.05s}
.test1 figcaption .p2{transition-delay:0.1s}
.test1 figcaption .p3{transition-delay:0.15s}
.test1:hover figcaption p{
transform: translate(0px,0px);
}
.test1 figcaption{
margin-left: 20px;
}效果2：
html代码：
<figure class="test2">
<img src="timg.jpg"/>
<figcaption>
<h3>图片标题h3>
<p>图片内容p>
<div>div>
figcaption>css代码：
.test2 figcaption div {
transition: all 0.35s;
}
.test2{background: #030;}
.test2 figcaption{
width:100%;height:100%;
}
.test2 figcaption div{
border:2px solid #FFF; width:80%;height:80%;position: absolute;top:10%;left:10%;
transform: translate(0px,-400px) rotate(0deg);
}
.test2 h3{
padding-left: 15%;
padding-top: 10%;
}
.test2 p{
padding-left: 15%;
padding-top:0px;
transform: translate(0px,50px);
opacity:0;
}
.test2:hover figcaption div{
transform: translate(0px,0px) rotate(180deg);
}
.test2:hover img{opacity:0.5;}
.test2:hover figcaption p{transform:translate(0px,0px);opacity:1;}
效果3：
html代码
<figure class="test3">
<img src="rr.jpg"/>
<figcaption>
<h3>图片标题h3>
<div>div>
figcaption>
figure>CSS代码
.test3{background:#000;}
.test3 figcaption{width:100%;height:100%;}
.test3 figcaption h3{margin-top:15%;margin-left: 15%;}
.test3 figcaption div{border:2px solid #FFF; width:80%;height:80%;position:absolute; top:10%;left:10%;
transform: scale(1.2,1.2) ; opacity: 0;
}
.test3:hover figcaption div{
transform: scale(1,1);
opacity:1;
}
.test3:hover img{
opacity:0.5;
transform: scale(1.2,1.2);
}
.test3 img{
transition:all 0.35s;
}
.test3 div{
transition:all 0.35s;
}