CSS3過渡屬性的使用
阿新 • • 發佈：2019-01-05
1. 目的：更改背景圖片
2. 思路：聯想到CSS3的transition屬性，有更好的使用者體驗
3. 用法：可以在更改CSS樣式時同時增加transition屬性，該屬性共有四個子屬性
1). transition-property -> 過渡屬性
2). transition-duration -> 過渡時間
3). transition-timing-function -> 速度曲線
4). transition-delay -> 延時時常
其中第三點較難理解，有如下六種設定方式
| 值 | 描述 |
| linear | 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。 |
| ease | 規定慢速開始，然後變快，然後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。 |
4. 則核心程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #ad { width: 320px; height: 510px; background-image: url(../../img/heros/yasuo.jpg); background-repeat: no-repeat; background-size: 100%; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('button').click(function() { $('#ad').css({ 'background-image': 'url(../../img/heros/wukong.jpg)', 'transition': 'background-image 2s' }) }) }) </script> </head> <body> <div id="ad"> </div> <button>btn</button> </body> </html>
至此