【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:

【Web】CSS3动画效果制作_第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;
}

你可能感兴趣的:(Web)