动画和过渡效果

动画和过渡效果

1、过渡transition：时间；
    然后在 :hover里设置需要过渡的效果属性
.div1{
width: 200px;
height: 200px;
background: rgba(39,242,23,0.4);
/*background-color: lightblue;
opacity: 0.2;*/
transition:width 2s,height 1s;
}
.div1:hover{
width: 250px;
height: 225px;
background-color: lightblue;
cursor: pointer;
}


2、动画效果 @keyframe
   
{ -webkit-animation：6s effect infinite；}
      @-web-keyframe effect{
        10% {-webkit-transform：rotate（60deg）；}
        30% {-webkit-transform：rotate（60deg）；}
      }这个是旋转效果，rotate可以换成scale为比例变换效果


{ -webkit-animation：6s effect infinite；}
      @-web-keyframe effect{
        from{background：red；color：black；}
        30% {background：blue；color：orange；}
      }这个是变化效果


3、字体引用 @font-face
.div{font-family:name}
 @font-face{
     font-family:name;
     src:url(" ")里面的双引号可改成单引号或是啥都不用，直接写引用位置}


4、placeholder为文本中输入字体时，提示字体消失，当文本中没输入时，提示字体就出现
<input placeholder="提示字体">