| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- #box {
- width: 200px;
- height: 200px;
- background: #00f;
- transition: height 5s linear 1s;
- }
- </style>
- </head>
- <body>
- <!--
- transition:在一定的时间内平滑的过渡
- transition-property: 要参与过度的属性 （all/width/height）
- transition-duration: 动画持续效果的时间
- transition-timing-function: 动画执行的方式
- ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
- linear - 规定从开始到结束具有相同速度的过渡效果
- ease-in -规定缓慢开始的过渡效果
- ease-out - 规定缓慢结束的过渡效果
- ease-in-out - 规定开始和结束较慢的过渡效果
- cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值
- transition-delay: 执行效果延迟的时间
- -->
- <div id="box"></div>
- <script>
- var box = document.getElementById("box");
- box.onclick = function () {
- box.style.width = 500 + 'px';
- box.style.height = 500 + 'px';
- }
- </script>
- </body>
- </html>
|
