18.Css——动画

Css动画

 

<style type="text/css">

p{

       width:100px;

       height:100px;

       background-color:green;

}

p:hover{

       animation-duration:1s;

       animation-delay:200ms;

       animation-name:xx

       animation-iteration-count:infinite; 【无限循环的意思，也可以写成2，动两次，也可以是3】

       animation-direction:alternate;【变大之后再变小】

}

@keyframes xx {

from{

       width:150px; 这串代码的意义在于小方块变成大方块，不是简单的从小

       height:150px; 变大再变小，而是从小变中再变大；再从大变中变大，

       background-color:blue; 执行from-to代码。相当于设计了一个中间缓冲值 。

}

50%{

       width:170px;

       height:170px; 和from和to一起执行形成一个四次循环。

       background-color:black;

}

75%{

       width:195px;

       height:195px;

       background-color:yellow;

}

to{

       width:200px;

       height:200px;

       background-color:orange;

 }

}

</style>

_______________________________________________________________________________

 

想让动画实现我们鼠标点击之后不会到原来的形态：animation-fill-mode:forwards;

opacity:xx 透明度的意思，如果写1的话就是不透明