CSS3动画笔记

来源：互联网发布：淘宝联盟网站推广审核编辑：程序博客网时间：2024/06/05 16:43

没事看慕课，最近又看了看慕课，看到了几个比较有意思的课程，也就记录了下来

慕课链接
transform属性，CSS3新属性，用于元素变形处理
其中包含参数有 translate平移， Rotate旋转， scale缩放， skew斜切
兼容性IE6-8不兼容
transform-translate:指定对象的2D translation（2D平移）
第一个参数对应x轴，第二个参数对应y轴，如果第二个参数没有提供则为0

transform:translate(10px,10px)

transform-Rotate:指定对象的2Drotation（2D旋转），需要有transform-origin属性定义
transform-origin属性用来设计旋转中心点，默认中心，

transform:rotate(90deg)

transform-scale:控制2D缩放，第一个参数对应x轴，第二个参数对应y，没有提供第二个参数，默认取第一个参数的值，也可以设置圆心点

transform:scale(0.5,0.5)

transform-skew:指对象斜切扭曲，第一个参数对应x轴，第二个参数对应y轴，如果第二个参数提供默认为0

transform:skew(50deg,50deg)

transition为CSS属性，主要用于过渡动画处理，拥有4个参数
property, duration, timing-function, delay
IE10以上才支持
属性详解
property:检索或设置对象中参与过渡的属性。
duration:过渡动画持续时间。
timing-function:动画过渡类型分为5种，分别为Linear, ease, ease-in, ease-out, ease-in-out
delay:检索或设置对象延迟过渡时间。

div:hover{    transition:all 3s ease-in 2s;//all代表之后所有的都用动画表示，包括transform和background    transform:translate(100px);     background: #0000ff;}

媒体查询: 达到某些条件时执行或者倒入CSS文件
原谅我可耻的盗了一下慕课的图，对就是这个！！
这里写图片描述

接下来我也照着慕课教程敲了敲，感觉还不错,不过兼容太恶心了~~~
下面附上代码
HTML

<!DOCTYPE html><head>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css">    <title>H5+CSS3介绍</title></head><body>    <figure class="test1">        <img src="suolong.jpg">        <figcaption>            <h2>图片标题</h2>            <p>图片注解</p>            <p>图片注解</p>            <p>图片注解</p>        </figcaption>    </figure>    <figure class="test2">        <img src="suolong.jpg">        <figcaption>            <h2>旋转小陀螺</h2>            <p>飞呀飞，飞呀飞</p>            <div></div>        </figcaption>    </figure>    <figure class="test3">        <img src="suolong.jpg">        <figcaption>            <h2>索隆大神</h2>            <p>罗罗诺亚·索隆（Roronoa Zoro）能够自由操纵三把刀战斗。爱喝酒，爱睡觉，讲义气，海贼第一超级大路痴。为了小时候与挚友的约定而踏上了前往世界第一剑士的道路，随后成为主角蒙奇·D·路飞的第一个伙伴。在初次败给世界第一剑士“鹰眼米霍克”后向路飞发誓永不再败，并且更加努力的锻炼自己。两年后的他成功与伙伴们汇合，并且为了实现自己的梦想，奔赴强者如云的新世界。</p>        </figcaption>    </figure>    <figure class="test4">        <img src="suolong.jpg">        <figcaption>            <h2>旋转小陀螺</h2>            <p>飞呀飞，飞呀飞</p>            <div></div>        </figcaption>    </figure></body></html>

CSS含大批兼容

body,figure,figcaption,h2,p{margin: 0;padding: 0;}//其他标签动画设计figure figcaption p,h2,span,div{-webkit-transition:all,0.35s;transition:all,0.35s;}figure img{opacity:0.9;filter:alpha(opacity=90);-webkit-transition:all,0.35s;transition:all,0.35s;}//img动画设计figure{position: relative;width: 33.333%;overflow: hidden;height: 486px;float: left;}figcaption{position: absolute;top: 0;left: 0;color: #fff;font-family: "微软雅黑";}@media screen and (max-width:700px){//媒体查询，响应式    figure{width:100%}}@media screen and (min-width:701px) and (max-width:1319px){    figure{width:50%}}@media screen and (min-width:1320px){    figure{width:33.333%}}.test1 figcaption p{background: #FFF;color: #444;text-align: center;margin: 5px;    font-family: "微软雅黑";font-weight: bold;font-size: 20px;transform:translate(-141px,0px);    -webkit-transform:translate(-141px,0px);}/*--------平移-----------*/.test1{background: #030}.test1 figcaption{padding: 50px;}.test1:hover figcaption p{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}.test1 figcaption p:nth-of-type(1){transition-delay:0.05s;-webkit-transition-delay:0.05s;}.test1 figcaption p:nth-of-type(2){transition-delay:0.10s;-webkit-transition-delay:0.10s;}.test1 figcaption p:nth-of-type(3){transition-delay:0.15s;-webkit-transition-delay:0.1.5s;}.test1:hover img{transform:translate(-50px,0px);-webkittransform:translate(-50px,0px);    opacity:0.7;filter:alpha(opacity=70);}/*--------旋转-----------*/.test2{background: #800000;}.test2 figcaption{width:100%;height:100%;}.test2 figcaption h2{margin: 12% 0 0 15%}.test2 figcaption p{margin: 0 0 0 15%;-webkit-transform:translate(0px,50px);    transform:translate(0px,50px);opacity:0;filter:alpha(opacity=0);}.test2 figcaption div{border: 2px solid #fff;width:80%;height:80%;position: absolute;top:10%;left: 10%;transform:translate(0px,-441px) rotate(0deg);-webkit-transform:translate(0px,-441px) rotate(0deg);}.test2:hover figcaption div{transform:translate(0px,0px) rotate(360deg); -webkit-transform:translate(0px,0px) rotate(360deg);}.test2:hover img{opacity:0.7;filter:alpha(opacity=70);}.test2:hover figcaption p{-webkit-transform:translate(0px,0px);transform:translate(0px,0px);    opacity:1;filter:alpha(opacity=100);}/*--------斜切-----------*/.test3{background: #0088A8;}.test3 figcaption{top:15%;left: 5%;}.test3 figcaption p{transform:skew(90deg);transition-delay:0.3s;-webkit-transform:skew(90deg);transition-delay:0.3s;}.test3 figcaption h2{transform:skew(90deg);-webkit-transform:skew(90deg);}.test3:hover img{opacity:0.7;filter:alpha(opacity=70);}.test3:hover figcaption p{transform:skew(0deg);-webkit-transform:skew(0deg);}.test3:hover figcaption h2{transform:skew(0deg);-webkit-transform:skew(0deg);}/*--------缩放-----------*/.test4{background:  #5500FF }.test4 figcaption{width:100%;height:100%;}.test4 figcaption h2{margin: 12% 0 0 15%;opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}.test4 figcaption p{margin: 2% 0 0 15%;opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}.test4 figcaption div{border: 2px solid #fff;width:80%;height:80%;position: absolute;top:10%;left: 10%;-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);opacity:0;filter:alpha(opacity=0);}.test4:hover figcaption div{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:alpha(opacity=100);}.test4:hover img{opacity:0.5;filter:alpha(opacity=50);-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);}.test4:hover figcaption p{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:alpha(opacity=100);}.test4:hover figcaption h2{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1;filter:alpha(opacity=100);}

0 0