animation 增加宽度

浏览329

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>三体教程(santii.com)</title> 

<style> 

#myDIV {

    width: 500px;

    background-color: coral;

    color: white;

    -webkit-animation: mymove 1s  ; /* Chrome, Safari, Opera */

    animation: mymove 2s  ;

}


/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {

from {

  width:0%;

}to{

width:100%

}

}


/* Standard syntax */

@keyframes mymove {

   from {

  width:0%;

}to{

width:100%

}

}

</style>

</head>

<body>


<p> width 属性支持动画效果。</p>

<p><b>注意:</b>Internet Explorer 9 及更早 IE 版本不支持 CSS 动画。</p>


<p>逐步改变 DIV 元素的宽度,从 120px 到 500px:<p>

<div id="myDIV">

  <h1>My DIV</h1>

</div>


</body>

</html>



  • 暂无任何回答