transition1

transition的简单例子

by Robbie Yang

HTML

<div>
  <h1>好消息，好消息</h1>
  <h2>澳门*****上线啦</h2>
</div>

CSS

p {
    text-align: center;
  }
  div {
    width: 200px;
    height: 100px;
    margin: 0 auto; 
    color: rgba(0, 0, 0, 0);
    text-align: center;
    background-color: #ff0;
    background-clip: text;
  }

  div:hover {
    width: 600px;
    background-color: #000;
    /** 过渡属性 */
    transition-property: background-color;
    /** 过渡时长 */
    transition-duration: 2s;
    /** 过渡方式 */
    transition-timing-function: ease;
  }