【Web】CSS3动画效果制作

来源：互联网发布：圣诞唱诗班歌曲知乎编辑：程序博客网时间：2024/05/19 18:12

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

阅读全文

0 0