【Web】CSS3动画效果制作

最新推荐文章于 2023-12-26 21:37:41 发布

WHUZXQ

最新推荐文章于 2023-12-26 21:37:41 发布

阅读量821

点赞数 2

分类专栏： Web 文章标签：平移缩放旋转 transform transition

本文链接：https://blog.csdn.net/WHUZXQ/article/details/72630744

版权

Web 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

最近想做做动画，发现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;
}