1 回答

TA貢獻1條經(jīng)驗 獲得超0個贊
這樣可以實現(xiàn)你要寫的效果
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>transition屬性</title>
? ? ? ? <style type="text/css">
? ? ? ? ? ? div{
? ? ? ? ? ? ? ?width: 200px;
? ? ? ? ? ? ? ?height: 200px;
? ? ? ? ? ? ? ?background-color: green;
? ? ? ? ? ? ? ?transition:all 1s linear 0;
? ? ? ? ? ? ? ?-moz-transition:all 1s linear 0; /* Firefox 4 */
? ? ? ? ? ? ? ?-webkit-transition:all 1s linear 0 ; /* Safari 和 Chrome */
? ? ? ? ? ? ? ?-o-transition:all 1s linear 0;
? ? ? ? ? ? ? ?-webkit-transition:background 3s; /*在chroom google瀏覽器中使用*/
? ? ? ? ? ? ? ?-moz-transition:background 3s; /*在firefox瀏覽器中使用*/
? ? ? ? ? ? }
? ? ? ? ? ? div:hover{
? ? ? ? ? ? ? ? background-color: #f60;
? ? ? ? ? ? ? ? width: 400px;
? ? ? ? ? ? ? ? height: 400px;
? ? ? ? ? ? ? ? transition-timing-function:ease;
? ? ? ? ? -webkit-transition:all 5s ease;
? ? ? ? ? -moz-transition:all 5s ease;
? ? ? ? ? -o-transition:all 5s ease;
? ? ? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? ? ? <h1>transition屬性</h1>
? ? ? ? <div></div>
? ? </body>
</html>
- 1 回答
- 0 關注
- 1531 瀏覽
添加回答
舉報