慕课七夕言情知识点总结

引入

　　为了复习H5、CSS3按照慕课网的教程实现一个七夕言情的demo学到（+复习了）很多知识~在此总结一番

　　

知识点

  • transform

定义

　   transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

值

      

应用 

　　如果transform与transition联合起来用，就能实现绚丽的动画效果，for example~但是如果直接应用在某个元素上，

  transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        height: 100px;
        width: 100px;
        background-color: red;
        margin-top: 100px;
        margin-left: 200px;
        border-radius: 100%;
    }
    div:hover{
        transform: rotate(50deg);
        transition:1s;
    }
    </style>
</head>
<body>
    <div>我是一个圆</div>
</body>
</html>

 

 

  • animation

 定义

    animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name                         规定需要绑定到选择器的 keyframe 名称
  • animation-duration                     规定完成动画所花费的时间，以秒或毫秒计
  • animation-timing-function           规定动画的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、step-start、

                                                                                       step-end、steps(<number>[, [ start | end ] ])）

  • animation-delay                         规定在动画开始之前的延迟。
  • animation-iteration-count            规定动画应该播放的次数。
  • animation-direction                     规定是否应该轮流反向播放动画。




   .slowWalk {
    /*规定 @keyframes 动画的名称。*/
    -webkit-animation-name: person-slow; 
    /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
    -webkit-animation-duration: 950ms;
    /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
    -webkit-animation-iteration-count: infinite;
    /*动画切换的方式是一帧一帧的改变*/
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    }
    
    /* 普通慢走 */
    
    @-webkit-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }
    
    @-moz-keyframes person-slow {
        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }








 


    

  • transition
    • 





transition 属性是一个简写属性，用于设置四个过渡属性：


 


    

  • transition-property                规定设置过渡效果的 CSS 属性的名称。
    • 

  • transition-duration                规定完成过渡效果需要多少秒或毫秒。 
    • 

  • transition-timing-function      规定速度效果的速度曲线。（linear、ease、ease-in、ease-out...）
    • 

  • transition-delay                    定义过渡效果何时开始。 
    • 





 


    

  • animation暂停动画和transition暂停
    • 





.pauseWalk {
   -webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
}




     但是如果要停止transition运动的话，强制改变目标过渡值的处理




 var left = $boy.css('left');
// 强制做了一个改变目标left的处理
// 动画是要运行10秒,所以此时动画还是没有结束的
 $boy.css('left',left);
// 增加暂停的样式
 $boy.addClass('pauseWalk');    




    但是这样是有问题的，下一次的启动必须等上一次动画的时间结束


 




 


　　关于动画的知识点已经总结完，接下来的待续噢~               


    







            

            
posted @ 
2015-12-16 11:02 
孙可瘦 
阅读(737) 
评论(0) 
编辑 
收藏 
举报