CSS3动画笔记

痛定思痛。 2022-08-05 08:41 181阅读 0赞

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

[慕课链接][Link 1]  
**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文件  
原谅我可耻的盗了一下慕课的图，对就是这个！！  
![这里写图片描述][20150908222533092]

--------------------

接下来我也照着慕课教程敲了敲，感觉还不错,不过兼容太恶心了~~~  
下面附上代码  
**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);}

[Link 1]: http://www.imooc.com/learn/473
[20150908222533092]: /images/20220731/79753e7a25124e13ad04036ca31e84e0.png